:root {
    --page-bg: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f3f6fb;
    --ink: #081224;
    --ink-soft: #17233a;
    --muted: #667085;
    --line: #dce3ee;
    --dark: #020711;
    --dark-2: #071326;
    --navy: #0a1730;
    --violet: #6d4cff;
    --violet-2: #8d78ff;
    --blue: #2f6bff;
    --green: #21c986;
    --red: #ff5d5d;
    --orange: #ff7a1a;
    --amber: #f5a524;
    --shadow-soft: 0 18px 50px -36px rgba(8, 18, 36, 0.38);
    --shadow-dark: 0 40px 90px -52px rgba(0, 0, 0, 0.9);
    --radius: 8px;
    --font: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --marketing-hero-h1-size: clamp(3rem, 5.45vw, 5.4rem);
    --marketing-hero-h1-line-height: 0.98;
}

@media (max-width: 640px) {
    :root {
        --marketing-hero-h1-size: clamp(2.35rem, 10vw, 3.2rem);
        --marketing-hero-h1-line-height: 1.04;
    }
}

/* Platform v2: light SaaS product page */
.platform-v2-page {
    --platform-blue: #2563ff;
    --platform-blue-2: #5d8cff;
    --platform-ink: #081224;
    --platform-muted: #657186;
    --platform-line: #dfe7f2;
    --platform-soft: #f5f8fc;
    background: #f7faff;
}

.platform-v2-page .brand-mark {
    border-color: var(--platform-blue);
}

.platform-v2-page .brand-mark::after {
    background: var(--platform-blue);
}

.platform-v2-page .button-primary {
    background: linear-gradient(135deg, #1e64ff, #4f7dff);
    box-shadow: 0 20px 42px -24px rgba(37, 99, 255, 0.85);
}

.platform-v2-page .nav-links a[aria-current="page"] {
    color: #fff;
}

.platform-v2-page .nav-links a[aria-current="page"]::after {
    content: "";
    display: block;
    height: 2px;
    margin: 8px 0 0;
    border-radius: 999px;
    background: var(--platform-blue-2);
}

.platform-v2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 108px 0 68px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 12%, rgba(47, 107, 255, 0.26), transparent 36%),
        linear-gradient(135deg, #071a34 0%, #061121 48%, #020814 100%);
}

.platform-v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 86px 86px;
}

.platform-v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.88fr) minmax(620px, 1.12fr);
    gap: 72px;
    align-items: center;
}

.platform-v2-hero-copy h1,
.platform-v2-section-heading h2,
.platform-v2-suite-copy h2,
.platform-v2-advantage h2 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.02;
}

.platform-v2-hero-copy h1 {
    max-width: 720px;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
}

.platform-v2-hero-copy h1 span {
    color: #6ea0ff;
}

.platform-v2-hero-copy p {
    max-width: 660px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.08rem, 1.45vw, 1.34rem);
    line-height: 1.62;
}

.platform-v2-eyebrow,
.platform-v2-suite-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #4f85ff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.platform-v2-hero .hero-actions {
    margin-top: 38px;
}

.platform-v2-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    margin-top: 42px;
}

.platform-v2-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 850;
}

.platform-v2-benefits svg {
    width: 28px;
    height: 28px;
    color: #5d8cff;
}

.platform-v2-hero-dashboard,
.platform-v2-mini-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(13, 31, 57, 0.92), rgba(5, 16, 32, 0.98));
    box-shadow: 0 32px 80px -48px rgba(0, 0, 0, 0.95);
}

.platform-v2-hero-dashboard {
    display: grid;
    grid-template-columns: 160px 1fr;
    min-height: 520px;
    padding: 18px;
}

.platform-v2-dashboard-rail {
    padding: 18px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-v2-mini-logo,
.platform-v2-dashboard-rail span,
.platform-v2-status,
.platform-v2-status a {
    display: flex;
    align-items: center;
}

.platform-v2-mini-logo {
    gap: 8px;
    margin-bottom: 24px;
    font-weight: 900;
}

.platform-v2-mini-logo .brand-mark {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.platform-v2-dashboard-rail span {
    gap: 9px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.82rem;
    font-weight: 800;
}

.platform-v2-dashboard-rail span.is-active {
    background: linear-gradient(135deg, #2563ff, #4e7cff);
    color: #fff;
}

.platform-v2-dashboard-main {
    display: grid;
    gap: 16px;
    padding: 4px 0 0 18px;
}

.platform-v2-dashboard-top,
.platform-v2-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.platform-v2-dashboard-top strong,
.platform-v2-panel-head strong {
    font-size: 1.15rem;
}

.platform-v2-dashboard-top span,
.platform-v2-panel-head span {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.78rem;
    font-weight: 850;
}

.platform-v2-metric-grid,
.platform-v2-pos-grid,
.platform-v2-stock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.platform-v2-metric-grid div,
.platform-v2-pos-grid div,
.platform-v2-stock-grid div,
.platform-v2-report-grid > div {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.platform-v2-metric-grid span,
.platform-v2-pos-grid span,
.platform-v2-stock-grid span,
.platform-v2-report-grid span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.77rem;
    font-weight: 850;
}

.platform-v2-metric-grid b,
.platform-v2-pos-grid b,
.platform-v2-stock-grid b,
.platform-v2-report-grid b {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
}

.platform-v2-metric-grid em,
.platform-v2-pos-grid em {
    display: block;
    margin-top: 10px;
    color: #29d990;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 900;
}

.platform-v2-chart-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr;
    gap: 16px;
}

.platform-v2-chart-card {
    min-height: 218px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.04);
}

.platform-v2-chart-card strong {
    display: block;
    margin-bottom: 16px;
}

.platform-v2-chart-card svg {
    width: 100%;
    height: 142px;
}

.platform-v2-chart-card .grid {
    stroke: rgba(255, 255, 255, 0.08);
}

.platform-v2-chart-card .line,
.platform-v2-report-chart svg path {
    stroke: #4f85ff;
    stroke-width: 5;
    fill: none;
}

.platform-v2-donut-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 14px;
}

.platform-v2-donut-card strong {
    grid-column: 1 / -1;
}

.platform-v2-donut {
    display: grid;
    width: 136px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(#2563ff 0 58%, #5d8cff 58% 80%, #0fb6c6 80% 100%);
}

.platform-v2-donut::before {
    content: "";
    position: absolute;
}

.platform-v2-donut span {
    display: grid;
    width: 82px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    background: #0a1730;
    color: #fff;
    font-weight: 950;
}

.platform-v2-donut small {
    display: block;
    margin-top: -24px;
    color: rgba(255,255,255,0.58);
    font-size: 0.7rem;
}

.platform-v2-donut-card ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255,255,255,0.78);
    font-size: 0.8rem;
    font-weight: 800;
}

.platform-v2-donut-card li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.platform-v2-donut-card i {
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 999px;
    background: #4f85ff;
}

.platform-v2-status {
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.035);
    color: rgba(255,255,255,0.74);
    font-size: 0.84rem;
    font-weight: 800;
}

.platform-v2-status span:first-child svg {
    color: #29d990;
}

.platform-v2-status a {
    gap: 8px;
    color: #6ea0ff;
    text-decoration: none;
}

.platform-v2-stats-section {
    position: relative;
    z-index: 3;
    margin-top: -44px;
    padding-bottom: 70px;
}

.platform-v2-stats-card {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 34, 63, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 80px -52px rgba(16, 34, 63, 0.55);
}

.platform-v2-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 15px;
    align-items: center;
    padding: 30px 28px;
    border-right: 1px solid #e5ecf5;
}

.platform-v2-stat:last-child {
    border-right: 0;
}

.platform-v2-stat span {
    grid-row: span 2;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--platform-blue);
}

.platform-v2-stat strong {
    color: var(--platform-ink);
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    line-height: 1;
}

.platform-v2-stat p {
    margin: 0;
    color: var(--platform-muted);
    font-weight: 750;
}

.platform-v2-overview,
.platform-v2-workflow {
    padding: 64px 0 88px;
}

.platform-v2-section-heading {
    display: grid;
    justify-items: center;
    text-align: center;
}

.platform-v2-section-heading h2 {
    max-width: 840px;
    color: var(--platform-ink);
    font-size: clamp(2.25rem, 4vw, 4.2rem);
    font-weight: 950;
}

.platform-v2-section-heading > p:not(.platform-v2-eyebrow) {
    max-width: 820px;
    margin: 24px 0 0;
    color: var(--platform-muted);
    font-size: 1.12rem;
    line-height: 1.72;
}

.platform-v2-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    margin-top: 48px;
    padding: 22px;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.platform-v2-flow > i {
    display: none;
}

.platform-v2-flow-step {
    display: grid;
    gap: 14px;
    justify-items: center;
    min-height: 140px;
    padding: 24px 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    text-align: center;
}

.platform-v2-flow-step span,
.platform-v2-suite-label svg {
    color: var(--platform-blue);
}

.platform-v2-flow-step span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px -28px rgba(37, 99, 255, 0.7);
}

.platform-v2-flow-step strong {
    font-size: 1rem;
}

.platform-v2-suite {
    padding: 92px 0;
    background: #fff;
}

.platform-v2-suite:nth-of-type(odd) {
    background: #f6f9fd;
}

.platform-v2-suite-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
    gap: 70px;
    align-items: center;
}

.platform-v2-suite.is-reversed .platform-v2-suite-copy {
    order: 2;
}

.platform-v2-suite-copy h2,
.platform-v2-advantage h2 {
    color: var(--platform-ink);
    font-size: clamp(2.15rem, 3.9vw, 4.15rem);
    font-weight: 950;
}

.platform-v2-suite-copy > p {
    margin: 24px 0 0;
    color: var(--platform-muted);
    font-size: 1.08rem;
    line-height: 1.74;
}

.platform-v2-point-grid,
.platform-v2-advantage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

.platform-v2-point-grid span,
.platform-v2-advantage-list span {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: #26334b;
    font-weight: 800;
    line-height: 1.35;
}

.platform-v2-point-grid svg,
.platform-v2-advantage-list svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #21b978;
}

.platform-v2-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    color: var(--platform-blue);
    font-weight: 950;
    text-decoration: none;
}

.platform-v2-suite-visual {
    min-width: 0;
}

.platform-v2-mini-panel {
    min-height: 450px;
    padding: 28px;
    color: #fff;
}

.platform-v2-pos-grid {
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-v2-payment-list,
.platform-v2-feed {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.platform-v2-payment-list span,
.platform-v2-feed span,
.platform-v2-fulfilment-note {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.78);
    font-weight: 800;
}

.platform-v2-payment-list i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #29d990;
}

.platform-v2-order-stack {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.platform-v2-order-stack div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255,255,255,0.04);
}

.platform-v2-order-stack span,
.platform-v2-order-stack b {
    position: relative;
    z-index: 1;
}

.platform-v2-order-stack b {
    float: right;
    color: #fff;
}

.platform-v2-order-stack i {
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, #2563ff, #5d8cff);
}

.platform-v2-stock-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.platform-v2-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 42px;
}

.platform-v2-pipeline div {
    display: grid;
    gap: 14px;
    justify-items: center;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    padding: 22px 12px;
    background: rgba(255,255,255,0.04);
    text-align: center;
}

.platform-v2-pipeline span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    background: rgba(41, 217, 144, 0.14);
    color: #29d990;
}

.platform-v2-fulfilment-note {
    margin-top: 30px;
    line-height: 1.55;
}

.platform-v2-report-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 14px;
    margin-top: 24px;
}

.platform-v2-report-chart {
    grid-row: span 3;
}

.platform-v2-report-chart svg {
    width: 100%;
    height: 210px;
}

.platform-v2-hub-panel {
    display: grid;
    align-content: start;
}

.platform-v2-hub {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
    min-height: 300px;
    align-items: center;
}

.platform-v2-hub strong,
.platform-v2-hub span {
    display: grid;
    place-items: center;
    min-height: 70px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.78);
    text-align: center;
    font-weight: 900;
}

.platform-v2-hub strong {
    min-height: 118px;
    background: linear-gradient(135deg, #2563ff, #5d8cff);
    color: #fff;
    font-size: 1.3rem;
}

.platform-v2-workflow {
    background: #fff;
}

.platform-v2-timeline {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    margin-top: 46px;
}

.platform-v2-timeline div {
    min-height: 150px;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    padding: 20px;
    background: linear-gradient(180deg, #fff, #f6f9ff);
    box-shadow: 0 20px 52px -42px rgba(16, 34, 63, 0.45);
}

.platform-v2-timeline span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: #eaf1ff;
    color: var(--platform-blue);
    font-weight: 950;
}

.platform-v2-timeline strong {
    display: block;
    margin-top: 22px;
    color: var(--platform-ink);
    line-height: 1.25;
}

.platform-v2-advantage {
    padding: 96px 0;
    background: linear-gradient(135deg, #eef4ff, #ffffff);
}

.platform-v2-advantage-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.platform-v2-advantage p {
    max-width: 660px;
    margin: 24px 0 0;
    color: var(--platform-muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.platform-v2-final-card {
    border-radius: 8px;
    padding: 54px;
    color: #fff;
    background:
        radial-gradient(circle at 22% 18%, rgba(93, 140, 255, 0.34), transparent 34%),
        linear-gradient(135deg, #071a34, #061121);
    box-shadow: 0 34px 90px -58px rgba(16, 34, 63, 0.85);
}

.platform-v2-final-card h2 {
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
}

.platform-v2-final-card p {
    color: rgba(255,255,255,0.76);
}

.platform-v2-cube {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    margin-bottom: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2563ff, #77a2ff);
    color: #fff;
    font-size: 2rem;
}

.platform-v2-final-card .hero-actions {
    margin-top: 34px;
}

@media (max-width: 1180px) {
    .platform-v2-hero-grid,
    .platform-v2-suite-grid,
    .platform-v2-advantage-grid {
        grid-template-columns: 1fr;
    }

    .platform-v2-hero-copy {
        max-width: 840px;
        padding-top: 28px;
    }

    .platform-v2-suite.is-reversed .platform-v2-suite-copy {
        order: 0;
    }

    .platform-v2-flow,
    .platform-v2-timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .platform-v2-hero {
        padding-top: 96px;
    }

    .platform-v2-hero-dashboard {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .platform-v2-dashboard-rail {
        display: none;
    }

    .platform-v2-dashboard-main {
        padding-left: 0;
    }

    .platform-v2-metric-grid,
    .platform-v2-chart-grid,
    .platform-v2-donut-card,
    .platform-v2-stats-card,
    .platform-v2-pos-grid,
    .platform-v2-stock-grid,
    .platform-v2-report-grid,
    .platform-v2-pipeline,
    .platform-v2-advantage-list,
    .platform-v2-point-grid {
        grid-template-columns: 1fr;
    }

    .platform-v2-stat {
        border-right: 0;
        border-bottom: 1px solid #e5ecf5;
    }

    .platform-v2-stat:last-child {
        border-bottom: 0;
    }

    .platform-v2-status {
        display: grid;
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .platform-v2-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .platform-v2-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-v2-hero-copy p,
    .platform-v2-suite-copy > p,
    .platform-v2-section-heading > p:not(.platform-v2-eyebrow),
    .platform-v2-advantage p {
        font-size: 1rem;
    }

    .platform-v2-hero-dashboard,
    .platform-v2-mini-panel,
    .platform-v2-final-card {
        padding: 18px;
    }

    .platform-v2-flow,
    .platform-v2-timeline {
        grid-template-columns: 1fr;
    }

    .platform-v2-suite,
    .platform-v2-advantage {
        padding: 58px 0;
    }

    .platform-v2-stats-section {
        padding-bottom: 34px;
    }

    .platform-v2-benefits {
        display: grid;
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.ordello-premium-page {
    margin: 0;
    overflow-x: hidden;
    background: var(--page-bg);
    color: var(--ink);
    font-family: var(--font);
    text-rendering: geometricPrecision;
}

.ordello-premium-page a {
    color: inherit;
}

.ordello-premium-page svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.shell {
    width: min(100% - 32px, 1440px);
    margin-inline: auto;
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
}

.nav-bar {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: rgba(255, 255, 255, 0.92);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border: 4px solid var(--orange);
    border-radius: 999px;
}

.brand-mark::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 10px;
    height: 4px;
    border-radius: 999px;
    background: var(--orange);
    transform: rotate(-32deg);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 0.92rem;
    font-weight: 750;
}

.nav-links a,
.nav-login,
.site-footer a {
    text-decoration: none;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.83);
}

.nav-links a::after {
    content: "⌄";
    margin-left: 7px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.75rem;
}

.nav-links a:nth-child(3)::after {
    content: "";
    margin: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.92rem;
    font-weight: 800;
}

.nav-login {
    color: rgba(255, 255, 255, 0.9);
}

.button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius);
    padding: 0 25px;
    border: 1px solid transparent;
    font-size: 0.97rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button svg {
    width: 18px;
    height: 18px;
}

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

.button:focus-visible,
.nav-links a:focus-visible,
.nav-login:focus-visible,
.site-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.button-primary {
    background: linear-gradient(135deg, var(--violet), #4f32e8);
    color: #fff;
    box-shadow: 0 18px 42px -22px rgba(109, 76, 255, 0.9);
}

.button-secondary {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.button-small {
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.88rem;
}

.play-icon {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid currentColor;
}

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 700px;
    padding: 112px 0 72px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(109, 76, 255, 0.16), transparent 38%),
        linear-gradient(135deg, #081734 0%, #030814 54%, #010205 100%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.15;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 96px 96px;
    transform: skewY(-7deg) translateY(12px);
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.21;
    background-image: radial-gradient(rgba(255, 255, 255, 0.8) 0.55px, transparent 0.55px);
    background-size: 4px 4px;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(430px, 0.94fr) minmax(560px, 1.06fr);
    gap: 42px;
    align-items: center;
}

.eyebrow,
.section-kicker {
    margin: 0;
    color: var(--violet);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-copy-block .eyebrow {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    padding: 8px 13px;
}

.hero-copy-block h1 {
    max-width: 700px;
    margin: 22px 0 0;
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    letter-spacing: 0;
    line-height: var(--marketing-hero-h1-line-height);
}

.hero-copy-block h1 span {
    color: var(--violet-2);
}

.hero-subhead {
    max-width: 610px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.04rem, 1.45vw, 1.24rem);
    font-weight: 550;
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.micro-proof {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.88rem;
    font-weight: 650;
}

.micro-proof span {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
}

.micro-proof svg {
    width: 12px;
    height: 12px;
}

.product-composition {
    position: relative;
    min-height: 510px;
    perspective: 1600px;
}

.dashboard-panel {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    width: min(100%, 742px);
    min-height: 390px;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(8, 16, 32, 0.72);
    box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotateX(3deg) rotateY(-8deg) rotateZ(-2deg);
    backdrop-filter: blur(24px);
}

.dashboard-sidebar {
    padding: 20px 13px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.mini-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
}

.mini-brand .brand-mark {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.mini-brand .brand-mark::after {
    width: 6px;
    height: 2px;
}

.dashboard-sidebar > span {
    display: block;
    border-radius: 6px;
    margin-top: 8px;
    padding: 8px 9px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.67rem;
    font-weight: 750;
    white-space: nowrap;
}

.dashboard-sidebar .active-nav {
    background: rgba(109, 76, 255, 0.9);
    color: #fff;
}

.dashboard-content {
    min-width: 0;
    padding: 26px;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.dashboard-heading strong {
    color: #fff;
    font-size: 1.1rem;
}

.dashboard-heading span {
    border-radius: 999px;
    background: rgba(33, 201, 134, 0.12);
    color: #8df0c4;
    padding: 5px 9px;
    font-size: 0.68rem;
    font-weight: 850;
}

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

.metric-card,
.chart-panel,
.items-panel,
.orders-panel,
.floating-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.metric-card {
    padding: 15px 14px;
}

.metric-card span,
.chart-panel span,
.items-panel span,
.orders-panel span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.66rem;
    font-weight: 800;
}

.metric-card strong {
    display: block;
    margin-top: 9px;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
}

.metric-card small,
.floating-card small {
    display: block;
    margin-top: 9px;
    font-size: 0.62rem;
    font-weight: 850;
}

.positive {
    color: var(--green);
}

.danger {
    color: var(--red);
}

.active {
    color: var(--violet-2);
}

.dashboard-lower {
    display: grid;
    grid-template-columns: 1.35fr 0.84fr 0.84fr;
    gap: 13px;
    margin-top: 13px;
}

.chart-panel,
.items-panel,
.orders-panel {
    min-height: 160px;
    padding: 16px;
}

.chart-panel strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 1rem;
}

.ordello-premium-page .trend-line {
    width: 100%;
    height: 102px;
    margin-top: 12px;
    color: var(--violet-2);
}

.trend-stroke,
.mini-chart path {
    stroke: currentColor;
    stroke-width: 5;
    fill: none;
}

.trend-fill {
    fill: rgba(109, 76, 255, 0.16);
    stroke: none;
}

.items-panel div,
.orders-panel div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 13px;
    color: #fff;
    font-size: 0.72rem;
}

.items-panel strong,
.orders-panel strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.items-panel em,
.orders-panel em {
    color: rgba(255, 255, 255, 0.72);
    font-style: normal;
}

.floating-card {
    position: absolute;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px 12px;
    width: 170px;
    padding: 13px;
    color: #fff;
    background: rgba(22, 31, 49, 0.78);
    backdrop-filter: blur(18px);
}

.floating-card strong {
    font-size: 0.74rem;
}

.floating-card small {
    grid-column: 2;
    margin-top: -3px;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.45;
}

.floating-card em {
    grid-column: 2;
    color: var(--green);
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 900;
}

.floating-card b {
    grid-column: 2;
    color: #fff;
    font-size: 1.7rem;
    line-height: 0.8;
}

.float-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
}

.float-icon.orange {
    background: #d88922;
}

.float-icon.amber {
    background: #f5a524;
}

.float-icon.blue {
    background: var(--blue);
}

.stock-float {
    top: 26px;
    right: 0;
}

.order-float {
    left: 55px;
    bottom: 70px;
}

.calls-float {
    right: 48px;
    bottom: 34px;
}

.problem-solution-section {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 58px;
    padding: 54px 0;
}

.split-section > *,
.problem-block,
.problem-grid,
.solution-block,
.flow-diagram {
    min-width: 0;
    max-width: 100%;
}

.problem-block {
    display: grid;
    grid-template-columns: minmax(285px, 0.68fr) 1fr;
    gap: 30px;
}

.problem-block .section-kicker,
.problem-block h2 {
    grid-column: 1;
}

.problem-block h2,
.solution-block h2,
.section-title,
.command-copy h2,
.replacement-copy h2,
.serious-card h2,
.final-cta h2 {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(2rem, 3.1vw, 3.2rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.08;
}

.problem-block h2,
.solution-block h2 {
    font-size: clamp(1.75rem, 2.2vw, 2.2rem);
    line-height: 1.12;
}

.problem-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-self: end;
}

.problem-grid ul,
.check-list,
.replace-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.problem-grid li,
.replace-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 760;
}

.problem-grid li span,
.replace-card li span,
.check-list span {
    display: grid;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
}

.problem-grid li span,
.bad {
    color: var(--red);
    border: 1px solid currentColor;
}

.problem-grid li svg,
.replace-card li svg,
.check-list svg {
    width: 11px;
    height: 11px;
}

.solution-block {
    border-left: 1px solid var(--line);
    padding-left: 58px;
}

.solution-block p:not(.section-kicker) {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 650;
}

.flow-diagram {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.flow-step {
    display: grid;
    gap: 10px;
    justify-items: center;
    flex: 0 0 auto;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 850;
}

.flow-step span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: var(--radius);
    background: #f0edff;
    color: var(--ink);
}

.flow-diagram > i {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--violet-2);
    font-style: normal;
}

.platform-section,
.outcomes-section,
.industry-section,
.replacement-section {
    background: #fff;
    padding: 50px 0;
}

.section-title {
    max-width: 760px;
}

.section-title.compact {
    max-width: 520px;
}

.module-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.module-card {
    position: relative;
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 22px 18px 18px;
    box-shadow: var(--shadow-soft);
}

.module-icon,
.outcome-item > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius);
    background: #f0edff;
    color: var(--blue);
}

.module-card:nth-child(5) .module-icon,
.outcome-item:nth-child(3) > span {
    background: #fff0df;
    color: var(--orange);
}

.module-card:nth-child(4) .module-icon,
.outcome-item:nth-child(4) > span {
    background: #e7f8ef;
    color: #13935f;
}

.module-card h3,
.outcome-item h3,
.industry-card h3,
.replace-card h3 {
    margin: 17px 0 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.18;
}

.module-card p,
.outcome-item p,
.industry-card p,
.replace-card li {
    color: var(--muted);
    line-height: 1.45;
}

.module-card p {
    margin: 8px 0 0;
    font-size: 0.82rem;
    font-weight: 680;
}

.module-card > i,
.industry-card > i {
    position: absolute;
    right: 15px;
    bottom: 15px;
    color: var(--ink);
    font-style: normal;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 26px;
    margin-top: 30px;
}

.outcome-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: start;
}

.outcome-item h3 {
    margin-top: 0;
    font-size: 1.04rem;
}

.outcome-item p {
    margin: 7px 0 0;
    font-size: 0.82rem;
    font-weight: 680;
}

.industry-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 38px;
    align-items: end;
}

.industry-scroll {
    display: grid;
    grid-auto-columns: minmax(210px, 1fr);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scroll-snap-type: x proximity;
}

.industry-card {
    display: block;
    position: relative;
    min-height: 140px;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: var(--radius);
    padding: 22px 20px 36px;
    color: #fff;
    text-decoration: none;
    background:
        linear-gradient(180deg, rgba(2, 7, 17, 0.2), rgba(2, 7, 17, 0.93)),
        linear-gradient(135deg, #192438, #071326 72%);
}

.industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient(130deg, transparent 0 38%, rgba(255, 255, 255, 0.45) 39%, transparent 40% 100%);
    background-size: 70px 70px;
}

.industry-card h3,
.industry-card p,
.industry-card i {
    position: relative;
}

.industry-card h3 {
    color: #fff;
    margin-top: 20px;
}

.industry-card p {
    max-width: 176px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 720;
}

.industry-card > i {
    color: #fff;
}

.command-section {
    overflow: hidden;
    background: linear-gradient(135deg, #fff 0 34%, #071326 34% 100%);
    padding: 54px 0 0;
}

.command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
    gap: 48px;
    align-items: center;
}

.angled-product {
    min-height: 310px;
    perspective: 1400px;
}

.mini-dashboard {
    display: grid;
    grid-template-columns: 118px 1fr;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #071121;
    box-shadow: var(--shadow-dark);
    transform: rotateX(5deg) rotateY(7deg) rotateZ(1deg);
}

.mini-dashboard aside {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-dashboard aside .brand-mark {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.mini-dashboard aside b,
.mini-dashboard aside span:not(.brand-mark) {
    border-radius: 6px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.66rem;
}

.mini-dashboard aside b {
    background: var(--violet);
    color: #fff;
}

.mini-dashboard main {
    min-width: 0;
    padding: 22px;
    color: #fff;
}

.mini-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.mini-metrics span,
.mini-chart,
.mini-table span {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.07);
}

.mini-metrics span {
    display: block;
    padding: 13px;
}

.mini-metrics b {
    display: block;
    font-size: 1.1rem;
}

.mini-metrics em {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.62rem;
    font-style: normal;
}

.mini-chart {
    height: 105px;
    margin-top: 12px;
    padding: 18px;
    color: var(--violet-2);
}

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

.mini-table {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.mini-table span {
    display: block;
    height: 20px;
}

.command-copy {
    padding: 74px 0;
    color: #fff;
}

.command-copy h2 {
    color: #fff;
    max-width: 560px;
}

.check-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.02rem;
    font-weight: 720;
}

.check-list span,
.good {
    color: var(--green);
    border: 1px solid currentColor;
}

.replacement-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(210px, 0.55fr) minmax(210px, 0.62fr) minmax(320px, 0.95fr);
    gap: 28px;
    align-items: center;
}

.replacement-copy h2 {
    max-width: 360px;
}

.replace-card {
    min-height: 222px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

.replace-card h3 {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.serious-card {
    min-height: 286px;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(109, 76, 255, 0.18), transparent),
        linear-gradient(135deg, #111b35, #020711);
    color: #fff;
    padding: 34px;
    box-shadow: var(--shadow-dark);
}

.serious-card h2 {
    color: #fff;
    font-size: clamp(1.9rem, 2.5vw, 2.7rem);
}

.serious-card p {
    max-width: 420px;
    margin: 14px 0 24px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}

.assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.78rem;
    font-weight: 750;
}

.assurance span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.assurance svg {
    width: 14px;
    height: 14px;
}

.final-cta {
    background: linear-gradient(135deg, #071326, #020711);
    padding: 30px 0;
    color: #fff;
}

.final-cta-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

.final-cta h2 {
    color: #fff;
}

.final-cta p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    font-weight: 650;
}

.final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #020711;
    color: rgba(255, 255, 255, 0.67);
    padding: 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.65fr) minmax(0, 1.7fr) minmax(150px, auto);
    gap: 28px;
    align-items: center;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 0.9rem;
    font-weight: 750;
}

.footer-nav-main {
    max-width: 760px;
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 138px 0 76px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(109, 76, 255, 0.18), transparent 38%),
        linear-gradient(135deg, #081734 0%, #030814 54%, #010205 100%);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 96px 96px;
    transform: skewY(-7deg) translateY(12px);
}

.page-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.5fr);
    gap: 56px;
    align-items: end;
}

.page-hero h1 {
    max-width: 920px;
    margin: 20px 0 0;
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
    letter-spacing: 0;
}

.page-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.05rem, 1.4vw, 1.26rem);
    font-weight: 650;
    line-height: 1.55;
}

.page-proof-panel {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    padding: 22px;
    box-shadow: var(--shadow-dark);
    backdrop-filter: blur(20px);
}

.page-proof-panel > span {
    display: block;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.proof-metric {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin-top: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    padding: 14px;
}

.proof-metric strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}

.proof-metric b {
    color: #fff;
    font-size: 1.45rem;
}

.kpi-band {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.kpi-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 18px 0;
    scrollbar-width: none;
}

.kpi-strip::-webkit-scrollbar {
    display: none;
}

.kpi-strip span {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--ink-soft);
    padding: 9px 13px;
    font-size: 0.84rem;
    font-weight: 850;
}

.page-media-section {
    background: #fff;
    padding: 34px 0 6px;
}

.page-media-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 6.4;
    min-height: 260px;
    margin: 0;
    border: 1px solid rgba(9, 18, 38, 0.1);
    border-radius: 8px;
    background: #071326;
    box-shadow: 0 34px 86px -64px rgba(8, 18, 36, 0.56);
}

.page-media-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 7, 17, 0.65), rgba(2, 7, 17, 0.1) 48%, rgba(2, 7, 17, 0.72)),
        linear-gradient(180deg, transparent 48%, rgba(2, 7, 17, 0.72));
    pointer-events: none;
}

.page-media-frame img,
.platform-module-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-media-frame figcaption {
    position: absolute;
    z-index: 1;
    left: clamp(18px, 3vw, 34px);
    bottom: clamp(18px, 3vw, 30px);
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    font-weight: 850;
    line-height: 1.35;
}

.page-proof-section,
.page-related-section {
    background: #fff;
    padding: 62px 0;
}

.page-proof-section {
    padding-top: 42px;
}

.page-proof-heading,
.page-related-heading {
    max-width: 840px;
}

.page-proof-heading h2,
.page-related-heading h2 {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(2rem, 3.4vw, 3.85rem);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: 0;
}

.page-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.page-proof-card {
    min-height: 220px;
    border: 1px solid rgba(9, 18, 38, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(109, 76, 255, 0.08), transparent 38%),
        #fff;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.page-proof-card span {
    display: inline-flex;
    color: var(--violet);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 900;
}

.page-proof-card h3 {
    margin: 44px 0 0;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1.16;
}

.page-proof-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.94rem;
    font-weight: 680;
    line-height: 1.52;
}

.page-section {
    background: #fff;
    padding: 66px 0;
}

.page-section-dark {
    background: linear-gradient(135deg, #071326, #020711);
    color: #fff;
}

.page-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.page-card {
    min-height: 190px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 24px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.page-card:hover {
    transform: translateY(-3px);
    border-color: rgba(109, 76, 255, 0.4);
    box-shadow: 0 28px 64px -44px rgba(8, 18, 36, 0.56);
}

.page-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.12;
}

.page-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 680;
    line-height: 1.5;
}

.page-card span {
    display: inline-flex;
    margin-top: 24px;
    color: var(--violet);
    font-size: 0.85rem;
    font-weight: 950;
}

.platform-depth-section {
    background:
        linear-gradient(180deg, #fff 0%, #f8fafc 42%, #fff 100%);
    padding: 28px 0 76px;
}

.platform-depth-header {
    max-width: 860px;
}

.platform-depth-header h2 {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(2.25rem, 4.2vw, 4.5rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
}

.platform-depth-header p:not(.section-kicker) {
    max-width: 720px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 680;
    line-height: 1.62;
}

.platform-module-stack {
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.platform-module-panel {
    scroll-margin-top: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.66fr);
    gap: 34px;
    align-items: stretch;
    border: 1px solid rgba(9, 18, 38, 0.1);
    border-radius: 8px;
    background: #fff;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 28px 72px -58px rgba(8, 18, 36, 0.48);
}

.platform-module-panel:nth-child(even) {
    background: linear-gradient(135deg, #071326, #020711);
    color: #fff;
}

.platform-module-copy h3 {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(1.85rem, 3vw, 3.35rem);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: 0;
}

.platform-module-copy p:not(.section-kicker) {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.62;
}

.platform-module-copy > strong {
    display: block;
    max-width: 680px;
    margin-top: 22px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.45;
}

.platform-module-panel:nth-child(even) .section-kicker {
    color: #9d8cff;
}

.platform-module-panel:nth-child(even) .platform-module-copy h3,
.platform-module-panel:nth-child(even) .platform-module-copy > strong {
    color: #fff;
}

.platform-module-panel:nth-child(even) .platform-module-copy p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.76);
}

.platform-module-system {
    display: grid;
    align-content: start;
    gap: 16px;
    border: 1px solid rgba(109, 76, 255, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(109, 76, 255, 0.12), transparent 36%),
        #f8fafc;
    padding: 18px;
}

.platform-module-panel:nth-child(even) .platform-module-system {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(145deg, rgba(109, 76, 255, 0.22), transparent 38%),
        rgba(255, 255, 255, 0.06);
}

.platform-system-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-system-header b {
    color: var(--violet);
    font-family: var(--font-mono);
    font-size: 0.88rem;
}

.platform-module-panel:nth-child(even) .platform-system-header {
    color: rgba(255, 255, 255, 0.58);
}

.platform-module-panel:nth-child(even) .platform-system-header b {
    color: #c9c0ff;
}

.platform-module-image {
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(9, 18, 38, 0.08);
    border-radius: 8px;
    filter: saturate(0.92) contrast(1.04);
}

.platform-module-panel:nth-child(even) .platform-module-image {
    border-color: rgba(255, 255, 255, 0.14);
    opacity: 0.92;
}

.platform-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.platform-chip-grid span {
    min-height: 44px;
    border: 1px solid rgba(9, 18, 38, 0.09);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-soft);
    padding: 12px;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.2;
}

.platform-module-panel:nth-child(even) .platform-chip-grid span {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.86);
}

.platform-signal-list {
    display: grid;
    gap: 9px;
}

.platform-signal-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(9, 18, 38, 0.08);
    padding-top: 11px;
}

.platform-signal-list span {
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 800;
}

.platform-signal-list strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}

.platform-module-panel:nth-child(even) .platform-signal-list div {
    border-color: rgba(255, 255, 255, 0.12);
}

.platform-module-panel:nth-child(even) .platform-signal-list span {
    color: rgba(255, 255, 255, 0.62);
}

.platform-module-panel:nth-child(even) .platform-signal-list strong {
    color: #fff;
}

.page-split {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.68fr);
    gap: 58px;
    align-items: start;
}

.page-split h2 {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--ink);
    font-size: clamp(2.1rem, 4vw, 4.2rem);
    font-weight: 950;
    line-height: 1.02;
}

.page-split p:not(.section-kicker) {
    max-width: 670px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.62;
}

.page-section-dark .section-kicker {
    color: #9d8cff;
}

.page-section-dark .page-split h2 {
    color: #fff;
}

.page-section-dark .page-split p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.74);
}

.page-bullet-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-bullet-list li {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    padding: 17px 18px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
}

.page-section-dark .page-bullet-list li {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.84);
}

.reveal {
    opacity: 1;
    transform: none;
    transition: transform 220ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1180px) {
    .nav-links {
        gap: 18px;
    }

    .hero-grid,
    .split-section,
    .command-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy-block {
        max-width: 780px;
        padding-top: 32px;
    }

    .product-composition {
        min-height: 470px;
    }

    .dashboard-panel {
        margin-inline: auto;
    }

    .solution-block {
        border-left: 0;
        padding-left: 0;
    }

    .problem-block {
        grid-template-columns: 1fr;
    }

    .problem-block .section-kicker,
    .problem-block h2,
    .problem-grid {
        grid-column: auto;
        grid-row: auto;
    }

    .module-row,
    .outcomes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .replacement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .page-hero-grid,
    .page-split,
    .platform-module-panel {
        grid-template-columns: 1fr;
    }

    .page-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-proof-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .site-header {
        position: absolute;
    }

    .nav-bar {
        min-height: 68px;
    }

    .nav-links {
        display: none;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-login {
        display: none;
    }

    .hero-section {
        padding-top: 94px;
    }

    .dashboard-panel {
        grid-template-columns: 1fr;
        transform: none;
    }

    .dashboard-sidebar {
        display: none;
    }

    .metric-grid,
    .dashboard-lower,
    .problem-grid,
    .replacement-grid,
    .final-cta-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .floating-card {
        position: relative;
        inset: auto;
        width: auto;
        margin-top: 12px;
    }

    .product-composition {
        display: grid;
        min-height: 0;
    }

    .stock-float,
    .order-float,
    .calls-float {
        max-width: 320px;
    }

    .industry-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .command-section {
        background: linear-gradient(180deg, #fff 0 32%, #071326 32% 100%);
    }

    .mini-dashboard {
        transform: none;
    }

    .final-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .shell {
        width: min(100% - 24px, 1440px);
    }

    .brand {
        font-size: 1.14rem;
    }

    .nav-actions .button-small {
        padding: 0 13px;
    }

    .hero-copy-block h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .page-hero {
        padding: 96px 0 54px;
    }

    .page-hero h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .page-proof-panel {
        display: none;
    }

    .page-card-grid {
        grid-template-columns: 1fr;
    }

    .page-media-frame {
        aspect-ratio: 4 / 3.2;
        min-height: 250px;
    }

    .page-split {
        gap: 26px;
    }

    .platform-chip-grid {
        grid-template-columns: 1fr;
    }

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

    .button {
        width: 100%;
        min-height: 50px;
    }

    .micro-proof {
        align-items: flex-start;
    }

    .dashboard-content {
        padding: 16px;
    }

    .metric-grid,
    .module-row,
    .outcomes-grid {
        grid-template-columns: 1fr;
    }

    .problem-solution-section .shell,
    .platform-section,
    .outcomes-section,
    .industry-section,
    .replacement-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .flow-diagram {
        gap: 12px;
        margin-inline: 0;
        padding-inline: 0;
    }

    .flow-step span {
        width: 46px;
        height: 46px;
    }

    .outcome-item {
        grid-template-columns: 48px 1fr;
    }

    .industry-scroll {
        grid-auto-columns: minmax(235px, 78vw);
    }

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

    .mini-dashboard aside {
        display: none;
    }

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

    .command-copy {
        padding: 50px 0;
    }

    .serious-card {
        padding: 24px;
    }
}

.platform-v2-page .platform-v2-chart-card > svg {
    width: 100%;
    height: 142px;
}

.platform-v2-page .platform-v2-report-chart svg {
    width: 100%;
    height: 210px;
}

.platform-v2-page .platform-v2-chart-card .grid {
    stroke: rgba(255, 255, 255, 0.08);
}

.platform-v2-page .platform-v2-chart-card path[stroke],
.platform-v2-page .platform-v2-report-chart path[stroke] {
    stroke-width: 5;
}

@media (min-width: 861px) {
    .platform-v2-page .platform-v2-chart-grid {
        grid-template-columns: minmax(250px, 1.05fr) minmax(280px, 1fr);
    }
}

/* Homepage section refresh: suites, operator control, and industries. */
.home-suites-section,
.home-control-section,
.home-industries-section {
    padding: 70px 0;
}

.home-section-heading {
    margin-bottom: 36px;
}

.home-section-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: clamp(28px, 6vw, 110px);
    align-items: start;
}

.home-section-heading .section-kicker {
    margin-bottom: 14px;
}

.home-section-heading .section-title {
    margin: 0;
    max-width: 610px;
    color: var(--ink);
    font-size: clamp(2.35rem, 4.3vw, 4.05rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.home-section-heading .section-title span {
    color: var(--blue);
}

.home-section-heading > p,
.home-section-heading-split > p {
    max-width: 470px;
    margin: 30px 0 0;
    color: #35405d;
    font-size: 1.05rem;
    font-weight: 720;
    line-height: 1.65;
}

.home-module-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin-top: 0;
}

.home-module-grid .module-card {
    display: flex;
    min-height: 246px;
    flex-direction: column;
    padding: 28px 22px 24px;
    border-color: #dfe5f4;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-module-grid .module-card:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 79, 255, 0.38);
    box-shadow: 0 26px 70px rgba(57, 42, 154, 0.15);
}

.home-module-grid .module-icon {
    width: 52px;
    height: 52px;
    box-shadow: 0 14px 28px rgba(102, 79, 255, 0.16);
}

.home-module-grid .module-card h3 {
    margin-top: 38px;
    font-size: 1.02rem;
}

.home-module-grid .module-card p {
    margin-top: 12px;
    color: #33405c;
    font-size: 0.92rem;
    line-height: 1.65;
}

.home-module-grid .module-card > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    right: 20px;
    bottom: 20px;
    border: 1px solid #dce4f3;
    border-radius: 999px;
    background: #fff;
    color: #1a2440;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

.home-module-grid .module-card:hover > i {
    transform: translateX(2px);
    border-color: rgba(102, 79, 255, 0.45);
    color: var(--blue);
}

.home-control-section {
    background: #fff;
}

.home-control-panel {
    overflow: hidden;
    border: 1px solid rgba(102, 79, 255, 0.12);
    border-radius: 8px;
    padding: clamp(34px, 5vw, 62px);
    background:
        radial-gradient(circle at 12% 18%, rgba(102, 79, 255, 0.13), transparent 30%),
        linear-gradient(135deg, #f8f5ff 0%, #fff 52%, #f5f8ff 100%);
    box-shadow: 0 28px 80px rgba(92, 73, 190, 0.11);
}

.home-control-panel .home-section-heading {
    margin-bottom: 42px;
}

.home-outcome-timeline {
    position: relative;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px;
    margin-top: 0;
}

.home-outcome-timeline::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 7%;
    right: 7%;
    border-top: 2px dashed rgba(102, 79, 255, 0.25);
}

.home-outcome-step {
    position: relative;
    z-index: 1;
    display: block;
    text-align: left;
}

.home-outcome-step .home-outcome-icon {
    position: relative;
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border: 1px solid #e1e5f1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--blue);
    box-shadow: 0 18px 42px rgba(31, 39, 72, 0.12);
}

.home-outcome-step:nth-child(4) .home-outcome-icon {
    color: #13a866;
}

.home-outcome-step .home-outcome-icon svg {
    width: 42px;
    height: 42px;
    stroke-width: 2;
}

.home-outcome-step .home-outcome-icon b {
    position: absolute;
    right: -8px;
    bottom: 7px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(102, 79, 255, 0.28);
}

.home-outcome-step h3 {
    margin: 22px 0 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
}

.home-outcome-step p {
    margin: 10px 0 0;
    color: #35405d;
    font-size: 0.92rem;
    font-weight: 680;
    line-height: 1.55;
}

.home-industries-section {
    background: #fff;
}

.home-industry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: initial;
    gap: 18px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

.home-industry-card {
    display: flex;
    min-height: 286px;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px;
    background-image:
        linear-gradient(180deg, rgba(5, 11, 23, 0.34) 0%, rgba(4, 10, 24, 0.76) 48%, rgba(3, 8, 19, 0.98) 100%),
        var(--industry-image),
        linear-gradient(135deg, #071326 0%, #050816 100%);
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 52px rgba(3, 8, 24, 0.2);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-industry-card::before {
    display: none;
}

.home-industry-card:hover {
    transform: translateY(-5px);
    border-color: rgba(134, 106, 255, 0.7);
    box-shadow: 0 28px 72px rgba(17, 24, 58, 0.28);
}

.home-industry-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, #6f50ff 0%, #4b35f6 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(75, 53, 246, 0.36);
}

.home-industry-icon svg {
    width: 28px;
    height: 28px;
}

.home-industry-card h3,
.home-industry-card p,
.home-industry-card strong {
    position: relative;
    z-index: 1;
}

.home-industry-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.14rem;
}

.home-industry-card p {
    max-width: 210px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.92rem;
    line-height: 1.55;
}

.home-industry-card strong {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 24px;
    color: #a78bff;
    font-size: 0.9rem;
    font-weight: 900;
}

.home-industry-card strong svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 1180px) {
    .home-module-grid,
    .home-outcome-timeline,
    .home-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-outcome-timeline::before {
        display: none;
    }

    .home-outcome-step {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
    }

    .home-outcome-step h3 {
        margin-top: 10px;
    }

    .home-outcome-step p {
        grid-column: 2;
    }
}

@media (max-width: 760px) {
    .home-section-heading-split {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-section-heading > p,
    .home-section-heading-split > p {
        margin-top: 0;
        font-size: 0.98rem;
    }

    .home-module-grid,
    .home-outcome-timeline,
    .home-industry-grid {
        grid-template-columns: 1fr;
    }

    .home-module-grid .module-card {
        min-height: 218px;
    }

    .home-outcome-step {
        grid-template-columns: 78px minmax(0, 1fr);
        column-gap: 16px;
    }

    .home-outcome-step .home-outcome-icon {
        width: 78px;
        height: 78px;
    }

    .home-outcome-step .home-outcome-icon svg {
        width: 32px;
        height: 32px;
    }

    .home-outcome-step p {
        grid-column: 2;
    }

    .home-industry-card {
        min-height: 246px;
    }
}

@media (max-width: 760px) {
    .home-suites-section,
    .home-control-section,
    .home-industries-section {
        padding: 50px 0;
    }

    .home-section-heading {
        margin-bottom: 26px;
    }

    .home-section-heading .section-kicker {
        max-width: 310px;
        margin-bottom: 12px;
        line-height: 1.45;
    }

    .home-section-heading .section-title {
        max-width: 350px;
        font-size: clamp(2.15rem, 10vw, 2.72rem);
        line-height: 1.04;
    }

    .home-section-heading > p,
    .home-section-heading-split > p {
        max-width: 340px;
        color: #26334f;
        font-size: 0.98rem;
        font-weight: 760;
        line-height: 1.72;
    }

    .home-module-grid {
        gap: 12px;
    }

    .home-module-grid .module-card {
        display: grid;
        min-height: 0;
        grid-template-columns: 56px minmax(0, 1fr) 36px;
        grid-template-rows: auto auto;
        gap: 4px 14px;
        align-items: center;
        padding: 18px;
        border-color: #d8e1f2;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
    }

    .home-module-grid .module-icon {
        grid-row: 1 / span 2;
        width: 52px;
        height: 52px;
        border-radius: 8px;
    }

    .home-module-grid .module-card h3 {
        grid-column: 2;
        margin: 0;
        font-size: 1rem;
        line-height: 1.22;
    }

    .home-module-grid .module-card p {
        grid-column: 2;
        margin: 0;
        padding-right: 2px;
        font-size: 0.89rem;
        line-height: 1.45;
    }

    .home-module-grid .module-card > i {
        position: static;
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 34px;
        height: 34px;
        align-self: center;
        justify-self: end;
    }

    .home-control-panel {
        padding: 28px 20px;
        background:
            radial-gradient(circle at 8% 8%, rgba(102, 79, 255, 0.13), transparent 31%),
            linear-gradient(150deg, #f6f1ff 0%, #fff 58%, #f5f8ff 100%);
    }

    .home-control-panel .home-section-heading {
        margin-bottom: 24px;
    }

    .home-outcome-timeline {
        gap: 12px;
    }

    .home-outcome-step {
        display: grid;
        min-height: 0;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 4px 16px;
        align-items: center;
        padding: 16px;
        border: 1px solid rgba(102, 79, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 14px 34px rgba(56, 47, 128, 0.08);
    }

    .home-outcome-step .home-outcome-icon {
        grid-row: 1 / span 2;
        width: 64px;
        height: 64px;
        box-shadow: 0 12px 28px rgba(31, 39, 72, 0.12);
    }

    .home-outcome-step .home-outcome-icon svg {
        width: 28px;
        height: 28px;
    }

    .home-outcome-step .home-outcome-icon b {
        right: -6px;
        bottom: 2px;
        width: 24px;
        height: 24px;
        font-size: 0.64rem;
    }

    .home-outcome-step h3 {
        grid-column: 2;
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.22;
    }

    .home-outcome-step p {
        grid-column: 2;
        margin: 0;
        color: #33405d;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .home-industry-grid {
        gap: 14px;
    }

    .home-industry-card {
        min-height: 224px;
        padding: 20px;
        background-image:
            linear-gradient(180deg, rgba(5, 11, 23, 0.14) 0%, rgba(4, 10, 24, 0.72) 44%, rgba(3, 8, 19, 0.98) 100%),
            var(--industry-image),
            linear-gradient(135deg, #071326 0%, #050816 100%);
        box-shadow: 0 18px 46px rgba(3, 8, 24, 0.18);
    }

    .home-industry-icon {
        top: 18px;
        left: 18px;
        width: 50px;
        height: 50px;
    }

    .home-industry-icon svg {
        width: 25px;
        height: 25px;
    }

    .home-industry-card h3 {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .home-industry-card p {
        max-width: 270px;
        font-size: 0.9rem;
        line-height: 1.52;
    }

    .home-industry-card strong {
        margin-top: 18px;
    }
}

@media (max-width: 420px) {
    .home-module-grid .module-card {
        grid-template-columns: 50px minmax(0, 1fr) 34px;
        gap: 4px 12px;
        padding: 16px;
    }

    .home-module-grid .module-icon {
        width: 48px;
        height: 48px;
    }

    .home-module-grid .module-card p,
    .home-outcome-step p,
    .home-industry-card p {
        font-size: 0.86rem;
    }

    .home-control-panel {
        padding: 24px 16px;
    }

    .home-outcome-step {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 3px 14px;
        padding: 14px;
    }

    .home-outcome-step .home-outcome-icon {
        width: 58px;
        height: 58px;
    }

    .home-industry-card {
        min-height: 214px;
    }
}

/* Industries premium page */
.industries-premium-page {
    --industries-bg: #02030a;
    --industries-bg-2: #050814;
    --industries-panel: rgba(8, 13, 30, 0.78);
    --industries-panel-strong: rgba(11, 17, 38, 0.92);
    --industries-line: rgba(149, 128, 255, 0.26);
    --industries-line-soft: rgba(255, 255, 255, 0.12);
    --industries-text: #f7f8ff;
    --industries-muted: rgba(226, 232, 255, 0.72);
    --industries-dim: rgba(226, 232, 255, 0.56);
    --industries-violet: #8b5cff;
    --industries-violet-2: #6a38ff;
    --industries-blue: #5f91ff;
    --industries-orange: #ff7a1a;
    --industries-radius: 8px;
    background: var(--industries-bg);
    color: var(--industries-text);
    overflow-x: hidden;
}

.industries-premium-page *,
.industries-premium-page *::before,
.industries-premium-page *::after {
    box-sizing: border-box;
}

.industries-premium-page .shell {
    width: min(calc(100% - 112px), 1420px);
}

.industries-page-main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 74% 8%, rgba(71, 64, 255, 0.38), transparent 28rem),
        radial-gradient(circle at 18% 46%, rgba(88, 50, 255, 0.18), transparent 26rem),
        linear-gradient(180deg, #02030a 0%, #030613 48%, #02030a 100%);
}

.industries-page-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 92px 92px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}

.industries-hero {
    position: relative;
    overflow: hidden;
    padding: 118px 0 30px;
}

.industries-hero-lighting {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 72% 24%, rgba(104, 82, 255, 0.34), transparent 18rem),
        radial-gradient(ellipse at 79% 48%, rgba(42, 91, 255, 0.22), transparent 24rem),
        linear-gradient(90deg, transparent 0%, rgba(98, 57, 255, 0.16) 55%, transparent 100%);
}

.industries-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 96px;
    left: 0;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(122, 83, 255, 0.7), rgba(92, 137, 255, 0.36), transparent);
    box-shadow: 0 0 48px rgba(111, 73, 255, 0.54);
}

.industries-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.82fr);
    gap: 62px;
    align-items: center;
}

.industries-hero-grid > *,
.industries-insights-layout > *,
.industries-layer-panel > *,
.industries-exploring-layout > *,
.industries-bottom-cta-panel > * {
    min-width: 0;
}

.industries-hero-copy {
    max-width: 720px;
}

.industries-eyebrow,
.industries-section-header p,
.industries-layer-copy p {
    margin: 0;
    color: #a67dff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.industries-hero-copy h1,
.industries-section-header h2,
.industries-layer-copy h2,
.industries-bottom-cta-panel h2 {
    margin: 0;
    color: var(--industries-text);
    font-weight: 950;
    letter-spacing: 0;
}

.industries-hero-copy h1 {
    margin-top: 20px;
    font-size: var(--marketing-hero-h1-size);
    line-height: var(--marketing-hero-h1-line-height);
    overflow-wrap: break-word;
}

.industries-hero-copy h1 span {
    display: inline-block;
    color: transparent;
    background: linear-gradient(95deg, #9359ff 10%, #6b39ff 48%, #84b8ff 96%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 42px rgba(111, 73, 255, 0.35);
}

.industries-hero-copy p:not(.industries-eyebrow) {
    max-width: 620px;
    margin: 20px 0 0;
    color: var(--industries-muted);
    font-size: 1.06rem;
    font-weight: 620;
    line-height: 1.62;
    overflow-wrap: break-word;
}

.industries-actions,
.industries-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.industries-actions {
    margin-top: 30px;
}

.industries-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: var(--industries-radius);
    padding: 0 28px;
    color: var(--industries-text);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.industries-button,
.industries-button:visited {
    color: #fff !important;
}

.industries-button-primary {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, #874dff 0%, #5b32ff 100%);
    box-shadow: 0 20px 42px -20px rgba(111, 73, 255, 0.96), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.industries-button-secondary {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.industries-button:hover {
    color: #fff;
    transform: translateY(-2px);
}

.industries-button:focus-visible,
.industries-operation-card:focus-visible,
.industries-related-card:focus-visible,
.industries-footer a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}

.industry-metrics-stage {
    position: relative;
    display: grid;
    min-height: 430px;
    place-items: center;
}

.industry-metrics-stage::before {
    content: "";
    position: absolute;
    right: 4%;
    bottom: 26px;
    width: 82%;
    height: 92px;
    border: 1px solid rgba(137, 103, 255, 0.72);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(85, 55, 255, 0.34), transparent 62%),
        linear-gradient(90deg, transparent, rgba(96, 146, 255, 0.2), transparent);
    box-shadow:
        0 0 38px rgba(104, 72, 255, 0.52),
        inset 0 0 28px rgba(87, 71, 255, 0.32);
    transform: perspective(520px) rotateX(67deg);
}

.industry-metrics-stage::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 3%;
    width: 62%;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 63, 255, 0.24), transparent 66%);
    filter: blur(2px);
}

.industry-metrics-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    border: 1px solid rgba(151, 136, 255, 0.55);
    border-radius: var(--industries-radius);
    padding: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), transparent 24%),
        linear-gradient(180deg, rgba(17, 24, 55, 0.84), rgba(5, 8, 22, 0.94));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 52px rgba(104, 72, 255, 0.48),
        0 44px 90px -48px rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(22px);
}

.industry-metrics-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 16%, transparent 84%, rgba(139, 112, 255, 0.26));
    pointer-events: none;
    mask-image: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    padding: 1px;
}

.industry-metrics-card > p {
    margin: 0 0 18px;
    color: rgba(197, 203, 255, 0.74);
    font-size: 0.76rem;
    font-weight: 920;
    letter-spacing: 0;
}

.industry-metrics-list {
    display: grid;
    gap: 14px;
}

.industry-metric-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 68px;
    gap: 16px;
    align-items: center;
    min-height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--industries-radius);
    padding: 12px 16px 12px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.industry-metric-icon,
.industries-card-icon,
.industries-related-icon,
.industries-feature-row > span,
.industries-benefit-chips span {
    display: inline-grid;
    place-items: center;
    color: #9a72ff;
}

.industry-metric-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(160, 132, 255, 0.28);
    border-radius: var(--industries-radius);
    background: linear-gradient(135deg, rgba(130, 91, 255, 0.28), rgba(63, 88, 255, 0.12));
    box-shadow: 0 12px 28px rgba(74, 54, 255, 0.22);
}

.industry-metric-icon svg {
    width: 26px;
    height: 26px;
}

.industry-metric-row strong {
    min-width: 0;
    color: var(--industries-text);
    font-size: 0.98rem;
    font-weight: 820;
}

.industry-metric-row b {
    color: var(--industries-text);
    font-size: 1.52rem;
    font-weight: 930;
    white-space: nowrap;
}

.industry-sparkline {
    width: 68px;
    height: 34px;
    color: #9a72ff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.025);
}

.industries-benefit-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 36px auto 0;
    padding: 0;
    list-style: none;
}

.industries-benefit-chips li {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0 22px;
    background: rgba(8, 13, 30, 0.72);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 820;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.industries-benefit-chips span {
    width: 22px;
    height: 22px;
}

.industries-benefit-chips svg {
    width: 20px;
    height: 20px;
}

.industries-banner-section {
    padding: 24px 0 40px;
}

.industries-warehouse-banner {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--industries-radius);
    background: #050814;
    box-shadow: 0 32px 76px -56px rgba(0, 0, 0, 0.95);
}

.industries-warehouse-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 3, 10, 0.96) 0%, rgba(2, 3, 10, 0.64) 34%, rgba(2, 3, 10, 0.16) 68%, rgba(2, 3, 10, 0.74) 100%),
        linear-gradient(180deg, rgba(2, 3, 10, 0.26), rgba(2, 3, 10, 0.78));
    pointer-events: none;
}

.industries-warehouse-banner img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    filter: saturate(0.86) contrast(1.08);
}

.industries-warehouse-banner figcaption {
    position: absolute;
    z-index: 1;
    top: 72px;
    left: 52px;
    max-width: 360px;
}

.industries-warehouse-banner figcaption p {
    margin: 0 0 18px;
    color: var(--industries-orange);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0;
}

.industries-warehouse-banner h2 {
    margin: 0;
    color: #fff;
    font-size: 2.18rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.18;
}

.industries-warehouse-banner h2 span {
    display: block;
}

.industries-warehouse-banner figcaption i {
    display: block;
    width: 62px;
    height: 4px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8b5cff, #6ea0ff);
    box-shadow: 0 0 22px rgba(139, 92, 255, 0.68);
}

.industries-insights-section,
.industries-operations-section,
.industries-layer-section,
.industries-exploring-section {
    padding: 32px 0;
}

.industries-insights-layout {
    display: grid;
    grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.6fr);
    gap: 40px;
    align-items: start;
}

.industries-section-header h2 {
    max-width: 620px;
    margin-top: 16px;
    font-size: 2.82rem;
    line-height: 1.12;
}

.industries-section-header-wide h2 {
    max-width: 720px;
}

.industries-insight-grid,
.industries-operation-grid,
.industries-related-grid {
    display: grid;
    gap: 18px;
}

.industries-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.industries-insight-card,
.industries-operation-card,
.industries-related-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(153, 134, 255, 0.22);
    border-radius: var(--industries-radius);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.industries-insight-card,
.industries-operation-card {
    background:
        linear-gradient(145deg, rgba(88, 64, 190, 0.13), transparent 42%),
        rgba(7, 12, 28, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.industries-insight-card:hover,
.industries-operation-card:hover {
    transform: translateY(-4px);
    border-color: rgba(154, 114, 255, 0.58);
    box-shadow: 0 22px 62px -36px rgba(103, 76, 255, 0.76), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.industries-insight-card {
    min-height: 276px;
    padding: 26px;
}

.industries-insight-card > div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.industries-card-icon {
    width: 36px;
    height: 36px;
}

.industries-card-icon svg {
    width: 31px;
    height: 31px;
}

.industries-insight-card b {
    color: #a67dff;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 920;
}

.industries-insight-card h3,
.industries-operation-card h3,
.industries-related-card h3 {
    margin: 0;
    color: var(--industries-text);
    font-weight: 930;
    letter-spacing: 0;
}

.industries-insight-card h3 {
    margin-top: 28px;
    font-size: 1.18rem;
    line-height: 1.24;
}

.industries-insight-card p,
.industries-operation-card p,
.industries-related-card p {
    margin: 12px 0 0;
    line-height: 1.58;
}

.industries-insight-card p,
.industries-operation-card p {
    color: var(--industries-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.industries-operation-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 24px;
}

.industries-operation-card {
    display: grid;
    min-height: 218px;
    align-content: start;
    padding: 24px;
    color: var(--industries-text);
}

.industries-operation-card h3 {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.24;
}

.industries-operation-card strong,
.industries-related-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #a67dff;
    font-size: 0.86rem;
    font-weight: 920;
}

.industries-layer-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(310px, 0.88fr) minmax(420px, 1fr);
    gap: 42px;
    align-items: center;
    border: 1px solid rgba(137, 96, 255, 0.74);
    border-radius: var(--industries-radius);
    padding: 34px 28px 34px 48px;
    background:
        linear-gradient(105deg, rgba(2, 4, 13, 0.98) 0%, rgba(4, 8, 20, 0.86) 37%, rgba(11, 17, 38, 0.82) 100%),
        #030713;
    box-shadow:
        0 0 46px rgba(107, 71, 255, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.industries-layer-panel::before {
    content: "";
    position: absolute;
    inset: -20% 32% -30% 18%;
    background:
        linear-gradient(110deg, transparent 0 35%, rgba(107, 71, 255, 0.72) 36%, transparent 37% 42%, rgba(63, 115, 255, 0.54) 43%, transparent 44%),
        linear-gradient(116deg, transparent 0 42%, rgba(133, 84, 255, 0.42) 43%, transparent 44%),
        linear-gradient(122deg, transparent 0 50%, rgba(67, 103, 255, 0.42) 51%, transparent 52%);
    filter: blur(1px);
    opacity: 0.82;
    transform: perspective(500px) rotateY(-18deg);
}

.industries-layer-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 47% 58%, rgba(100, 63, 255, 0.34), transparent 32rem);
    pointer-events: none;
}

.industries-layer-copy,
.industries-feature-stack {
    position: relative;
    z-index: 1;
}

.industries-layer-copy h2 {
    max-width: 440px;
    margin-top: 16px;
    font-size: 2.2rem;
    line-height: 1.18;
}

.industries-layer-copy > span {
    display: block;
    max-width: 530px;
    margin-top: 18px;
    color: var(--industries-muted);
    font-size: 0.98rem;
    font-weight: 620;
    line-height: 1.62;
}

.industries-feature-stack {
    display: grid;
    gap: 10px;
}

.industries-feature-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 14px;
    align-items: center;
    min-height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--industries-radius);
    padding: 10px 14px;
    background: rgba(11, 18, 40, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.industries-feature-row svg {
    width: 24px;
    height: 24px;
}

.industries-feature-row strong {
    min-width: 0;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 830;
    line-height: 1.3;
}

.industries-feature-row i {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.35rem;
    font-style: normal;
}

.industries-exploring-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
    gap: 44px;
    align-items: start;
}

.industries-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.industries-related-card {
    min-height: 178px;
    padding: 22px 22px 20px;
    background:
        linear-gradient(145deg, rgba(111, 73, 255, 0.08), transparent 42%),
        #f8faff;
    color: #11182c;
    box-shadow: 0 20px 50px -36px rgba(23, 29, 56, 0.62);
}

.industries-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(137, 96, 255, 0.54);
    box-shadow: 0 22px 58px -34px rgba(91, 69, 180, 0.56);
}

.industries-related-card h3 {
    margin-top: 10px;
    color: #11182c;
    font-size: 1rem;
}

.industries-related-card p {
    color: #38415b;
    font-size: 0.86rem;
    font-weight: 680;
}

.industries-related-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--industries-radius);
    background: rgba(112, 80, 255, 0.1);
}

.industries-related-icon svg {
    width: 28px;
    height: 28px;
}

.industries-bottom-cta {
    padding: 28px 0 0;
}

.industries-bottom-cta-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;
    min-height: 126px;
    border: 1px solid rgba(137, 96, 255, 0.62);
    border-radius: var(--industries-radius);
    padding: 18px 42px 18px 34px;
    background:
        radial-gradient(ellipse at 12% 50%, rgba(115, 55, 255, 0.44), transparent 15rem),
        linear-gradient(135deg, #071028 0%, #040713 54%, #04040b 100%);
    box-shadow:
        0 0 38px rgba(102, 73, 255, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.industries-bottom-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-position: 0 0, 0 0, 0 0;
    background-size: 96px 96px, 84px 84px, 84px 84px;
    pointer-events: none;
}

.industries-network-icon,
.industries-bottom-cta-panel > div:not(.industries-network-icon),
.industries-cta-actions {
    position: relative;
    z-index: 1;
}

.industries-network-icon {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border: 1px solid rgba(165, 132, 255, 0.4);
    border-radius: 999px;
    color: #a67dff;
    background: rgba(8, 12, 30, 0.58);
    box-shadow: 0 0 40px rgba(137, 92, 255, 0.38), inset 0 0 28px rgba(137, 92, 255, 0.16);
}

.industries-network-icon svg {
    width: 44px;
    height: 44px;
}

.industries-bottom-cta-panel h2 {
    font-size: 2rem;
    line-height: 1.15;
}

.industries-bottom-cta-panel p {
    margin: 8px 0 0;
    color: var(--industries-muted);
    font-size: 0.98rem;
    font-weight: 630;
}

.industries-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: #02030a;
    color: var(--industries-dim);
    padding: 28px 0 34px;
}

.industries-footer-grid {
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) repeat(4, minmax(120px, 1fr));
    gap: 28px;
    align-items: start;
}

.industries-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 930;
    text-decoration: none;
}

.industries-footer nav {
    display: grid;
    gap: 9px;
}

.industries-footer nav p {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 920;
    letter-spacing: 0;
}

.industries-footer a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}

.industries-footer a:hover {
    color: #fff;
}

@media (max-width: 1180px) {
    .industries-premium-page .shell {
        width: min(calc(100% - 48px), 1420px);
    }

    .industries-hero-copy {
        max-width: 760px;
    }

    .industries-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .industry-metrics-stage {
        min-height: 390px;
    }

}

@media (max-width: 980px) {
    .industries-hero-grid,
    .industries-insights-layout,
    .industries-layer-panel,
    .industries-exploring-layout {
        grid-template-columns: 1fr;
    }

    .industries-operation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industries-bottom-cta-panel {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .industries-cta-actions {
        grid-column: 2;
    }
}

@media (max-width: 860px) {
    .industries-hero {
        padding-top: 96px;
    }

    .industries-hero-grid {
        gap: 34px;
    }

    .industries-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .industry-metrics-card {
        padding: 22px;
    }

    .industries-benefit-chips {
        justify-content: flex-start;
    }

    .industries-warehouse-banner figcaption {
        top: 42px;
        left: 28px;
        right: 28px;
    }

    .industries-insight-grid,
    .industries-related-grid {
        grid-template-columns: 1fr;
    }

    .industries-section-header h2 {
        font-size: 2.25rem;
    }

    .industries-insight-card {
        min-height: 0;
    }

    .industries-layer-panel {
        padding: 28px 22px;
    }

    .industries-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industries-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .industries-premium-page .shell {
        width: min(calc(100% - 24px), 1420px);
    }

    .industries-hero {
        padding-top: 88px;
    }

    .industries-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .industries-hero-copy p:not(.industries-eyebrow) {
        font-size: 0.98rem;
    }

    .industries-actions,
    .industries-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .industries-button {
        width: 100%;
        min-height: 50px;
    }

    .industry-metrics-stage {
        min-height: 0;
        padding-bottom: 56px;
    }

    .industry-metrics-card {
        width: 100%;
        max-width: 100%;
    }

    .industry-metrics-stage::before {
        bottom: 8px;
        width: 94%;
    }

    .industry-metrics-stage::after {
        display: none;
    }

    .industry-metric-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .industry-sparkline {
        display: none;
    }

    .industry-metric-row b {
        font-size: 1.22rem;
    }

    .industries-benefit-chips {
        gap: 10px;
    }

    .industries-benefit-chips li {
        width: 100%;
        min-height: 44px;
        padding: 0 16px;
    }

    .industries-warehouse-banner img {
        height: 330px;
    }

    .industries-warehouse-banner h2 {
        font-size: 1.72rem;
    }

    .industries-section-header h2,
    .industries-layer-copy h2 {
        font-size: 1.88rem;
    }

    .industries-operation-grid {
        grid-template-columns: 1fr;
    }

    .industries-operation-card {
        min-height: 0;
    }

    .industries-feature-row {
        grid-template-columns: 34px minmax(0, 1fr) 16px;
        gap: 10px;
    }

    .industries-bottom-cta-panel {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 18px;
    }

    .industries-network-icon {
        width: 72px;
        height: 72px;
    }

    .industries-network-icon svg {
        width: 34px;
        height: 34px;
    }

    .industries-cta-actions {
        grid-column: auto;
    }

    .industries-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Retail premium landing page */
body.retail-premium-page {
    --retail-bg: #f4f7fb;
    --retail-soft: #eef3f9;
    --retail-surface: #ffffff;
    --retail-ink: #061126;
    --retail-muted: #64748b;
    --retail-line: #dfe7f1;
    --retail-dark: #020817;
    --retail-dark-2: #081426;
    --retail-purple: #7657ff;
    --retail-purple-2: #9a7cff;
    --retail-orange: #ff7a1a;
    --retail-green: #2bd89f;
    --retail-shadow: 0 24px 70px -48px rgba(11, 23, 45, 0.52);
    background: var(--retail-bg);
    color: var(--retail-ink);
}

body.retail-premium-page,
.retail-premium-page * {
    box-sizing: border-box;
}

.retail-premium-page .shell {
    width: min(calc(100% - 48px), 1360px);
}

.retail-main {
    overflow: hidden;
    background: var(--retail-bg);
}

.retail-hero {
    position: relative;
    overflow: hidden;
    padding: 132px 0 116px;
    color: #ffffff;
    background:
        radial-gradient(circle at 74% 28%, rgba(118, 87, 255, 0.28), transparent 34%),
        linear-gradient(118deg, rgba(118, 87, 255, 0.18) 0%, rgba(118, 87, 255, 0) 38%),
        linear-gradient(153deg, #151429 0%, #051023 46%, #020711 100%);
}

.retail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 74px 74px;
    pointer-events: none;
}

.retail-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(560px, 1.08fr);
    gap: 84px;
    align-items: center;
}

.retail-hero-copy,
.retail-section-copy,
.retail-section-heading {
    min-width: 0;
}

.retail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--retail-purple-2);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.retail-dark .retail-eyebrow,
.retail-hero .retail-eyebrow,
.retail-final-cta .retail-eyebrow {
    color: #b59fff;
}

.retail-eyebrow span {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 122, 26, 0.38);
    border-radius: 999px;
    background: var(--retail-orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.12);
}

.retail-hero h1,
.retail-section h2,
.retail-final-panel h2 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.02;
}

.retail-hero h1 {
    max-width: 710px;
    color: #ffffff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
}

.retail-hero-subtitle {
    max-width: 640px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.12rem;
    line-height: 1.68;
}

.retail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.retail-button-secondary {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.retail-button-dark {
    margin-top: 26px;
    background: var(--retail-ink);
    color: #ffffff !important;
    box-shadow: 0 16px 34px -26px rgba(6, 17, 38, 0.9);
    min-width: 158px;
}

.retail-button-light {
    border-color: transparent;
    background: #ffffff;
    color: var(--retail-ink) !important;
}

.retail-proof-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 570px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.retail-proof-list li,
.retail-check-grid li,
.retail-report-list li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.32;
    padding: 12px 14px;
}

.retail-proof-list li:nth-child(4) {
    grid-column: auto;
}

.retail-proof-list span,
.retail-check-grid span,
.retail-report-list span {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background:
        linear-gradient(#ffffff, #ffffff) center / 5px 5px no-repeat,
        rgba(43, 216, 159, 0.14);
    box-shadow: inset 0 0 0 1px rgba(43, 216, 159, 0.4);
}

.retail-hero-visual {
    position: relative;
    min-width: 0;
    padding: 0;
}

.retail-dashboard-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
        #0b172b;
    box-shadow: 0 38px 110px -58px rgba(0, 0, 0, 0.96);
}

.retail-dashboard-shell::before {
    content: "";
    position: absolute;
    inset: -35% -20% auto auto;
    width: 330px;
    height: 330px;
    border-radius: 999px;
    background: rgba(118, 87, 255, 0.16);
    filter: blur(12px);
    pointer-events: none;
}

.retail-dashboard-head,
.retail-dashboard-grid {
    position: relative;
    z-index: 1;
}

.retail-dashboard-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
}

.retail-dashboard-head span,
.retail-dashboard-card span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 920;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.retail-dashboard-head strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-size: 1.22rem;
    line-height: 1.2;
}

.retail-dashboard-head p {
    margin: 0;
    border-radius: 999px;
    padding: 9px 12px;
    background: rgba(43, 216, 159, 0.12);
    color: var(--retail-green);
    font-size: 0.86rem;
    font-weight: 900;
}

.retail-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 14px;
}

.retail-dashboard-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.065);
}

.retail-dashboard-card.is-hero {
    grid-row: span 2;
    min-height: 220px;
    padding: 24px;
    background:
        linear-gradient(145deg, rgba(118, 87, 255, 0.22), rgba(255, 255, 255, 0.055)),
        rgba(255, 255, 255, 0.07);
}

.retail-dashboard-card.is-wide {
    grid-column: 1 / -1;
}

.retail-dashboard-card strong {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1.08;
}

.retail-dashboard-card.is-hero strong {
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
}

.retail-dashboard-card p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    font-weight: 760;
    line-height: 1.45;
}

.retail-dashboard-card i {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 32px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.retail-dashboard-card i::before {
    content: "";
    display: block;
    width: var(--level);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--retail-orange), var(--retail-purple-2));
}

.retail-dashboard-card.is-reader strong {
    color: var(--retail-green);
}

.retail-branch-stock {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.retail-branch-stock p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.07);
}

.retail-branch-stock b,
.retail-branch-stock strong {
    margin: 0;
    font-size: 0.88rem;
}

.retail-ui-window {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        #101b31;
    box-shadow: 0 38px 90px -58px rgba(0, 0, 0, 0.95);
}

.retail-ui-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.retail-ui-topbar span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ff7a1a;
}

.retail-ui-topbar span:nth-child(2) {
    background: #7c5cff;
}

.retail-ui-topbar span:nth-child(3) {
    background: #2bd89f;
}

.retail-ui-topbar strong {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.retail-ui-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(210px, 0.82fr);
    gap: 14px;
}

.retail-orders-card,
.retail-tile-grid > div,
.retail-basket-card,
.retail-stock-card,
.retail-reader-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.retail-orders-card {
    padding: 16px;
}

.retail-orders-card span,
.retail-basket-card > span,
.retail-stock-card > span,
.retail-reader-card span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.retail-orders-card strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 1.9rem;
    line-height: 1;
}

.retail-orders-card i,
.retail-floating-note i {
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.retail-orders-card i::before,
.retail-floating-note i::before {
    content: "";
    display: block;
    width: var(--level);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--retail-orange), var(--retail-purple));
}

.retail-orders-card small,
.retail-floating-note small {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.retail-tile-grid {
    display: grid;
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.retail-tile-grid > div {
    min-height: 88px;
    padding: 14px;
}

.retail-tile-grid span,
.retail-tile-grid b,
.retail-tile-grid em {
    display: block;
}

.retail-tile-grid span {
    color: #ffffff;
    font-weight: 900;
}

.retail-tile-grid b {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.retail-tile-grid em {
    margin-top: 9px;
    color: var(--retail-green);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 900;
}

.retail-basket-card {
    display: grid;
    gap: 8px;
    grid-column: 2;
    grid-row: span 2;
    padding: 18px;
    background: rgba(4, 10, 24, 0.62);
}

.retail-basket-card div,
.retail-stock-card div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
}

.retail-basket-card div strong,
.retail-stock-card div strong {
    font-weight: 780;
}

.retail-basket-card p {
    margin: 6px 0 0;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
    color: var(--retail-ink);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-basket-card p strong {
    display: block;
    margin-top: 3px;
    font-size: 1.78rem;
    line-height: 1;
}

.retail-basket-card button,
.retail-sale-card button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--retail-purple), #5f3ff0);
    color: #ffffff;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 950;
}

.retail-stock-card,
.retail-reader-card {
    padding: 14px;
}

.retail-stock-card {
    display: grid;
    gap: 9px;
}

.retail-stock-card b {
    color: var(--retail-green);
}

.retail-reader-card strong {
    display: inline-flex;
    margin-top: 12px;
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(43, 216, 159, 0.12);
    color: var(--retail-green);
    font-size: 0.78rem;
}

.retail-reader-card p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.82rem;
    line-height: 1.4;
}

.retail-floating-note {
    position: absolute;
    z-index: 2;
    width: 200px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 14px;
    background: #ffffff;
    color: var(--retail-ink);
    box-shadow: 0 22px 58px -36px rgba(0, 0, 0, 0.9);
}

.retail-floating-note span {
    display: block;
    color: #77859b;
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-floating-note strong {
    display: block;
    margin-top: 5px;
    font-size: 1.45rem;
    line-height: 1;
}

.retail-floating-note small {
    color: #526176;
    font-size: 0.75rem;
}

.retail-floating-note-sales {
    left: 36%;
    bottom: 0;
}

.retail-floating-note-alert {
    right: -22px;
    bottom: 72px;
    background: #101a2e;
    color: #ffffff;
}

.retail-hero-stats {
    position: relative;
    z-index: 3;
    margin-top: -88px;
    padding-bottom: 50px;
}

.retail-stat-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(11, 23, 45, 0.08);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--retail-shadow);
}

.retail-stat-strip div {
    min-width: 0;
    padding: 22px 24px;
    border-right: 1px solid #e7edf5;
}

.retail-stat-strip div:last-child {
    border-right: 0;
}

.retail-stat-strip span {
    display: block;
    color: #8390a3;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-stat-strip strong {
    display: block;
    margin-top: 8px;
    color: var(--retail-ink);
    font-size: 1.55rem;
    line-height: 1;
}

.retail-stat-strip p {
    margin: 6px 0 0;
    color: var(--retail-purple);
    font-size: 0.8rem;
    font-weight: 900;
}

.retail-section {
    padding: 116px 0;
}

.retail-white {
    background: #ffffff;
}

.retail-soft {
    background: var(--retail-bg);
}

.retail-dark {
    color: #ffffff;
    background:
        linear-gradient(115deg, rgba(118, 87, 255, 0.18), rgba(118, 87, 255, 0) 38%),
        linear-gradient(145deg, #071326, #020711);
}

.retail-section h2 {
    color: var(--retail-ink);
    font-size: clamp(2.75rem, 4.2vw, 4.1rem);
    font-weight: 950;
}

.retail-dark h2,
.retail-final-panel h2 {
    color: #ffffff;
}

.retail-section-copy > p:not(.retail-eyebrow),
.retail-section-heading > p,
.retail-dark-heading > p {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--retail-muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.retail-dark .retail-section-copy > p:not(.retail-eyebrow),
.retail-dark-heading > p {
    color: rgba(255, 255, 255, 0.72);
}

.retail-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: 64px;
    align-items: start;
}

.retail-problem-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.retail-problem-points article,
.retail-example-card,
.retail-flow-card,
.retail-large-card,
.retail-report-panel,
.retail-comparison-card,
.retail-catalogue-panel {
    border: 1px solid var(--retail-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--retail-shadow);
}

.retail-problem-points article {
    min-height: 180px;
    padding: 26px;
}

.retail-problem-points article span {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: rgba(118, 87, 255, 0.1);
    color: var(--retail-purple);
    font-size: 0.78rem;
    font-weight: 950;
}

.retail-problem-points article p {
    margin: 24px 0 0;
    color: #1b2940;
    font-weight: 850;
    line-height: 1.46;
}

.retail-problem-callout {
    grid-column: 1 / -1;
    border-radius: 8px;
    padding: 25px 30px;
    background: linear-gradient(135deg, var(--retail-ink), #071426);
    color: #ffffff;
    font-size: 1.32rem;
    font-weight: 930;
    line-height: 1.22;
}

.retail-section-heading {
    max-width: 820px;
    margin-bottom: 58px;
}

.retail-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.retail-moment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    grid-template-rows: repeat(2, minmax(230px, 1fr));
    gap: 24px;
    margin-top: 44px;
}

.retail-flow-grid,
.retail-sync-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.retail-example-card,
.retail-flow-card,
.retail-sync-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.retail-example-card {
    min-height: 196px;
}

.retail-flow-card,
.retail-sync-card {
    min-height: 210px;
    background:
        linear-gradient(180deg, rgba(118, 87, 255, 0.05), rgba(255, 255, 255, 0) 56%),
        #ffffff;
}

.retail-example-card::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 84px;
    height: 84px;
    border-top-left-radius: 8px;
    background: linear-gradient(135deg, rgba(118, 87, 255, 0.05), rgba(118, 87, 255, 0.16));
}

.retail-example-card > * {
    position: relative;
    z-index: 1;
}

.retail-example-card span,
.retail-flow-card span,
.retail-sync-card span,
.retail-catalogue-examples span,
.retail-report-head span {
    color: var(--retail-purple);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-example-card h3,
.retail-flow-card h3,
.retail-sync-card h3,
.retail-catalogue-examples h3 {
    margin: 18px 0 0;
    color: var(--retail-ink);
    font-size: 1.22rem;
    line-height: 1.22;
}

.retail-example-card p,
.retail-flow-card p,
.retail-sync-card p,
.retail-catalogue-examples p {
    margin: 16px 0 0;
    color: #526176;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.58;
}

.retail-moment-card {
    position: relative;
    min-width: 0;
    min-height: 230px;
    overflow: hidden;
    border: 1px solid rgba(11, 23, 45, 0.08);
    border-radius: 18px;
    margin: 0;
    background: #0c1728;
    box-shadow: 0 28px 80px -52px rgba(11, 23, 45, 0.7);
}

.retail-moment-card:first-child {
    grid-row: 1 / span 2;
}

.retail-moment-card img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: var(--image-position, center);
    filter: saturate(0.96) contrast(1.03);
    transform: scale(1.01);
}

.retail-moment-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 7, 17, 0.03), rgba(2, 7, 17, 0.64)),
        linear-gradient(110deg, rgba(2, 7, 17, 0.48), rgba(2, 7, 17, 0) 54%);
    pointer-events: none;
}

.retail-moment-card figcaption {
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
    color: #ffffff;
}

.retail-moment-card figcaption span {
    display: inline-flex;
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.84rem;
    font-weight: 930;
    line-height: 1;
}

.retail-moment-card figcaption strong {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
}

.retail-sync-card {
    border: 1px solid var(--retail-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 60px -48px rgba(11, 23, 45, 0.45);
}

.retail-sync-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--retail-orange), var(--retail-purple));
}

.retail-sync-card p {
    margin-top: 26px;
    color: #25344d;
    font-size: 1.05rem;
    font-weight: 820;
}

.retail-pos-grid,
.retail-reporting-grid,
.retail-branch-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1fr);
    gap: 82px;
    align-items: center;
}

.retail-check-grid,
.retail-report-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.retail-check-grid li,
.retail-report-list li {
    border-color: #dfe7f1;
    background: #ffffff;
    color: #132239;
    box-shadow: 0 16px 42px -34px rgba(11, 23, 45, 0.4);
}

.retail-pos-preview {
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #f5f8fc;
    padding: 22px;
    box-shadow: var(--retail-shadow);
}

.retail-pos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 12px;
    padding: 20px;
    background: var(--retail-ink);
    color: #ffffff;
}

.retail-pos-head span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-pos-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.82fr);
    gap: 20px;
    padding: 20px 0 0;
}

.retail-pos-tabs {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.retail-pos-tabs span {
    border-radius: 999px;
    padding: 8px 12px;
    background: #ffffff;
    color: #526176;
    font-size: 0.78rem;
    font-weight: 900;
}

.retail-pos-tabs span:first-child {
    background: var(--retail-purple);
    color: #ffffff;
}

.retail-pos-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.retail-pos-products button {
    min-height: 108px;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    background: #ffffff;
    color: var(--retail-ink);
    font: inherit;
    font-size: 0.96rem;
    font-weight: 920;
    line-height: 1.12;
    padding: 12px;
    text-align: left;
}

.retail-pos-products small {
    display: block;
    margin-top: 8px;
    color: #718096;
    font-size: 0.82rem;
    font-weight: 820;
}

.retail-sale-card {
    display: grid;
    gap: 14px;
    grid-column: 2;
    grid-row: 1 / span 2;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    padding: 24px;
    background: #ffffff;
}

.retail-sale-card > strong {
    font-size: 1.15rem;
}

.retail-sale-card div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: #31415a;
    font-size: 0.94rem;
    font-weight: 780;
}

.retail-sale-card p {
    margin: 6px 0 0;
    border-radius: 12px;
    padding: 18px;
    background: #f0ebff;
    color: var(--retail-purple);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-sale-card p strong {
    display: block;
    margin-top: 4px;
    color: var(--retail-ink);
    font-size: 2.2rem;
    line-height: 1;
}

.retail-dark-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.88fr);
    gap: 72px;
    align-items: end;
}

.retail-stock-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-top: 56px;
}

.retail-dark-card {
    min-height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.retail-dark-card > span {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 28px;
    place-items: center;
    border-radius: 12px;
    background:
        linear-gradient(#33d6c8, #33d6c8) center / 12px 12px no-repeat,
        rgba(51, 214, 200, 0.12);
}

.retail-dark-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.12rem;
    line-height: 1.2;
}

.retail-dark-card p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.94rem;
    line-height: 1.56;
}

.retail-catalogue-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 30px;
    padding: 34px;
}

.retail-catalogue-table {
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    padding: 24px;
    background: #f7faff;
}

.retail-catalogue-builder {
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    padding: 24px;
    background: #eef4fb;
}

.retail-catalogue-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.retail-catalogue-head span {
    border-radius: 999px;
    padding: 7px 10px;
    background: #eee8ff;
    color: var(--retail-purple);
    font-size: 0.78rem;
    font-weight: 950;
}

.retail-catalogue-line {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr) minmax(130px, 0.8fr);
    gap: 14px;
    align-items: center;
    border-top: 1px solid #e2e9f3;
    padding: 16px 0;
}

.retail-catalogue-line b,
.retail-catalogue-line span,
.retail-catalogue-line em {
    min-width: 0;
}

.retail-catalogue-line b {
    color: var(--retail-ink);
    font-size: 1rem;
}

.retail-catalogue-line span {
    color: #40516d;
    font-size: 0.96rem;
    font-weight: 780;
}

.retail-catalogue-line em {
    border-radius: 999px;
    padding: 8px 10px;
    background: #ffffff;
    color: var(--retail-purple);
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.retail-catalogue-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 14px;
    padding: 34px;
    background:
        linear-gradient(145deg, rgba(118, 87, 255, 0.12), rgba(255, 122, 26, 0.08)),
        #ffffff;
}

.retail-catalogue-note span {
    color: var(--retail-orange);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.retail-catalogue-note h3 {
    margin: 18px 0 0;
    color: var(--retail-ink);
    font-size: 1.55rem;
    line-height: 1.2;
}

.retail-catalogue-note p {
    margin: 16px 0 0;
    color: var(--retail-muted);
    font-size: 1rem;
    line-height: 1.62;
}

.retail-catalogue-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.retail-catalogue-row b {
    width: 160px;
    border-radius: 8px;
    padding: 13px 16px;
    background: #ffffff;
    color: var(--retail-ink);
    font-size: 0.88rem;
}

.retail-catalogue-row span {
    border-radius: 999px;
    padding: 9px 13px;
    background: #dcfce7;
    color: #07834e;
    font-size: 0.78rem;
    font-weight: 920;
}

.retail-catalogue-row span:nth-child(5),
.retail-catalogue-row span:nth-child(6) {
    background: #ffffff;
    color: #4a5870;
}

.retail-catalogue-row .is-orange {
    background: #fff2df;
    color: #b45400;
}

.retail-catalogue-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.retail-catalogue-examples article {
    border: 1px solid var(--retail-line);
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
}

.retail-catalogue-examples h3 {
    font-size: 1.02rem;
}

.retail-catalogue-examples p {
    font-size: 0.84rem;
}

.retail-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.retail-large-card {
    position: relative;
    overflow: hidden;
    padding: 42px;
}

.retail-large-card::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 116px;
    height: 92px;
    border-bottom-left-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.1), rgba(118, 87, 255, 0.12));
}

.retail-large-card > * {
    position: relative;
    z-index: 1;
}

.retail-large-card h2 {
    max-width: 520px;
    font-size: 2.5rem;
}

.retail-large-card > p:not(.retail-eyebrow) {
    margin: 20px 0 0;
    color: var(--retail-muted);
    font-size: 1rem;
    line-height: 1.68;
}

.retail-card-list {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.retail-card-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e5ebf4;
    border-radius: 8px;
    padding: 14px 16px;
    color: #14233b;
    font-size: 0.94rem;
    font-weight: 870;
}

.retail-card-list span {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background:
        linear-gradient(#ffffff, #ffffff) center / 4px 4px no-repeat,
        rgba(118, 87, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(118, 87, 255, 0.3);
}

.retail-customer-strip,
.retail-reader-strip {
    margin-top: 26px;
    border-radius: 8px;
    background: var(--retail-ink);
    color: #ffffff;
    padding: 22px;
}

.retail-customer-panel {
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #f7faff;
}

.retail-customer-search {
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(118, 87, 255, 0.12), rgba(255, 255, 255, 0)),
        #ffffff;
}

.retail-customer-search span {
    display: block;
    color: var(--retail-purple);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.retail-customer-search strong {
    display: block;
    margin-top: 8px;
    color: var(--retail-ink);
    font-size: 1.55rem;
}

.retail-customer-orders {
    display: grid;
    gap: 0;
    padding: 0 24px 24px;
}

.retail-customer-orders p {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    border-top: 1px solid #e1e8f2;
    padding: 16px 0;
    color: #506178;
    font-size: 0.94rem;
    line-height: 1.35;
}

.retail-customer-orders b {
    color: var(--retail-ink);
}

.retail-customer-strip {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: center;
}

.retail-customer-strip > span {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--retail-orange), var(--retail-purple));
}

.retail-customer-strip small {
    color: rgba(255, 255, 255, 0.66);
    font-weight: 800;
}

.retail-customer-strip div {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 13px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.retail-customer-strip em {
    color: #ffffff;
    font-style: normal;
    font-weight: 900;
}

.retail-reader-strip {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px 26px;
    align-items: center;
}

.retail-reader-strip > div {
    grid-row: span 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 82px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 12px;
}

.retail-reader-strip > div span {
    grid-column: 1 / -1;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.retail-reader-strip > div i {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.retail-reader-strip p {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
}

.retail-reader-strip b {
    color: var(--retail-green);
}

.retail-report-list {
    max-width: 560px;
}

.retail-report-panel {
    padding: 34px;
}

.retail-report-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}

.retail-report-head strong {
    font-size: 1.24rem;
}

.retail-report-head span {
    border-radius: 999px;
    padding: 9px 12px;
    background: #eee8ff;
}

.retail-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.retail-report-metrics div {
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    padding: 18px;
    background: #f8fbff;
}

.retail-report-metrics span {
    display: block;
    color: #8390a3;
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-report-metrics strong {
    display: block;
    margin-top: 8px;
    font-size: 1.45rem;
}

.retail-report-table {
    display: grid;
    gap: 0;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #e3eaf3;
    border-radius: 12px;
    background: #ffffff;
}

.retail-report-table p {
    display: grid;
    grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0;
    border-top: 1px solid #e8eef6;
    padding: 17px 18px;
    color: #53647b;
    font-size: 0.94rem;
}

.retail-report-table p:first-child {
    border-top: 0;
}

.retail-report-table b,
.retail-report-table strong {
    color: var(--retail-ink);
}

.retail-bars {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    height: 260px;
    margin-top: 18px;
    border: 1px solid #e3eaf3;
    border-radius: 8px;
    padding: 28px;
    background: linear-gradient(180deg, #f9fbff, #eef4fb);
}

.retail-bars i {
    flex: 1 1 0;
    height: var(--height);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #6f53ff, #b9a8ff);
}

.retail-bars i:nth-child(4) {
    background: linear-gradient(180deg, #ff7a1a, #ffc18a);
}

.retail-bars i:nth-child(6) {
    background: linear-gradient(180deg, #2bd89f, #b8f3dc);
}

.retail-branch-section {
    padding: 124px 0;
}

.retail-branch-board {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(118, 87, 255, 0.16), rgba(43, 216, 159, 0.07)),
        #071426;
    box-shadow: 0 34px 80px -52px rgba(0, 0, 0, 0.92);
}

.retail-branch-summary {
    padding: 34px 34px 28px;
}

.retail-branch-summary span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.retail-branch-summary strong {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    line-height: 1;
}

.retail-branch-summary p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
}

.retail-branch-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.retail-branch-list p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 20px;
    background: rgba(6, 17, 38, 0.82);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.94rem;
    font-weight: 800;
}

.retail-branch-list span {
    color: #ffffff;
    font-weight: 950;
}

.retail-branch-map {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(118, 87, 255, 0.16), rgba(43, 216, 159, 0.07)),
        #071426;
    box-shadow: 0 34px 80px -52px rgba(0, 0, 0, 0.92);
}

.retail-map-line {
    position: absolute;
    top: 52%;
    left: 25%;
    width: 55%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(168, 147, 255, 0.5), transparent);
    transform: rotate(18deg);
}

.retail-map-dot {
    position: absolute;
    top: 58%;
    left: 48%;
    width: 24px;
    height: 24px;
    border: 6px solid rgba(43, 216, 159, 0.18);
    border-radius: 999px;
    background: var(--retail-green);
}

.retail-branch-card {
    position: absolute;
    top: 40px;
    right: 46px;
    width: min(245px, calc(100% - 56px));
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
    color: var(--retail-ink);
}

.retail-branch-card span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.retail-branch-card strong {
    display: block;
    margin-top: 4px;
    font-size: 2rem;
}

.retail-branch-card div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 13px;
    border: 1px solid #e5ebf4;
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 0.84rem;
    font-weight: 900;
}

.retail-branch-card em {
    color: #08a767;
    font-style: normal;
}

.retail-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.retail-comparison-card {
    padding: 38px;
}

.retail-comparison-card.is-ordello {
    border-color: rgba(6, 17, 38, 0.94);
    background: var(--retail-ink);
    color: #ffffff;
}

.retail-comparison-card h3 {
    margin: 0 0 22px;
    font-size: 1.55rem;
}

.retail-comparison-card ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.retail-comparison-card li {
    display: flex;
    gap: 14px;
    align-items: center;
    border-top: 1px solid #e8eef6;
    padding: 18px 0;
    color: #33445e;
    font-weight: 820;
}

.retail-comparison-card.is-ordello li {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
}

.retail-comparison-card li span {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background:
        linear-gradient(#64748b, #64748b) center / 7px 7px no-repeat,
        #edf2f7;
}

.retail-comparison-card.is-ordello li span {
    background:
        linear-gradient(var(--retail-green), var(--retail-green)) center / 7px 7px no-repeat,
        rgba(43, 216, 159, 0.16);
}

.retail-closing-line {
    margin: 36px 0 0;
    border: 1px solid rgba(118, 87, 255, 0.22);
    border-radius: 14px;
    padding: 28px 32px;
    background: #f1eeff;
    color: #241d54;
    font-size: 1.15rem;
    font-weight: 920;
    line-height: 1.42;
}

.retail-final-cta {
    padding: 124px 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(118, 87, 255, 0.34), transparent 32%),
        linear-gradient(118deg, rgba(118, 87, 255, 0.2), rgba(118, 87, 255, 0) 45%),
        linear-gradient(135deg, #061326, #020711);
}

.retail-final-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 44px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    padding: 72px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.055);
    color: #ffffff;
    box-shadow: 0 30px 72px -52px rgba(0, 0, 0, 0.9);
}

.retail-final-panel h2 {
    max-width: 760px;
    font-size: clamp(2.65rem, 4.6vw, 4.4rem);
}

.retail-final-panel p {
    max-width: 760px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.12rem;
    font-weight: 760;
    line-height: 1.6;
}

.retail-final-actions {
    display: grid;
    gap: 12px;
    justify-items: stretch;
}

.retail-premium-page .site-footer {
    background: #020711;
}

@media (max-width: 1320px) {
    .retail-hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
        gap: 58px;
    }

    .retail-hero h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .retail-hero-subtitle {
        font-size: 1.04rem;
        line-height: 1.62;
    }

    .retail-proof-list li {
        font-size: 0.88rem;
        padding: 11px 13px;
    }
}

@media (max-width: 1180px) {
    .retail-hero-grid,
    .retail-problem-grid,
    .retail-pos-grid,
    .retail-reporting-grid,
    .retail-branch-grid,
    .retail-dark-heading,
    .retail-catalogue-panel {
        grid-template-columns: 1fr;
    }

    .retail-flow-grid,
    .retail-sync-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-hero-copy {
        max-width: 840px;
    }

    .retail-hero h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .retail-ui-window {
        max-width: 760px;
    }

    .retail-dashboard-shell {
        max-width: 820px;
    }

    .retail-example-grid,
    .retail-stock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-moment-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .retail-moment-card,
    .retail-moment-card:first-child {
        grid-row: auto;
    }

    .retail-moment-card {
        min-height: 320px;
    }

    .retail-catalogue-examples {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .retail-premium-page .shell {
        width: min(calc(100% - 32px), 1360px);
    }

    .retail-hero {
        padding: 116px 0 86px;
    }

    .retail-hero h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .retail-section h2 {
        font-size: 3rem;
    }

    .retail-hero-subtitle,
    .retail-section-copy > p:not(.retail-eyebrow),
    .retail-section-heading > p,
    .retail-dark-heading > p {
        font-size: 1rem;
    }

    .retail-stat-strip,
    .retail-sync-grid,
    .retail-duo-grid,
    .retail-comparison-grid {
        grid-template-columns: 1fr;
    }

    .retail-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-moment-card {
        min-height: 280px;
    }

    .retail-stat-strip div {
        border-right: 0;
        border-bottom: 1px solid #e7edf5;
    }

    .retail-stat-strip div:last-child {
        border-bottom: 0;
    }

    .retail-ui-grid,
    .retail-dashboard-grid,
    .retail-pos-body,
    .retail-sale-card {
        grid-template-columns: 1fr;
    }

    .retail-basket-card,
    .retail-sale-card {
        grid-column: auto;
        grid-row: auto;
    }

    .retail-dashboard-card.is-hero,
    .retail-dashboard-card.is-wide {
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
    }

    .retail-floating-note {
        display: none;
    }

    .retail-section {
        padding: 72px 0;
    }

    .retail-final-panel {
        grid-template-columns: 1fr;
        padding: 46px;
    }

    .retail-final-actions {
        justify-items: start;
    }
}

@media (max-width: 680px) {
    .retail-premium-page .shell {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }

    .retail-hero {
        padding: 104px 0 78px;
    }

    .retail-hero-grid {
        gap: 34px;
    }

    .retail-hero-copy,
    .retail-hero-visual {
        width: min(100%, 340px);
        max-width: 100%;
    }

    .retail-hero h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .retail-hero-subtitle {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .retail-section h2,
    .retail-large-card h2,
    .retail-final-panel h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal !important;
        font-size: 1.75rem;
        line-height: 1.16;
    }

    .retail-section h3,
    .retail-section p,
    .retail-section li,
    .retail-section span,
    .retail-section strong,
    .retail-section b,
    .retail-section small,
    .retail-section a {
        white-space: normal;
    }

    .retail-section-copy,
    .retail-section-heading,
    .retail-problem-grid,
    .retail-problem-points,
    .retail-example-grid,
    .retail-moment-grid,
    .retail-sync-grid,
    .retail-flow-grid,
    .retail-stock-grid,
    .retail-catalogue-panel,
    .retail-catalogue-examples,
    .retail-duo-grid,
    .retail-pos-grid,
    .retail-reporting-grid,
    .retail-branch-grid,
    .retail-comparison-grid,
    .retail-report-metrics {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .retail-problem-points article,
    .retail-example-card,
    .retail-moment-card,
    .retail-flow-card,
    .retail-sync-card,
    .retail-large-card,
    .retail-report-panel,
    .retail-comparison-card,
    .retail-catalogue-examples article,
    .retail-check-grid li,
    .retail-report-list li {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .retail-example-card h3,
    .retail-flow-card h3,
    .retail-sync-card h3,
    .retail-catalogue-examples h3,
    .retail-problem-points article p {
        font-size: 0.94rem;
        line-height: 1.42;
    }

    .retail-moment-grid {
        gap: 16px;
        margin-top: 28px;
    }

    .retail-moment-card {
        min-height: 238px;
        border-radius: 14px;
    }

    .retail-moment-card figcaption {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .retail-moment-card figcaption strong {
        font-size: 1.04rem;
    }

    .retail-example-card p,
    .retail-flow-card p,
    .retail-sync-card p,
    .retail-catalogue-examples p,
    .retail-section-copy > p:not(.retail-eyebrow),
    .retail-section-heading > p,
    .retail-dark-heading > p {
        font-size: 0.92rem;
        line-height: 1.62;
    }

    .retail-problem-callout {
        max-width: 100%;
        padding: 22px;
        overflow-wrap: anywhere;
        font-size: 1rem;
    }

    .retail-actions,
    .retail-proof-list,
    .retail-check-grid,
    .retail-report-list,
    .retail-problem-points,
    .retail-example-grid,
    .retail-sync-grid,
    .retail-flow-grid,
    .retail-stock-grid,
    .retail-catalogue-examples,
    .retail-report-metrics {
        grid-template-columns: 1fr;
    }

    .retail-actions,
    .retail-final-actions {
        display: grid;
        width: 100%;
    }

    .retail-actions .button,
    .retail-final-actions .button {
        width: 100%;
    }

    .retail-proof-list li:nth-child(4),
    .retail-problem-callout {
        grid-column: auto;
    }

    .retail-hero-stats {
        margin-top: 0;
        padding: 0;
    }

    .retail-stat-strip {
        border-radius: 0;
    }

    .retail-ui-window,
    .retail-dashboard-shell,
    .retail-pos-preview,
    .retail-catalogue-panel,
    .retail-large-card,
    .retail-report-panel,
    .retail-comparison-card,
    .retail-final-panel {
        padding: 20px;
    }

    .retail-tile-grid,
    .retail-pos-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-dashboard-grid,
    .retail-branch-stock,
    .retail-branch-list,
    .retail-catalogue-line,
    .retail-report-table p {
        grid-template-columns: 1fr;
    }

    .retail-dashboard-card.is-hero,
    .retail-dashboard-card.is-wide {
        grid-column: auto;
        grid-row: auto;
        min-height: auto;
    }

    .retail-basket-card p strong,
    .retail-sale-card p strong {
        font-size: 1.68rem;
    }

    .retail-catalogue-row b {
        width: 100%;
    }

    .retail-customer-strip,
    .retail-reader-strip {
        grid-template-columns: 1fr;
    }

    .retail-customer-strip > span,
    .retail-reader-strip > div {
        grid-row: auto;
    }

    .retail-bars {
        height: 200px;
        gap: 10px;
        padding: 18px;
    }

    .retail-branch-map {
        min-height: 420px;
    }

    .retail-branch-card {
        top: 24px;
        right: 20px;
        left: 20px;
        width: auto;
    }
}

/* Pricing page */
.pricing-page {
    --pricing-ink: #07111f;
    --pricing-muted: #5f6b7c;
    --pricing-line: #dce4ee;
    --pricing-soft: #f6f8fb;
    --pricing-orange: #ff6a21;
    --pricing-green: #0f9f6e;
    background: #fff;
}

.pricing-page .button svg,
.pricing-card-icon svg,
.pricing-example-icon svg,
.pricing-price-card li svg,
.pricing-example-card li svg,
.pricing-starter-panel li svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--pricing-orange);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 122px 0 58px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 106, 33, 0.2), transparent 38%),
        linear-gradient(145deg, #07111f 0%, #121a27 48%, #02050a 100%);
}

.pricing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.15;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 88px 88px;
}

.pricing-hero-grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.82fr) minmax(520px, 1.08fr);
    gap: clamp(36px, 5vw, 74px);
    align-items: center;
}

.pricing-hero-copy h1,
.pricing-core-summary h2,
.pricing-section-heading h2,
.pricing-product-copy h2,
.pricing-terms-grid h2 {
    margin: 14px 0 0;
    color: var(--pricing-ink);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: 0;
}

.pricing-hero-copy h1 {
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    line-height: var(--marketing-hero-h1-line-height);
}

.pricing-hero-copy p:not(.pricing-eyebrow) {
    max-width: 710px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 650;
    line-height: 1.62;
}

.pricing-hero .hero-actions {
    margin-top: 34px;
}

.pricing-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.pricing-badge-row span {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 10px 13px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 850;
}

.pricing-hero-media,
.pricing-product-grid figure {
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(8, 18, 36, 0.1);
    border-radius: 8px;
    background: #f7f8fa;
    box-shadow: 0 34px 90px -58px rgba(0, 0, 0, 0.72);
}

.pricing-hero-media img,
.pricing-product-grid img {
    display: block;
    width: 100%;
    height: auto;
}

.pricing-hero-media figcaption,
.pricing-product-grid figcaption {
    padding: 14px 18px 18px;
    color: #415064;
    font-size: 0.9rem;
    font-weight: 800;
}

.pricing-core-section,
.pricing-options-section,
.pricing-table-section,
.pricing-examples-section,
.pricing-terms-section,
.pricing-product-section {
    background: #fff;
    padding: 72px 0;
}

.pricing-core-section,
.pricing-table-section,
.pricing-terms-section {
    background: var(--pricing-soft);
}

.pricing-core-grid,
.pricing-product-grid,
.pricing-table-grid,
.pricing-terms-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: start;
}

.pricing-core-summary h2,
.pricing-section-heading h2,
.pricing-product-copy h2,
.pricing-terms-grid h2 {
    max-width: 820px;
    font-size: clamp(2.15rem, 3.6vw, 4.1rem);
}

.pricing-core-summary p:not(.pricing-eyebrow),
.pricing-section-heading p:not(.pricing-eyebrow),
.pricing-product-copy p,
.pricing-terms-grid li {
    color: var(--pricing-muted);
    font-size: 1.02rem;
    font-weight: 680;
    line-height: 1.62;
}

.pricing-starter-panel {
    border: 1px solid rgba(8, 18, 36, 0.1);
    border-radius: 8px;
    background: #fff;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 26px 80px -58px rgba(8, 18, 36, 0.56);
}

.pricing-starter-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid var(--pricing-line);
    padding: 0 0 18px;
}

.pricing-starter-head + .pricing-starter-head {
    padding-top: 18px;
}

.pricing-starter-head span {
    color: var(--pricing-muted);
    font-weight: 850;
}

.pricing-starter-head strong {
    color: var(--pricing-ink);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 950;
    line-height: 1;
}

.pricing-included-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.pricing-included-grid h3,
.pricing-price-card h3,
.pricing-example-card h3 {
    margin: 0;
    color: var(--pricing-ink);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.14;
}

.pricing-starter-panel ul,
.pricing-product-copy ul,
.pricing-example-card ul,
.pricing-terms-grid ul {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-starter-panel li,
.pricing-example-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #38475b;
    font-size: 0.94rem;
    font-weight: 760;
    line-height: 1.42;
}

.pricing-starter-panel li svg,
.pricing-example-card li svg {
    color: var(--pricing-green);
}

.pricing-product-section {
    padding-bottom: 42px;
}

.pricing-product-grid {
    grid-template-columns: minmax(520px, 1fr) minmax(0, 0.7fr);
    align-items: center;
}

.pricing-product-grid figure {
    box-shadow: 0 24px 74px -56px rgba(8, 18, 36, 0.52);
}

.pricing-product-copy ul li {
    position: relative;
    padding-left: 20px;
    color: #34445a;
    font-weight: 800;
}

.pricing-product-copy ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pricing-orange);
}

.pricing-section-heading {
    max-width: 900px;
}

.pricing-card-grid,
.pricing-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.pricing-card-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-price-card,
.pricing-example-card {
    min-height: 230px;
    border: 1px solid var(--pricing-line);
    border-radius: 8px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 22px 70px -58px rgba(8, 18, 36, 0.44);
}

.pricing-price-card.is-featured {
    border-color: rgba(255, 106, 33, 0.5);
    background:
        linear-gradient(145deg, rgba(255, 106, 33, 0.09), transparent 42%),
        #fff;
}

.pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fff3ed;
    color: var(--pricing-orange);
}

.pricing-price-card strong {
    display: block;
    margin-top: 18px;
    color: var(--pricing-ink);
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    font-weight: 950;
    line-height: 1;
}

.pricing-price-card p {
    margin: 14px 0 0;
    color: var(--pricing-muted);
    font-size: 0.96rem;
    font-weight: 680;
    line-height: 1.52;
}

.pricing-table-grid {
    grid-template-columns: minmax(0, 0.58fr) minmax(620px, 1fr);
}

.pricing-table-wrap {
    overflow: hidden;
    border: 1px solid var(--pricing-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 70px -58px rgba(8, 18, 36, 0.44);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
    padding: 17px 18px;
    border-bottom: 1px solid var(--pricing-line);
    text-align: left;
    vertical-align: top;
}

.pricing-table th {
    color: var(--pricing-ink);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-table td {
    color: #3b4a5e;
    font-size: 0.94rem;
    font-weight: 720;
    line-height: 1.45;
}

.pricing-table td:nth-child(2) {
    white-space: nowrap;
    color: var(--pricing-ink);
    font-weight: 950;
}

.pricing-table td a {
    color: var(--pricing-ink);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(255, 106, 33, 0.24);
    transition: color 180ms ease, box-shadow 180ms ease;
}

.pricing-table td a:hover {
    color: var(--pricing-orange);
    box-shadow: inset 0 -2px 0 rgba(255, 106, 33, 0.58);
}

.pricing-table tr:last-child td {
    border-bottom: 0;
}

.pricing-examples-section {
    background:
        linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
}

.pricing-example-card {
    min-height: 280px;
}

.pricing-example-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pricing-example-topline > span:last-child {
    color: var(--pricing-orange);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-example-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 106, 33, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 106, 33, 0.14), transparent),
        #fff7f2;
    color: var(--pricing-orange);
}

.pricing-example-prices {
    display: grid;
    gap: 6px;
    margin-top: 20px;
    border-top: 1px solid var(--pricing-line);
    border-bottom: 1px solid var(--pricing-line);
    padding: 18px 0;
}

.pricing-example-prices strong,
.pricing-example-prices b {
    color: var(--pricing-ink);
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
}

.pricing-example-prices b {
    color: var(--pricing-green);
}

.pricing-terms-section {
    padding: 62px 0;
}

.pricing-terms-grid {
    align-items: center;
}

.pricing-terms-grid ul {
    margin-top: 0;
}

.pricing-terms-grid li {
    border-left: 3px solid var(--pricing-orange);
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 18px 58px -50px rgba(8, 18, 36, 0.42);
}

.pricing-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--pricing-orange);
    font-weight: 950;
    text-decoration: none;
}

.pricing-text-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.hardware-page {
    scroll-behavior: smooth;
}

.hardware-page svg {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.hardware-hero {
    position: relative;
    overflow: hidden;
    padding: 122px 0 58px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 106, 33, 0.22), transparent 36%),
        linear-gradient(145deg, #11141c 0%, #06080d 55%, #010205 100%);
}

.hardware-hero-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(600px, 1.2fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
}

.hardware-hero-copy h1 {
    margin: 14px 0 0;
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
    letter-spacing: 0;
}

.hardware-hero-copy p:not(.pricing-eyebrow) {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.35vw, 1.24rem);
    font-weight: 650;
    line-height: 1.62;
}

.hardware-hero .hero-actions {
    margin-top: 34px;
}

.hardware-hero-media,
.hardware-detail-media {
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #111827;
    box-shadow: 0 34px 90px -56px rgba(0, 0, 0, 0.9);
}

.hardware-hero-media img,
.hardware-detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hardware-hero-media {
    aspect-ratio: 16 / 9;
}

.hardware-hero-media figcaption {
    padding: 14px 18px 18px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 800;
}

.hardware-anchor-section {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--pricing-line);
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(16px);
}

.hardware-anchor-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 0;
    scrollbar-width: none;
}

.hardware-anchor-grid::-webkit-scrollbar {
    display: none;
}

.hardware-anchor-grid a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid var(--pricing-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pricing-ink);
    padding: 0 15px;
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 42px -36px rgba(8, 18, 36, 0.45);
}

.hardware-anchor-grid span {
    display: inline-flex;
    color: var(--pricing-orange);
}

.hardware-anchor-grid svg {
    width: 18px;
    height: 18px;
}

.hardware-detail-section {
    background: #f6f8fb;
    padding: 74px 0;
}

.hardware-detail-stack {
    display: grid;
    gap: 22px;
}

.hardware-detail-card {
    scroll-margin-top: 96px;
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(520px, 1fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
    border: 1px solid var(--pricing-line);
    border-radius: 8px;
    background: #fff;
    padding: clamp(22px, 3vw, 34px);
    box-shadow: 0 28px 84px -64px rgba(8, 18, 36, 0.52);
}

.hardware-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #fff3ed;
    color: var(--pricing-orange);
}

.hardware-detail-icon svg {
    width: 24px;
    height: 24px;
}

.hardware-detail-copy h2 {
    margin: 12px 0 0;
    color: var(--pricing-ink);
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: 0;
}

.hardware-detail-copy p:not(.pricing-eyebrow) {
    max-width: 680px;
    margin: 18px 0 0;
    color: var(--pricing-muted);
    font-size: 1.02rem;
    font-weight: 680;
    line-height: 1.62;
}

.hardware-detail-copy ul {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.hardware-detail-copy li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #34445a;
    font-weight: 790;
    line-height: 1.48;
}

.hardware-detail-copy li svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--pricing-green);
}

.hardware-detail-media {
    aspect-ratio: 16 / 10.5;
    border-color: rgba(8, 18, 36, 0.1);
    background: #f6f8fb;
    box-shadow: 0 24px 76px -58px rgba(8, 18, 36, 0.58);
}

.hardware-image-slot {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 340px;
    background:
        radial-gradient(circle at 70% 18%, rgba(255, 106, 33, 0.22), transparent 30%),
        linear-gradient(145deg, #111827 0%, #070b12 100%);
    color: #fff;
    text-align: center;
    padding: 34px;
}

.hardware-image-slot span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ff9a5f;
}

.hardware-image-slot svg {
    width: 34px;
    height: 34px;
}

.hardware-image-slot strong {
    display: block;
    max-width: 260px;
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1.12;
}

@media (max-width: 1180px) {
    .pricing-hero-grid,
    .pricing-core-grid,
    .pricing-product-grid,
    .pricing-table-grid,
    .pricing-terms-grid,
    .hardware-hero-grid,
    .hardware-detail-card {
        grid-template-columns: 1fr;
    }

    .pricing-hero-media,
    .pricing-product-grid figure,
    .hardware-hero-media,
    .hardware-detail-media {
        max-width: 840px;
    }

    .pricing-table-grid {
        gap: 28px;
    }
}

@media (max-width: 900px) {
    .pricing-card-grid,
    .pricing-card-grid-three,
    .pricing-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-table-wrap {
        overflow-x: auto;
    }

    .pricing-table {
        min-width: 720px;
    }
}

@media (max-width: 640px) {
    .pricing-hero {
        padding: 96px 0 44px;
    }

    .pricing-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .pricing-core-section,
    .pricing-options-section,
    .pricing-table-section,
    .pricing-examples-section,
    .pricing-terms-section,
    .pricing-product-section {
        padding: 50px 0;
    }

    .pricing-badge-row,
    .pricing-included-grid,
    .pricing-card-grid,
    .pricing-card-grid-three,
    .pricing-example-grid {
        grid-template-columns: 1fr;
    }

    .pricing-badge-row {
        display: grid;
    }

    .pricing-badge-row span {
        text-align: center;
    }

    .pricing-starter-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pricing-included-grid {
        display: grid;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 14px;
    }

    .hardware-hero {
        padding: 96px 0 44px;
    }

    .hardware-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .hardware-anchor-grid {
        width: min(100% - 24px, 1440px);
    }

    .hardware-detail-section {
        padding: 50px 0;
    }

    .hardware-detail-card {
        padding: 20px;
    }

    .hardware-image-slot {
        min-height: 260px;
    }
}

/* Pricing page v2 */
.pricing-page {
    --pricing-ink: #07111f;
    --pricing-muted: #5e6978;
    --pricing-line: #dfe6ef;
    --pricing-soft: #f5f8fc;
    --pricing-blue: #2563ff;
    --pricing-green: #0f9f6e;
    --pricing-orange: #f97316;
    --pricing-slate: #132032;
    background: #ffffff;
}

.pricing-page .button svg,
.pricing-page .pricing-card-icon svg,
.pricing-page .pricing-price-card li svg,
.pricing-page .pricing-package-card li svg,
.pricing-page .pricing-example-card li svg,
.pricing-page .pricing-text-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--pricing-blue);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 560px;
    padding: 118px 0 72px;
    color: #fff;
    background:
        linear-gradient(135deg, #07111f 0%, #111d2d 54%, #19283b 100%);
}

.pricing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.98) 0%, rgba(7, 17, 31, 0.83) 42%, rgba(7, 17, 31, 0.26) 74%, rgba(7, 17, 31, 0.68) 100%);
}

.pricing-hero-bg {
    position: absolute;
    inset: 44px 0 0 auto;
    z-index: -2;
    width: min(62vw, 920px);
    height: calc(100% - 44px);
    object-fit: contain;
    object-position: right center;
    opacity: 0.72;
}

.pricing-hero-layout {
    position: relative;
    z-index: 1;
}

.pricing-hero-copy {
    max-width: 760px;
}

.pricing-hero-copy h1,
.pricing-section-heading h2,
.pricing-package-card h3,
.pricing-overlap-list h3,
.pricing-location-panel .is-heading,
.pricing-faq-grid h3,
.pricing-price-card h3,
.pricing-example-card h3 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.04;
}

.pricing-hero-copy h1 {
    max-width: 760px;
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
}

.pricing-hero-copy p {
    max-width: 710px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.22rem;
    font-weight: 650;
    line-height: 1.58;
}

.pricing-hero .hero-actions {
    margin-top: 34px;
}

.pricing-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.pricing-badge-row span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 850;
}

.pricing-model-section,
.pricing-packages-section,
.pricing-hardware-section,
.pricing-options-section,
.pricing-overlap-section,
.pricing-branch-section,
.pricing-examples-section,
.pricing-terms-section,
.pricing-faq-section {
    padding: 76px 0;
    background: #fff;
}

.pricing-model-section,
.pricing-hardware-section,
.pricing-branch-section,
.pricing-terms-section {
    background: var(--pricing-soft);
}

.pricing-section-heading {
    max-width: 900px;
}

.pricing-section-heading h2 {
    margin-top: 12px;
    color: var(--pricing-ink);
    font-size: 3.55rem;
    font-weight: 950;
}

.pricing-section-heading p:not(.pricing-eyebrow) {
    max-width: 760px;
    margin: 16px 0 0;
    color: var(--pricing-muted);
    font-size: 1.05rem;
    font-weight: 680;
    line-height: 1.58;
}

.pricing-model-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.pricing-model-card,
.pricing-package-card,
.pricing-price-card,
.pricing-example-card,
.pricing-overlap-list article,
.pricing-faq-grid article,
.pricing-location-panel {
    border: 1px solid var(--pricing-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 72px -62px rgba(8, 18, 36, 0.55);
}

.pricing-model-card {
    padding: 24px;
}

.pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--pricing-blue);
}

.pricing-model-card:nth-child(2) .pricing-card-icon,
.pricing-price-card:nth-child(2n) .pricing-card-icon,
.pricing-package-card:nth-child(2) .pricing-card-icon {
    background: #ecfdf5;
    color: var(--pricing-green);
}

.pricing-model-card:nth-child(4) .pricing-card-icon,
.pricing-price-card:nth-child(3n) .pricing-card-icon,
.pricing-package-card:nth-child(3) .pricing-card-icon {
    background: #fff4ed;
    color: var(--pricing-orange);
}

.pricing-model-card h3,
.pricing-price-card h3,
.pricing-faq-grid h3 {
    color: var(--pricing-ink);
    font-size: 1.14rem;
    font-weight: 950;
}

.pricing-model-card p,
.pricing-price-card p,
.pricing-faq-grid p {
    margin: 12px 0 0;
    color: var(--pricing-muted);
    font-size: 0.96rem;
    font-weight: 680;
    line-height: 1.52;
}

.pricing-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
}

.pricing-package-card {
    min-height: 430px;
    padding: 28px;
}

.pricing-package-card.is-featured {
    border-color: rgba(37, 99, 255, 0.36);
    background:
        linear-gradient(145deg, rgba(37, 99, 255, 0.08), transparent 45%),
        #fff;
}

.pricing-package-topline {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    color: var(--pricing-muted);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.35;
}

.pricing-package-topline .pricing-card-icon {
    margin-bottom: 0;
}

.pricing-package-card h3 {
    margin-top: 28px;
    color: var(--pricing-ink);
    font-size: 1.55rem;
    font-weight: 950;
}

.pricing-package-card strong,
.pricing-price-card strong {
    display: block;
    color: var(--pricing-ink);
    font-weight: 950;
    line-height: 1;
}

.pricing-package-card strong {
    margin-top: 18px;
    font-size: 2.6rem;
}

.pricing-package-card ul,
.pricing-example-card ul {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-package-card li,
.pricing-example-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #34445a;
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.42;
}

.pricing-package-card li svg,
.pricing-example-card li svg {
    color: var(--pricing-green);
}

.pricing-hardware-grid,
.pricing-overlap-grid,
.pricing-branch-grid,
.pricing-terms-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(560px, 1fr);
    gap: 48px;
    align-items: start;
}

.pricing-table-wrap {
    overflow: hidden;
    border: 1px solid var(--pricing-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 72px -62px rgba(8, 18, 36, 0.55);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
    padding: 17px 18px;
    border-bottom: 1px solid var(--pricing-line);
    text-align: left;
    vertical-align: top;
}

.pricing-table th {
    color: var(--pricing-ink);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-table td {
    color: #3b4a5e;
    font-size: 0.94rem;
    font-weight: 720;
    line-height: 1.45;
}

.pricing-table td:nth-child(2) {
    white-space: nowrap;
    color: var(--pricing-ink);
    font-weight: 950;
}

.pricing-table td a,
.pricing-text-link {
    color: var(--pricing-blue);
    font-weight: 950;
    text-decoration: none;
}

.pricing-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.pricing-table td a {
    box-shadow: inset 0 -2px 0 rgba(37, 99, 255, 0.18);
}

.pricing-table tr:last-child td {
    border-bottom: 0;
}

.pricing-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.pricing-price-card {
    min-height: 250px;
    padding: 24px;
}

.pricing-price-card strong {
    margin-top: 18px;
    font-size: 2rem;
}

.pricing-modules-section {
    background: #fbfcfe;
}

.pricing-overlap-list {
    display: grid;
    gap: 14px;
}

.pricing-overlap-list article {
    padding: 22px;
}

.pricing-overlap-list h3 {
    color: var(--pricing-ink);
    font-size: 1.1rem;
    font-weight: 950;
}

.pricing-overlap-list p {
    margin: 10px 0 0;
    color: var(--pricing-muted);
    font-size: 0.96rem;
    font-weight: 680;
    line-height: 1.5;
}

.pricing-overlap-list strong {
    display: block;
    margin-top: 10px;
    color: var(--pricing-slate);
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.45;
}

.pricing-location-panel {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: #0b1524;
    color: #dbeafe;
}

.pricing-location-panel div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 20px;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.45;
}

.pricing-location-panel div:last-child {
    border-bottom: 0;
}

.pricing-location-panel .is-heading {
    background: #13233a;
    color: #fff;
    font-size: 1.22rem;
    font-weight: 950;
}

.pricing-example-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}

.pricing-example-card {
    min-height: 300px;
    padding: 22px;
}

.pricing-example-card h3 {
    color: var(--pricing-ink);
    font-size: 1.18rem;
    font-weight: 950;
}

.pricing-example-prices {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    border-top: 1px solid var(--pricing-line);
    border-bottom: 1px solid var(--pricing-line);
    padding: 18px 0;
}

.pricing-example-prices strong,
.pricing-example-prices b {
    color: var(--pricing-ink);
    font-size: 1.36rem;
    font-weight: 950;
    line-height: 1;
}

.pricing-example-prices b {
    color: var(--pricing-green);
}

.pricing-terms-grid {
    align-items: center;
}

.pricing-terms-grid ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-terms-grid li {
    border-left: 3px solid var(--pricing-blue);
    border-radius: 0 8px 8px 0;
    background: #fff;
    padding: 14px 16px;
    color: var(--pricing-muted);
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.52;
    box-shadow: 0 18px 58px -50px rgba(8, 18, 36, 0.42);
}

.pricing-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.pricing-faq-grid article {
    padding: 24px;
}

@media (max-width: 1180px) {
    .pricing-model-grid,
    .pricing-card-grid,
    .pricing-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-example-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pricing-hardware-grid,
    .pricing-overlap-grid,
    .pricing-branch-grid,
    .pricing-terms-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .pricing-hero {
        min-height: 0;
        padding: 108px 0 58px;
    }

    .pricing-hero-bg {
        width: 100%;
        opacity: 0.22;
        object-fit: cover;
    }

    .pricing-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .pricing-section-heading h2 {
        font-size: 2.65rem;
    }

    .pricing-package-grid {
        grid-template-columns: 1fr;
    }

    .pricing-table-wrap {
        overflow: hidden;
    }

    .pricing-table {
        min-width: 0;
    }

    .pricing-table thead {
        display: none;
    }

    .pricing-table tbody,
    .pricing-table tr,
    .pricing-table td {
        display: block;
        width: 100%;
    }

    .pricing-table tr {
        border-bottom: 1px solid var(--pricing-line);
        padding: 14px;
    }

    .pricing-table tr:last-child {
        border-bottom: 0;
    }

    .pricing-table td {
        border-bottom: 0;
        padding: 6px 0;
    }

    .pricing-table td::before {
        display: block;
        margin-bottom: 4px;
        color: var(--pricing-muted);
        font-size: 0.68rem;
        font-weight: 950;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .pricing-table td:nth-child(1)::before {
        content: "Hardware";
    }

    .pricing-table td:nth-child(2)::before {
        content: "Upfront price";
    }

    .pricing-table td:nth-child(3)::before {
        content: "Notes";
    }

    .pricing-table td:nth-child(2) {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .pricing-hero {
        padding: 94px 0 46px;
    }

    .pricing-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .pricing-hero-copy p {
        font-size: 1.02rem;
    }

    .pricing-model-section,
    .pricing-packages-section,
    .pricing-hardware-section,
    .pricing-options-section,
    .pricing-overlap-section,
    .pricing-branch-section,
    .pricing-examples-section,
    .pricing-terms-section,
    .pricing-faq-section {
        padding: 52px 0;
    }

    .pricing-section-heading h2 {
        font-size: 2.15rem;
    }

    .pricing-badge-row,
    .pricing-model-grid,
    .pricing-card-grid,
    .pricing-example-grid,
    .pricing-faq-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pricing-badge-row span {
        justify-content: center;
        text-align: center;
    }

    .pricing-package-card,
    .pricing-price-card,
    .pricing-model-card,
    .pricing-example-card,
    .pricing-faq-grid article,
    .pricing-overlap-list article {
        padding: 20px;
    }

    .pricing-package-card {
        min-height: 0;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 14px;
    }
}

/* Pricing page v3 - premium software pricing */
.pricing-page-redesign {
    --pricing-ink: #07111f;
    --pricing-muted: #5f6b7c;
    --pricing-soft: #f6f8fc;
    --pricing-panel: #ffffff;
    --pricing-line: #dce4f0;
    --pricing-dark: #050b17;
    --pricing-dark-2: #0b1424;
    --pricing-purple: #6d4cff;
    --pricing-purple-2: #9aa4ff;
    --pricing-orange: #ff8a2a;
    --pricing-green: #11a875;
    background: #ffffff;
    color: var(--pricing-ink);
}

.pricing-page-redesign .button svg,
.pricing-page-redesign .pricing-card-icon svg,
.pricing-page-redesign .pricing-hero-proof svg,
.pricing-page-redesign .pricing-platform-card svg,
.pricing-page-redesign .pricing-package-card li svg,
.pricing-page-redesign .pricing-example-card li svg,
.pricing-page-redesign .pricing-command-card li svg,
.pricing-page-redesign .pricing-text-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.pricing-page-redesign .pricing-eyebrow {
    display: inline-flex;
    margin: 0;
    color: var(--pricing-purple);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pricing-page-redesign .pricing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 620px;
    padding: 108px 0 92px;
    color: #fff;
    background:
        radial-gradient(circle at 75% 42%, rgba(109, 76, 255, 0.48), transparent 28%),
        radial-gradient(circle at 93% 18%, rgba(255, 138, 42, 0.22), transparent 21%),
        linear-gradient(135deg, #040914 0%, #07101f 52%, #0b1324 100%);
}

.pricing-page-redesign .pricing-hero::before,
.pricing-page-redesign .pricing-hero::after {
    display: none;
}

.pricing-page-redesign .pricing-hero-glow {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(18px);
    pointer-events: none;
}

.pricing-page-redesign .pricing-hero-glow-purple {
    top: 155px;
    right: 17%;
    width: 430px;
    height: 430px;
    background: rgba(109, 76, 255, 0.38);
}

.pricing-page-redesign .pricing-hero-glow-orange {
    top: 72px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: rgba(255, 138, 42, 0.2);
}

.pricing-page-redesign .pricing-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(440px, 1.08fr);
    gap: 48px;
    align-items: center;
}

.pricing-page-redesign .pricing-hero-copy {
    max-width: 720px;
}

.pricing-page-redesign .pricing-hero-copy h1,
.pricing-page-redesign .pricing-section-heading h2,
.pricing-page-redesign .pricing-package-card h3,
.pricing-page-redesign .pricing-price-card h3,
.pricing-page-redesign .pricing-overlap-list h3,
.pricing-page-redesign .pricing-command-card strong,
.pricing-page-redesign .pricing-example-card h3,
.pricing-page-redesign .pricing-faq-grid h3,
.pricing-page-redesign .pricing-final-card h2 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.04;
}

.pricing-page-redesign .pricing-hero-copy h1 {
    margin-top: 20px;
    color: #fff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
}

.pricing-page-redesign .pricing-hero-copy p:not(.pricing-eyebrow) {
    max-width: 660px;
    margin: 24px 0 0;
    color: rgba(245, 248, 255, 0.84);
    font-size: 1.17rem;
    font-weight: 650;
    line-height: 1.62;
}

.pricing-page-redesign .pricing-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.pricing-page-redesign .pricing-hero .button {
    min-height: 58px;
    border-radius: 9px;
    padding: 0 26px;
    font-size: 0.94rem;
    font-weight: 900;
}

.pricing-page-redesign .pricing-hero .button-primary,
.pricing-page-redesign .pricing-card-button,
.pricing-page-redesign .pricing-final-card .button-primary {
    border: 0;
    background: linear-gradient(135deg, #7a4cff 0%, #5234e9 100%);
    color: #fff;
    box-shadow: 0 18px 42px -22px rgba(109, 76, 255, 0.8);
}

.pricing-page-redesign .pricing-hero .button-secondary,
.pricing-page-redesign .pricing-final-card .button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.pricing-page-redesign .pricing-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-page-redesign .pricing-hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.83rem;
    font-weight: 850;
}

.pricing-page-redesign .pricing-hero-proof svg {
    width: 20px;
    height: 20px;
    color: var(--pricing-purple-2);
}

.pricing-page-redesign .pricing-hero-visual {
    position: relative;
    min-height: 420px;
}

.pricing-page-redesign .pricing-hero-device {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 68% 42%, rgba(120, 74, 255, 0.42), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    box-shadow: 0 36px 96px -58px rgba(0, 0, 0, 0.95);
}

.pricing-page-redesign .pricing-hero-device::after {
    content: "";
    position: absolute;
    inset: auto 10% 2% 10%;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    filter: blur(18px);
}

.pricing-page-redesign .pricing-hero-device img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.1);
}

.pricing-page-redesign .pricing-hero-chip {
    position: absolute;
    right: 22px;
    bottom: 24px;
    display: flex;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(5, 11, 23, 0.72);
    padding: 8px;
    color: #fff;
    box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(16px);
}

.pricing-page-redesign .pricing-hero-chip span {
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.74rem;
    font-weight: 850;
}

.pricing-page-redesign .pricing-platform-strip {
    position: relative;
    z-index: 2;
    margin-top: -76px;
    padding-bottom: 78px;
    background: linear-gradient(180deg, transparent 0 64px, #fff 64px 100%);
}

.pricing-page-redesign .pricing-platform-card {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: center;
    min-height: 112px;
    border: 1px solid rgba(220, 228, 240, 0.9);
    border-radius: 18px;
    background: #fff;
    padding: 24px 30px;
    box-shadow: 0 28px 80px -58px rgba(7, 17, 31, 0.7);
}

.pricing-page-redesign .pricing-platform-card strong,
.pricing-page-redesign .pricing-platform-card div span {
    display: block;
    color: var(--pricing-ink);
    font-size: 1.42rem;
    font-weight: 950;
    line-height: 1.12;
}

.pricing-page-redesign .pricing-platform-card ul {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-page-redesign .pricing-platform-card li {
    display: grid;
    justify-items: center;
    gap: 9px;
    min-height: 66px;
    border-left: 1px solid var(--pricing-line);
    color: #34245f;
    font-size: 0.78rem;
    font-weight: 760;
}

.pricing-page-redesign .pricing-platform-card li:first-child {
    border-left: 0;
}

.pricing-page-redesign .pricing-platform-card svg {
    width: 21px;
    height: 21px;
    color: var(--pricing-purple);
}

.pricing-page-redesign .pricing-model-section,
.pricing-page-redesign .pricing-packages-section,
.pricing-page-redesign .pricing-options-section,
.pricing-page-redesign .pricing-overlap-section,
.pricing-page-redesign .pricing-location-section,
.pricing-page-redesign .pricing-examples-section,
.pricing-page-redesign .pricing-hardware-section,
.pricing-page-redesign .pricing-terms-section,
.pricing-page-redesign .pricing-faq-section,
.pricing-page-redesign .pricing-final-cta {
    padding: 86px 0;
    background: #fff;
}

.pricing-page-redesign .pricing-model-section,
.pricing-page-redesign .pricing-modules-section,
.pricing-page-redesign .pricing-location-section,
.pricing-page-redesign .pricing-onboarding-section,
.pricing-page-redesign .pricing-terms-section {
    background: var(--pricing-soft);
}

.pricing-page-redesign .pricing-onboarding-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-page-redesign .pricing-onboarding-notes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid var(--pricing-orange);
    background: #fff;
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    color: var(--pricing-muted);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.52;
    box-shadow: 0 18px 58px -50px rgba(8, 18, 36, 0.42);
}

.pricing-page-redesign .pricing-onboarding-notes li svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 3px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    color: var(--pricing-green);
}

@media (max-width: 900px) {
    .pricing-page-redesign .pricing-onboarding-notes {
        grid-template-columns: 1fr;
    }
}

.pricing-page-redesign .pricing-packages-section {
    padding-top: 34px;
}

.pricing-page-redesign .pricing-section-heading {
    max-width: 900px;
}

.pricing-page-redesign .pricing-section-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.9fr);
    gap: 56px;
    align-items: end;
    max-width: none;
}

.pricing-page-redesign .pricing-section-heading h2 {
    margin-top: 14px;
    color: var(--pricing-ink);
    font-size: 3.2rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-section-heading p:not(.pricing-eyebrow) {
    max-width: 700px;
    margin: 16px 0 0;
    color: var(--pricing-muted);
    font-size: 1rem;
    font-weight: 670;
    line-height: 1.62;
}

.pricing-page-redesign .pricing-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.pricing-page-redesign .pricing-model-card,
.pricing-page-redesign .pricing-package-card,
.pricing-page-redesign .pricing-price-card,
.pricing-page-redesign .pricing-overlap-list article,
.pricing-page-redesign .pricing-command-card,
.pricing-page-redesign .pricing-example-card,
.pricing-page-redesign .pricing-hardware-cta,
.pricing-page-redesign .pricing-faq-grid article {
    border: 1px solid var(--pricing-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 74px -62px rgba(7, 17, 31, 0.55);
}

.pricing-page-redesign .pricing-model-card {
    min-height: 218px;
    padding: 28px;
}

.pricing-page-redesign .pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #f1edff;
    color: var(--pricing-purple);
}

.pricing-page-redesign .pricing-model-card:nth-child(2) .pricing-card-icon,
.pricing-page-redesign .pricing-price-card:nth-child(2n) .pricing-card-icon {
    background: #eafaf3;
    color: var(--pricing-green);
}

.pricing-page-redesign .pricing-model-card:nth-child(3) .pricing-card-icon,
.pricing-page-redesign .pricing-price-card:nth-child(3n) .pricing-card-icon {
    background: #fff1e7;
    color: var(--pricing-orange);
}

.pricing-page-redesign .pricing-model-card h3,
.pricing-page-redesign .pricing-price-card h3,
.pricing-page-redesign .pricing-faq-grid h3 {
    color: var(--pricing-ink);
    font-size: 1.08rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-model-card p,
.pricing-page-redesign .pricing-price-card p,
.pricing-page-redesign .pricing-faq-grid p {
    margin: 12px 0 0;
    color: var(--pricing-muted);
    font-size: 0.92rem;
    font-weight: 670;
    line-height: 1.55;
}

.pricing-page-redesign .pricing-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 36px;
}

.pricing-page-redesign .pricing-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 32px;
}

.pricing-page-redesign .pricing-package-card.is-featured {
    border-color: rgba(109, 76, 255, 0.58);
    box-shadow:
        0 30px 84px -54px rgba(109, 76, 255, 0.8),
        0 0 0 1px rgba(109, 76, 255, 0.1) inset;
    transform: translateY(-10px);
}

.pricing-page-redesign .pricing-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(135deg, #7a4cff, #5637ee);
    padding: 8px 14px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 950;
    white-space: nowrap;
}

.pricing-page-redesign .pricing-package-card h3 {
    color: var(--pricing-ink);
    font-size: 1.32rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-package-card > p {
    min-height: 48px;
    margin: 10px 0 0;
    color: var(--pricing-muted);
    font-size: 0.92rem;
    font-weight: 690;
    line-height: 1.45;
}

.pricing-page-redesign .pricing-plan-price,
.pricing-page-redesign .pricing-mini-price {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 24px;
}

.pricing-page-redesign .pricing-plan-price strong {
    color: var(--pricing-ink);
    font-size: 3.2rem;
    font-weight: 950;
    line-height: 0.9;
}

.pricing-page-redesign .pricing-plan-price span,
.pricing-page-redesign .pricing-mini-price span {
    color: var(--pricing-muted);
    font-size: 0.85rem;
    font-weight: 850;
}

.pricing-page-redesign .pricing-package-card ul,
.pricing-page-redesign .pricing-example-card ul,
.pricing-page-redesign .pricing-command-card ul {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.pricing-page-redesign .pricing-package-card li,
.pricing-page-redesign .pricing-example-card li,
.pricing-page-redesign .pricing-command-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #26364d;
    font-size: 0.91rem;
    font-weight: 760;
    line-height: 1.4;
}

.pricing-page-redesign .pricing-package-card li svg,
.pricing-page-redesign .pricing-example-card li svg,
.pricing-page-redesign .pricing-command-card li svg {
    color: var(--pricing-green);
}

.pricing-page-redesign .pricing-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: auto;
    border: 1px solid rgba(109, 76, 255, 0.65);
    border-radius: 10px;
    background: #fff;
    color: var(--pricing-purple);
    font-size: 0.9rem;
    font-weight: 950;
    text-decoration: none;
}

.pricing-page-redesign .pricing-package-card:not(.is-featured) .pricing-card-button {
    background: #fff;
    color: var(--pricing-purple);
    box-shadow: none;
}

.pricing-page-redesign .pricing-package-card.is-featured .pricing-card-button {
    border: 0;
    background: linear-gradient(135deg, #7a4cff 0%, #5234e9 100%);
    color: #fff;
    box-shadow: 0 18px 42px -24px rgba(109, 76, 255, 0.82);
}

.pricing-page-redesign .pricing-aside-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}

.pricing-page-redesign .pricing-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pricing-page-redesign .pricing-addons-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-page-redesign .pricing-price-card {
    min-height: 230px;
    padding: 24px;
}

.pricing-page-redesign .pricing-mini-price {
    align-items: baseline;
    margin-top: 18px;
}

.pricing-page-redesign .pricing-mini-price strong {
    color: var(--pricing-ink);
    font-size: 1.68rem;
    font-weight: 950;
    line-height: 1;
}

.pricing-page-redesign .pricing-overlap-grid,
.pricing-page-redesign .pricing-location-grid,
.pricing-page-redesign .pricing-hardware-lite,
.pricing-page-redesign .pricing-terms-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(540px, 1fr);
    gap: 54px;
    align-items: center;
}

.pricing-page-redesign .pricing-overlap-list {
    display: grid;
    gap: 14px;
}

.pricing-page-redesign .pricing-overlap-list article {
    padding: 24px 26px;
}

.pricing-page-redesign .pricing-overlap-list h3 {
    color: var(--pricing-ink);
    font-size: 1.06rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-overlap-list p,
.pricing-page-redesign .pricing-overlap-list strong {
    display: block;
    margin: 9px 0 0;
    color: var(--pricing-muted);
    font-size: 0.92rem;
    font-weight: 680;
    line-height: 1.5;
}

.pricing-page-redesign .pricing-overlap-list strong {
    color: var(--pricing-ink);
    font-weight: 900;
}

.pricing-page-redesign .pricing-command-card {
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 12%, rgba(109, 76, 255, 0.28), transparent 36%),
        linear-gradient(145deg, #0b1526, #07101f);
    color: #fff;
}

.pricing-page-redesign .pricing-command-card > div {
    padding: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pricing-page-redesign .pricing-command-card span:first-child {
    display: block;
    color: var(--pricing-purple-2);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pricing-page-redesign .pricing-command-card strong {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-command-card ul {
    margin: 0;
    padding: 10px 30px 30px;
}

.pricing-page-redesign .pricing-command-card li {
    color: rgba(255, 255, 255, 0.78);
}

.pricing-page-redesign .pricing-command-card li strong {
    margin: 0 0 3px;
    font-size: 0.96rem;
}

.pricing-page-redesign .pricing-example-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
}

.pricing-page-redesign .pricing-example-card {
    min-height: 312px;
    padding: 24px;
}

.pricing-page-redesign .pricing-example-card h3 {
    color: var(--pricing-ink);
    font-size: 1.06rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-example-card > strong {
    display: block;
    margin-top: 18px;
    color: var(--pricing-purple);
    font-size: 1.42rem;
    font-weight: 950;
    line-height: 1;
}

.pricing-page-redesign .pricing-example-card p {
    min-height: 66px;
    margin: 14px 0 0;
    color: var(--pricing-muted);
    font-size: 0.88rem;
    font-weight: 690;
    line-height: 1.48;
}

.pricing-page-redesign .pricing-hardware-section {
    background:
        linear-gradient(180deg, #fff 0%, #f8faff 100%);
}

.pricing-page-redesign .pricing-hardware-cta {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: center;
    padding: 26px;
}

.pricing-page-redesign .pricing-hardware-cta img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.pricing-page-redesign .pricing-hardware-cta strong {
    display: block;
    color: var(--pricing-ink);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.18;
}

.pricing-page-redesign .pricing-hardware-cta span {
    display: block;
    margin-top: 12px;
    color: var(--pricing-muted);
    font-size: 0.94rem;
    font-weight: 690;
    line-height: 1.55;
}

.pricing-page-redesign .pricing-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--pricing-purple);
    font-weight: 950;
    text-decoration: none;
}

.pricing-page-redesign .pricing-terms-grid ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-page-redesign .pricing-terms-grid li {
    min-height: 120px;
    border: 1px solid var(--pricing-line);
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    color: #33445c;
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.5;
    box-shadow: 0 20px 62px -56px rgba(7, 17, 31, 0.52);
}

.pricing-page-redesign .pricing-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.pricing-page-redesign .pricing-faq-grid article {
    min-height: 210px;
    padding: 24px;
}

.pricing-page-redesign .pricing-final-cta {
    padding: 54px 0 70px;
    background: #fff;
}

.pricing-page-redesign .pricing-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 16%, rgba(109, 76, 255, 0.32), transparent 32%),
        linear-gradient(145deg, #07101f, #0b1526);
    padding: 48px;
    color: #fff;
    box-shadow: 0 34px 88px -68px rgba(7, 17, 31, 0.95);
}

.pricing-page-redesign .pricing-final-card h2 {
    color: #fff;
    font-size: 2.35rem;
    font-weight: 950;
}

.pricing-page-redesign .pricing-final-card p {
    max-width: 660px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1rem;
    font-weight: 690;
    line-height: 1.58;
}

.pricing-page-redesign .pricing-final-card .final-actions {
    display: flex;
    gap: 14px;
    align-items: center;
}

.pricing-page-redesign .pricing-final-card .button {
    min-height: 56px;
    border-radius: 9px;
    padding: 0 26px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .pricing-page-redesign .pricing-hero-layout,
    .pricing-page-redesign .pricing-platform-card,
    .pricing-page-redesign .pricing-section-heading-split,
    .pricing-page-redesign .pricing-aside-grid,
    .pricing-page-redesign .pricing-overlap-grid,
    .pricing-page-redesign .pricing-location-grid,
    .pricing-page-redesign .pricing-hardware-lite,
    .pricing-page-redesign .pricing-terms-grid {
        grid-template-columns: 1fr;
    }

    .pricing-page-redesign .pricing-hero-copy {
        max-width: 820px;
    }

    .pricing-page-redesign .pricing-hero-visual {
        max-width: 760px;
    }

    .pricing-page-redesign .pricing-platform-card ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 18px;
    }

    .pricing-page-redesign .pricing-platform-card li:nth-child(4n+1) {
        border-left: 0;
    }

    .pricing-page-redesign .pricing-addons-grid,
    .pricing-page-redesign .pricing-card-grid,
    .pricing-page-redesign .pricing-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-page-redesign .pricing-example-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .pricing-page-redesign .pricing-hero {
        min-height: 0;
        padding: 104px 0 112px;
    }

    .pricing-page-redesign .pricing-hero-layout {
        gap: 34px;
    }

    .pricing-page-redesign .pricing-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .pricing-page-redesign .pricing-hero-copy p:not(.pricing-eyebrow) {
        font-size: 1.04rem;
    }

    .pricing-page-redesign .pricing-hero-device {
        min-height: 330px;
    }

    .pricing-page-redesign .pricing-platform-strip {
        margin-top: -46px;
    }

    .pricing-page-redesign .pricing-platform-card {
        padding: 22px;
    }

    .pricing-page-redesign .pricing-platform-card ul,
    .pricing-page-redesign .pricing-package-grid,
    .pricing-page-redesign .pricing-model-grid {
        grid-template-columns: 1fr;
    }

    .pricing-page-redesign .pricing-platform-card li {
        border-left: 0;
        border-top: 1px solid var(--pricing-line);
        padding-top: 14px;
    }

    .pricing-page-redesign .pricing-platform-card li:first-child {
        border-top: 0;
    }

    .pricing-page-redesign .pricing-package-card.is-featured {
        transform: none;
    }

    .pricing-page-redesign .pricing-section-heading h2 {
        font-size: 2.45rem;
    }

    .pricing-page-redesign .pricing-model-section,
    .pricing-page-redesign .pricing-packages-section,
    .pricing-page-redesign .pricing-options-section,
    .pricing-page-redesign .pricing-overlap-section,
    .pricing-page-redesign .pricing-location-section,
    .pricing-page-redesign .pricing-examples-section,
    .pricing-page-redesign .pricing-hardware-section,
    .pricing-page-redesign .pricing-terms-section,
    .pricing-page-redesign .pricing-faq-section {
        padding: 66px 0;
    }

    .pricing-page-redesign .pricing-hardware-cta,
    .pricing-page-redesign .pricing-final-card {
        grid-template-columns: 1fr;
    }

    .pricing-page-redesign .pricing-final-card .final-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .pricing-page-redesign .pricing-hero {
        padding: 88px 0 78px;
    }

    .pricing-page-redesign .pricing-hero-copy h1 {
        font-size: var(--marketing-hero-h1-size);
        line-height: var(--marketing-hero-h1-line-height);
    }

    .pricing-page-redesign .pricing-hero-copy {
        position: relative;
        z-index: 2;
    }

    .pricing-page-redesign .pricing-hero .hero-actions,
    .pricing-page-redesign .pricing-final-card .final-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pricing-page-redesign .pricing-hero .button,
    .pricing-page-redesign .pricing-final-card .button {
        width: 100%;
        justify-content: center;
    }

    .pricing-page-redesign .pricing-hero-proof {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .pricing-page-redesign .pricing-hero-visual {
        position: absolute;
        top: 132px;
        right: -118px;
        z-index: 1;
        width: 430px;
        min-height: 270px;
        opacity: 0.28;
        pointer-events: none;
    }

    .pricing-page-redesign .pricing-hero-device {
        min-height: 270px;
        border-radius: 18px;
        background: transparent;
        box-shadow: none;
    }

    .pricing-page-redesign .pricing-hero-device img {
        transform: scale(1.22);
    }

    .pricing-page-redesign .pricing-hero-chip {
        display: none;
    }

    .pricing-page-redesign .pricing-platform-card strong,
    .pricing-page-redesign .pricing-platform-card div span {
        font-size: 1.24rem;
    }

    .pricing-page-redesign .pricing-section-heading h2 {
        font-size: 2.08rem;
    }

    .pricing-page-redesign .pricing-addons-grid,
    .pricing-page-redesign .pricing-card-grid,
    .pricing-page-redesign .pricing-example-grid,
    .pricing-page-redesign .pricing-faq-grid,
    .pricing-page-redesign .pricing-terms-grid ul {
        grid-template-columns: 1fr;
    }

    .pricing-page-redesign .pricing-model-card,
    .pricing-page-redesign .pricing-package-card,
    .pricing-page-redesign .pricing-price-card,
    .pricing-page-redesign .pricing-overlap-list article,
    .pricing-page-redesign .pricing-command-card > div,
    .pricing-page-redesign .pricing-example-card,
    .pricing-page-redesign .pricing-hardware-cta,
    .pricing-page-redesign .pricing-faq-grid article {
        padding: 22px;
    }

    .pricing-page-redesign .pricing-package-card {
        min-height: 0;
    }

    .pricing-page-redesign .pricing-plan-price strong {
        font-size: 2.75rem;
    }

    .pricing-page-redesign .pricing-command-card ul {
        padding: 8px 22px 22px;
    }

    .pricing-page-redesign .pricing-final-card {
        padding: 30px 24px;
    }

    .pricing-page-redesign .pricing-final-card h2 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Resources page (premium) — /resources
   ========================================================================== */

.resources-premium-page {
    --resources-bg: #f4f6fb;
    --resources-soft: #eef1f8;
    --resources-ink: #08111f;
    --resources-ink-soft: #1f2a40;
    --resources-muted: #5b667c;
    --resources-line: #dde3ef;
    --resources-violet: #6849ff;
    --resources-violet-2: #8d78ff;
    --resources-violet-soft: #e9e3ff;
    --resources-amber: #ff9a3c;
    --resources-amber-soft: #fff0dc;
    --resources-green: #16b187;
    --resources-green-soft: #ddf6ec;
    --resources-blue: #3a6aff;
    --resources-blue-soft: #e0e9ff;
    --resources-dark: #0b1326;
    --resources-dark-2: #050b18;
    background: var(--resources-bg);
    color: var(--resources-ink);
}

.resources-premium-page .nav-links a[aria-current="page"] {
    color: var(--resources-violet);
}

.resources-main {
    overflow: hidden;
    background: var(--resources-bg);
}

.resources-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--resources-violet);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.resources-kicker-light {
    color: #b8a8ff;
}

.resources-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #c7b8ff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.resources-eyebrow span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--resources-amber);
    box-shadow: 0 0 0 5px rgba(255, 154, 60, 0.18);
}

.resources-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.resources-button span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
}

.resources-button:hover span[aria-hidden="true"] {
    transform: translateX(3px);
}

.resources-premium-page .resources-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #6849ff 0%, #8d78ff 100%);
    box-shadow: 0 24px 48px -22px rgba(104, 73, 255, 0.65);
}

.resources-premium-page .resources-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 30px 60px -22px rgba(104, 73, 255, 0.7);
    color: #ffffff;
}

.resources-premium-page .resources-button-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.resources-premium-page .resources-button-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.resources-premium-page .resources-button-dark {
    color: #ffffff;
    background: var(--resources-ink);
}

.resources-premium-page .resources-button-dark:hover {
    background: #1a253c;
    color: #ffffff;
}

.resources-premium-page .resources-button-light {
    color: var(--resources-ink);
    background: #ffffff;
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.35);
}

.resources-premium-page .resources-button-light:hover {
    transform: translateY(-1px);
    color: var(--resources-violet);
}

.resources-premium-page .resources-button-ghost {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.resources-premium-page .resources-button-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.resources-premium-page .resources-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--resources-violet);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.18s ease;
}

.resources-premium-page .resources-link:hover {
    gap: 10px;
    color: var(--resources-violet-2);
}

/* HERO */
.resources-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 0 92px;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 12%, rgba(141, 120, 255, 0.32), transparent 38%),
        radial-gradient(circle at 12% 88%, rgba(58, 106, 255, 0.18), transparent 42%),
        linear-gradient(140deg, #131334 0%, #0a1226 50%, #04081a 100%);
}

.resources-hero-glow {
    position: absolute;
    inset: -30% 0 auto -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(104, 73, 255, 0.34), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
}

.resources-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.resources-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(540px, 1.05fr);
    gap: 80px;
    align-items: center;
}

.resources-hero-copy h1 {
    margin: 0;
    max-width: 720px;
    color: #ffffff;
    font-size: var(--marketing-hero-h1-size);
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height);
    letter-spacing: -0.005em;
}

.resources-hero-copy h1 span {
    background: linear-gradient(120deg, #b39bff 0%, #ffb676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.resources-hero-subtitle {
    max-width: 640px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.14rem;
    line-height: 1.7;
}

.resources-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.resources-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 44px 0 0;
    padding: 22px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.resources-stat-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resources-stat-row dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resources-stat-row dd {
    margin: 0;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Hero visual - library mockup */
.resources-hero-visual {
    position: relative;
}

.resources-library-shell {
    position: relative;
    padding: 26px 26px 24px;
    border-radius: 26px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 10, 24, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(141, 120, 255, 0.1) inset;
    color: #ffffff;
}

.resources-library-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 27px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(141, 120, 255, 0.5), rgba(58, 106, 255, 0.1) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.resources-library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.resources-library-head > div span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.resources-library-head > div strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-library-head p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(22, 177, 135, 0.18);
    color: #71f0b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.resources-library-head p::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #21c986;
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.25);
}

.resources-library-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.resources-library-search-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.55);
}

.resources-library-search-icon svg {
    width: 100%;
    height: 100%;
}

.resources-library-search input {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    outline: none;
    cursor: default;
}

.resources-library-search-key {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    font-weight: 700;
}

.resources-library-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 18px;
}

.resources-library-pills span {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    font-weight: 700;
}

.resources-library-pills span.is-active {
    background: rgba(141, 120, 255, 0.18);
    border-color: rgba(141, 120, 255, 0.45);
    color: #ffffff;
}

.resources-library-list {
    display: grid;
    gap: 10px;
}

.resources-library-list article {
    position: relative;
    padding: 14px 16px 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border 0.18s ease;
}

.resources-library-list article:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}

.resources-library-tag {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: rgba(141, 120, 255, 0.18);
    color: #c7b8ff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.resources-library-tag.is-orange {
    background: rgba(255, 154, 60, 0.18);
    color: #ffc188;
}

.resources-library-tag.is-green {
    background: rgba(22, 177, 135, 0.2);
    color: #71f0b8;
}

.resources-library-tag.is-violet {
    background: rgba(58, 106, 255, 0.22);
    color: #97b5ff;
}

.resources-library-list article b {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-library-list article p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    line-height: 1.5;
}

.resources-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}

.resources-chip-row li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.84rem;
    font-weight: 700;
}

.resources-chip-row li span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--resources-violet-2);
    box-shadow: 0 0 0 3px rgba(141, 120, 255, 0.22);
}

/* Section headings (light pages) */
.resources-section-heading {
    max-width: 760px;
    margin: 0 0 44px;
}

.resources-section-heading h2 {
    margin: 0;
    color: var(--resources-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.06;
}

.resources-section-heading p {
    margin: 18px 0 0;
    color: var(--resources-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.resources-section-heading-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.resources-section-heading-row > div {
    max-width: 700px;
}

.resources-section-heading-dark h2 {
    color: #ffffff;
}

.resources-section-heading-dark p {
    color: rgba(255, 255, 255, 0.7);
}

/* BANNER */
.resources-banner-section {
    padding: 84px 0 0;
    background: var(--resources-bg);
}

.resources-banner {
    position: relative;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 50px 120px -60px rgba(8, 18, 36, 0.45);
}

.resources-banner img {
    display: block;
    width: 100%;
    height: clamp(360px, 52vw, 560px);
    object-fit: cover;
    object-position: center 38%;
}

.resources-banner figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px 56px 56px;
    background: linear-gradient(180deg, rgba(5, 8, 22, 0) 30%, rgba(5, 8, 22, 0.86) 100%);
    color: #ffffff;
}

.resources-banner figcaption p {
    margin: 0 0 12px;
    color: #c7b8ff;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.resources-banner figcaption h2 {
    margin: 0;
    max-width: 740px;
    color: #ffffff;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.06;
}

.resources-banner figcaption span {
    display: block;
    max-width: 640px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.6;
}

.resources-banner figcaption i {
    position: absolute;
    inset: auto 36px 36px auto;
    display: block;
    width: 88px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--resources-violet) 0%, var(--resources-amber) 100%);
}

/* RESOURCE TYPES */
.resources-types-section {
    padding: 96px 0 80px;
    background: var(--resources-bg);
}

.resources-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resources-type-card {
    position: relative;
    padding: 30px 28px 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--resources-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.resources-type-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(104, 73, 255, 0.35), rgba(58, 106, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.resources-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.35);
}

.resources-type-card:hover::before {
    opacity: 1;
}

.resources-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--resources-violet-soft), #ffffff);
    color: var(--resources-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.resources-type-icon svg {
    width: 24px;
    height: 24px;
}

.resources-type-card:nth-child(2) .resources-type-icon {
    background: linear-gradient(150deg, var(--resources-amber-soft), #ffffff);
    color: var(--resources-amber);
    border-color: rgba(255, 154, 60, 0.2);
}

.resources-type-card:nth-child(3) .resources-type-icon {
    background: linear-gradient(150deg, var(--resources-green-soft), #ffffff);
    color: var(--resources-green);
    border-color: rgba(22, 177, 135, 0.2);
}

.resources-type-card:nth-child(5) .resources-type-icon {
    background: linear-gradient(150deg, var(--resources-blue-soft), #ffffff);
    color: var(--resources-blue);
    border-color: rgba(58, 106, 255, 0.2);
}

.resources-type-card h3 {
    margin: 0 0 10px;
    color: var(--resources-ink);
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-type-card p {
    margin: 0;
    color: var(--resources-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.resources-type-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    color: var(--resources-violet);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.005em;
}

.resources-type-link i {
    font-style: normal;
    transition: transform 0.18s ease;
}

.resources-type-card:hover .resources-type-link i {
    transform: translateX(3px);
}

/* FEATURED GUIDES */
.resources-featured-section {
    padding: 36px 0 100px;
    background: var(--resources-bg);
}

.resources-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.resources-featured-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--resources-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.resources-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 80px -40px rgba(8, 18, 36, 0.4);
    border-color: rgba(104, 73, 255, 0.25);
}

.resources-featured-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--resources-soft);
}

.resources-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.resources-featured-card:hover .resources-featured-media img {
    transform: scale(1.04);
}

.resources-featured-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(8, 17, 31, 0.88);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resources-featured-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 26px 28px;
}

.resources-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    color: var(--resources-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.resources-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.resources-featured-meta svg {
    width: 14px;
    height: 14px;
    color: var(--resources-violet);
}

.resources-featured-body h3 {
    margin: 0;
    color: var(--resources-ink);
    font-size: 1.32rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

.resources-featured-body p {
    margin: 0;
    color: var(--resources-muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.resources-featured-body strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--resources-violet);
    font-size: 0.96rem;
    font-weight: 800;
}

.resources-featured-body strong span {
    transition: transform 0.18s ease;
}

.resources-featured-card:hover .resources-featured-body strong span {
    transform: translateX(4px);
}

/* PLAYBOOKS */
.resources-playbooks-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--resources-bg) 0%, var(--resources-soft) 100%);
}

.resources-playbooks-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

.resources-playbooks-copy h2 {
    margin: 0;
    color: var(--resources-ink);
    font-size: clamp(2.1rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.05;
}

.resources-playbooks-copy p {
    margin: 22px 0 28px;
    color: var(--resources-muted);
    font-size: 1.04rem;
    line-height: 1.7;
    max-width: 480px;
}

.resources-playbook-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
}

.resources-playbook-progress span {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(104, 73, 255, 0.16);
}

.resources-playbook-progress span:first-child {
    background: linear-gradient(90deg, var(--resources-violet) 0%, var(--resources-violet-2) 100%);
}

.resources-playbook-progress span:nth-child(2) {
    background: linear-gradient(90deg, var(--resources-violet-2) 0%, rgba(141, 120, 255, 0.45) 100%);
}

.resources-playbook-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    counter-reset: playbook;
}

.resources-playbook-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--resources-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.resources-playbook-list li:hover {
    transform: translateX(4px);
    border-color: rgba(104, 73, 255, 0.3);
    box-shadow: 0 24px 50px -32px rgba(8, 18, 36, 0.35);
}

.resources-playbook-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--resources-violet) 0%, var(--resources-violet-2) 100%);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    box-shadow: 0 20px 40px -22px rgba(104, 73, 255, 0.7);
}

.resources-playbook-list h3 {
    margin: 0;
    color: var(--resources-ink);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-playbook-list p {
    margin: 6px 0 0;
    color: var(--resources-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.resources-playbook-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--resources-soft);
    color: var(--resources-ink);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.resources-playbook-list i svg {
    width: 18px;
    height: 18px;
}

.resources-playbook-list li:hover i {
    background: var(--resources-violet);
    color: #ffffff;
    transform: translateX(3px);
}

/* CALCULATOR */
.resources-calculator-section {
    padding: 100px 0;
    background: var(--resources-bg);
}

.resources-calculator-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 60px;
    align-items: center;
    padding: 64px 64px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 20%, rgba(141, 120, 255, 0.32), transparent 40%),
        linear-gradient(140deg, #1a1640 0%, #0b1226 50%, #060b18 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 60px 130px -52px rgba(11, 18, 38, 0.6);
}

.resources-calculator-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}

.resources-calc-copy {
    position: relative;
    z-index: 1;
}

.resources-calc-copy h2 {
    margin: 0;
    max-width: 460px;
    color: #ffffff;
    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.resources-calc-copy p {
    margin: 22px 0 28px;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.02rem;
    line-height: 1.7;
}

.resources-calc-board {
    position: relative;
    z-index: 1;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.5);
}

.resources-calc-board-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(8, 10, 24, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.resources-calc-board-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(141, 120, 255, 0.22);
    color: #c7b8ff;
}

.resources-calc-board-head > span svg {
    width: 22px;
    height: 22px;
}

.resources-calc-board-head > div strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.resources-calc-board-head > div p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
}

.resources-calc-board-head > b {
    color: #ffd17a;
    font-size: 1.5rem;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.resources-calc-board-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.resources-calc-board-grid article {
    padding: 16px 16px;
    border-radius: 14px;
    background: rgba(8, 10, 24, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.resources-calc-board-grid article span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.resources-calc-board-grid article strong {
    display: block;
    margin: 6px 0 4px;
    color: #ffffff;
    font-size: 1.32rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.resources-calc-board-grid article p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    line-height: 1.45;
}

.resources-calc-board-image {
    margin: 16px 0 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.resources-calc-board-image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    opacity: 0.85;
}

/* MEASURES */
.resources-measures-section {
    padding: 110px 0;
    background:
        radial-gradient(circle at 80% 12%, rgba(141, 120, 255, 0.2), transparent 38%),
        linear-gradient(150deg, #0b1326 0%, #050b18 100%);
    color: #ffffff;
}

.resources-measure-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resources-measure-card {
    position: relative;
    padding: 32px 28px 30px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: transform 0.18s ease, border 0.18s ease, background 0.18s ease;
    overflow: hidden;
}

.resources-measure-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--resources-violet-2), transparent);
    opacity: 0.4;
}

.resources-measure-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(141, 120, 255, 0.4);
}

.resources-measure-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(141, 120, 255, 0.32), rgba(141, 120, 255, 0.06));
    color: #c7b8ff;
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    border: 1px solid rgba(141, 120, 255, 0.32);
}

.resources-measure-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-measure-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* STORY */
.resources-story-section {
    padding: 110px 0;
    background: var(--resources-bg);
}

.resources-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
}

.resources-story-media {
    position: relative;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 50px 100px -52px rgba(8, 18, 36, 0.45);
}

.resources-story-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resources-story-media figcaption {
    position: absolute;
    bottom: 22px;
    left: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 17, 31, 0.88);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.resources-story-quote {
    position: relative;
    padding: 40px 0;
}

.resources-story-mark {
    display: inline-flex;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    color: var(--resources-violet);
    opacity: 0.7;
}

.resources-story-mark svg {
    width: 100%;
    height: 100%;
}

.resources-story-quote blockquote {
    margin: 0;
    color: var(--resources-ink);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.resources-story-quote cite {
    display: block;
    margin-top: 22px;
    color: var(--resources-muted);
    font-style: normal;
    font-size: 0.94rem;
    font-weight: 700;
}

.resources-story-points {
    display: grid;
    gap: 14px;
    margin: 32px 0 28px;
    padding: 0;
    list-style: none;
}

.resources-story-points li {
    position: relative;
    padding: 18px 22px 18px 26px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--resources-line);
    overflow: hidden;
}

.resources-story-points li::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 14px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--resources-violet) 0%, var(--resources-violet-2) 100%);
}

.resources-story-points strong {
    display: block;
    color: var(--resources-ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-story-points span {
    display: block;
    margin-top: 6px;
    color: var(--resources-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.resources-honesty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 154, 60, 0.12);
    border: 1px solid rgba(255, 154, 60, 0.3);
    color: #ffc188;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.resources-honesty span {
    color: var(--resources-amber);
    font-size: 1.2em;
    line-height: 1;
}

/* FRAMEWORK (replaces fake calculator) */
.resources-framework-section {
    padding: 100px 0;
    background: var(--resources-bg);
}

.resources-framework-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 60px;
    align-items: stretch;
    padding: 64px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 20%, rgba(141, 120, 255, 0.32), transparent 40%),
        linear-gradient(140deg, #1a1640 0%, #0b1226 50%, #060b18 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 60px 130px -52px rgba(11, 18, 38, 0.6);
}

.resources-framework-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}

.resources-framework-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resources-framework-copy h2 {
    margin: 0;
    max-width: 480px;
    color: #ffffff;
    font-size: clamp(1.9rem, 3.2vw, 2.55rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.resources-framework-copy p {
    margin: 22px 0 32px;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.02rem;
    line-height: 1.7;
}

.resources-framework-copy .resources-button {
    align-self: flex-start;
}

.resources-framework-board {
    position: relative;
    z-index: 1;
    padding: 24px 24px 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.5);
}

.resources-framework-board-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(8, 10, 24, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.resources-framework-board-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(141, 120, 255, 0.22);
    color: #c7b8ff;
}

.resources-framework-board-head > span svg {
    width: 22px;
    height: 22px;
}

.resources-framework-board-head > div strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.resources-framework-board-head > div p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.resources-framework-input-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.resources-framework-input-list li {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(8, 10, 24, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border 0.18s ease, background 0.18s ease;
}

.resources-framework-input-list li:hover {
    background: rgba(8, 10, 24, 0.55);
    border-color: rgba(141, 120, 255, 0.3);
}

.resources-framework-input-list strong {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-framework-input-list p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Library list cards now anchor elements */
.resources-library-list a {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border 0.18s ease, transform 0.18s ease;
}

.resources-library-list a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(141, 120, 255, 0.35);
    transform: translateX(2px);
}

/* ==========================================================================
   Guide pages (premium) — /resources/{slug}
   ========================================================================== */

.guide-premium-page {
    --guide-bg: #f6f8fc;
    --guide-soft: #eef2f9;
    --guide-ink: #0a1326;
    --guide-ink-soft: #1f2a40;
    --guide-muted: #5b667c;
    --guide-line: #dde3ef;
    --guide-violet: #6849ff;
    --guide-violet-2: #8d78ff;
    --guide-violet-soft: #e9e3ff;
    --guide-amber: #ff9a3c;
    --guide-dark: #0b1326;
    background: var(--guide-bg);
    color: var(--guide-ink);
}

.guide-main {
    overflow: hidden;
}

.guide-kicker {
    display: inline-flex;
    margin: 0 0 16px;
    color: var(--guide-violet);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.guide-kicker-light {
    color: #c7b8ff;
}

/* HERO */
.guide-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 0 80px;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 12%, rgba(141, 120, 255, 0.3), transparent 38%),
        radial-gradient(circle at 12% 88%, rgba(58, 106, 255, 0.18), transparent 42%),
        linear-gradient(140deg, #131334 0%, #0a1226 50%, #04081a 100%);
}

.guide-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.guide-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: center;
    position: relative;
}

.guide-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 700;
}

.guide-premium-page .guide-breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.18s ease;
}

.guide-premium-page .guide-breadcrumbs a:hover {
    color: #ffffff;
}

.guide-eyebrow {
    --guide-type-color: var(--guide-violet);
    --guide-type-color-2: var(--guide-violet-2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    flex-wrap: wrap;
}

.guide-eyebrow[data-type="buying-checklist"] {
    --guide-type-color: #ff9a3c;
    --guide-type-color-2: #ffb46b;
}

.guide-eyebrow[data-type="workflow-walkthrough"] {
    --guide-type-color: #16b187;
    --guide-type-color-2: #45cda4;
}

.guide-eyebrow[data-type="module-guide"] {
    --guide-type-color: #3a6aff;
    --guide-type-color-2: #6ea0ff;
}

.guide-tag-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--guide-type-color) 0%, var(--guide-type-color-2) 100%);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px -16px rgba(8, 18, 36, 0.6);
}

.guide-tag-type .guide-tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.guide-tag-type .guide-tag-icon svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
}

.guide-tag-sector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.guide-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--guide-type-color-2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.guide-hero-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    font-weight: 950;
    letter-spacing: -0.015em;
    line-height: 1.04;
    max-width: 760px;
}

.guide-hero-subtitle {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.7;
}

.guide-hero-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    margin: 36px 0 0;
    padding: 22px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.guide-hero-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guide-hero-meta dt {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guide-hero-meta dd {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.guide-hero-art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.85);
}

.guide-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
}

.guide-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 19, 38, 0.5) 100%);
    pointer-events: none;
}

/* YOU WILL LEARN */
.guide-learn-section {
    padding: 80px 0 0;
    background: var(--guide-bg);
}

.guide-learn-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    padding: 52px 52px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid var(--guide-line);
    box-shadow: 0 40px 80px -52px rgba(8, 18, 36, 0.3);
}

.guide-learn-panel h2 {
    margin: 0;
    color: var(--guide-ink);
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.guide-learn-panel p {
    margin: 18px 0 0;
    color: var(--guide-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.guide-learn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.guide-learn-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    color: var(--guide-ink);
    font-size: 1rem;
    line-height: 1.55;
}

.guide-learn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
}

.guide-learn-check svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* BODY */
.guide-body-section {
    padding: 80px 0 100px;
    background: var(--guide-bg);
}

.guide-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.guide-toc {
    position: sticky;
    top: 100px;
}

.guide-toc-inner {
    padding: 28px 28px 26px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--guide-line);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.guide-toc-title {
    margin: 0 0 18px;
    color: var(--guide-violet);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guide-toc ol {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    counter-reset: toc;
    display: grid;
    gap: 4px;
}

.guide-premium-page .guide-toc ol a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--guide-ink-soft);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.guide-premium-page .guide-toc ol a:hover {
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
}

.guide-toc a span {
    color: var(--guide-violet);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.guide-toc a strong {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}

.guide-premium-page .guide-toc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--guide-ink);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s ease;
}

.guide-premium-page .guide-toc-cta:hover {
    background: var(--guide-violet);
}

.guide-article {
    max-width: 760px;
}

.guide-section {
    margin-bottom: 68px;
    scroll-margin-top: 100px;
}

.guide-section:last-child {
    margin-bottom: 0;
}

.guide-section-kicker {
    margin: 0 0 14px;
    color: var(--guide-violet);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guide-section h2 {
    margin: 0 0 18px;
    color: var(--guide-ink);
    font-size: clamp(1.7rem, 2.6vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.guide-section-body {
    margin: 0;
    color: var(--guide-ink-soft);
    font-size: 1.06rem;
    line-height: 1.75;
}

.guide-bullets {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.guide-bullets li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    color: var(--guide-ink-soft);
    font-size: 0.98rem;
    line-height: 1.6;
}

.guide-bullet-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
    margin-top: 2px;
}

.guide-bullet-marker svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.guide-callout {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--guide-violet-soft) 0%, #ffffff 100%);
    border: 1px solid rgba(104, 73, 255, 0.2);
    border-left: 4px solid var(--guide-violet);
}

.guide-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--guide-violet);
    border: 1px solid rgba(104, 73, 255, 0.2);
}

.guide-callout-kicker {
    margin: 0 0 4px;
    color: var(--guide-violet);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-callout > div p:not(.guide-callout-kicker) {
    margin: 0;
    color: var(--guide-ink-soft);
    font-size: 0.98rem;
    line-height: 1.6;
}

.guide-summary {
    margin-top: 60px;
    padding: 32px 36px;
    border-radius: 22px;
    background: var(--guide-ink);
    color: #ffffff;
}

.guide-summary .guide-section-kicker {
    color: #c7b8ff;
}

.guide-summary h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 900;
}

.guide-summary p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.7;
}

/* RELATED */
.guide-related-section {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--guide-bg) 0%, var(--guide-soft) 100%);
}

.guide-section-heading {
    max-width: 720px;
    margin: 0 0 36px;
}

.guide-section-heading h2 {
    margin: 0;
    color: var(--guide-ink);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 950;
    letter-spacing: -0.01em;
}

.guide-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guide-premium-page .guide-related-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px 26px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--guide-line);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.guide-premium-page .guide-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 255, 0.32);
    box-shadow: 0 30px 60px -32px rgba(8, 18, 36, 0.3);
}

.guide-related-meta {
    --meta-color: var(--guide-violet);
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    width: fit-content;
}

.guide-related-meta[data-type="buying-checklist"] {
    --meta-color: #ff9a3c;
}

.guide-related-meta[data-type="workflow-walkthrough"] {
    --meta-color: #16b187;
}

.guide-related-meta[data-type="module-guide"] {
    --meta-color: #3a6aff;
}

.guide-related-meta .guide-meta-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--meta-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--meta-color) 16%, transparent);
    flex-shrink: 0;
}

.guide-related-meta .guide-meta-text {
    color: var(--meta-color);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.guide-related-meta .guide-meta-sector {
    color: var(--guide-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guide-related-meta .guide-meta-sep {
    color: var(--guide-line);
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 700;
}

.guide-related-card h3 {
    margin: 0;
    color: var(--guide-ink);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

.guide-related-card p {
    margin: 0;
    color: var(--guide-muted);
    font-size: 0.94rem;
    line-height: 1.6;
    flex: 1;
}

.guide-related-card strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--guide-violet);
    font-size: 0.92rem;
    font-weight: 800;
}

.guide-related-card strong span {
    transition: transform 0.18s ease;
}

.guide-related-card:hover strong span {
    transform: translateX(4px);
}

/* CTA */
.guide-cta-section {
    padding: 80px 0 110px;
    background: var(--guide-bg);
}

.guide-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 50px;
    align-items: center;
    padding: 60px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 18%, rgba(141, 120, 255, 0.34), transparent 42%),
        linear-gradient(135deg, #131334 0%, #0a1226 60%, #04081a 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 60px 130px -52px rgba(11, 18, 38, 0.6);
}

.guide-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.guide-cta-panel > div {
    position: relative;
    z-index: 1;
}

.guide-cta-panel h2 {
    margin: 0;
    max-width: 540px;
    color: #ffffff;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

.guide-cta-panel p {
    margin: 18px 0 0;
    max-width: 540px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.65;
}

.guide-cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

/* Buttons in guide pages reuse resources-button styles via .guide-premium-page parent */
.guide-premium-page .resources-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.guide-premium-page .resources-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #6849ff 0%, #8d78ff 100%);
    box-shadow: 0 24px 48px -22px rgba(104, 73, 255, 0.65);
}

.guide-premium-page .resources-button-primary:hover {
    transform: translateY(-1px);
}

.guide-premium-page .resources-button-ghost {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.guide-premium-page .resources-button-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* GUIDE RESPONSIVE */
@media (max-width: 1024px) {
    .guide-hero-grid,
    .guide-learn-panel,
    .guide-body-grid,
    .guide-cta-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .guide-cta-actions {
        justify-content: flex-start;
    }

    .guide-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-toc {
        position: static;
    }

    .guide-toc-inner {
        max-height: none;
    }

    .guide-hero-art {
        max-width: 560px;
        margin: 0 auto;
        aspect-ratio: 16 / 10;
    }

    .guide-hero-figure {
        aspect-ratio: 16 / 10;
        max-width: 560px;
        margin: 0 auto;
    }

    .guide-hero-preview {
        max-width: 560px;
        margin: 18px auto 0;
    }

    .guide-learn-panel,
    .guide-cta-panel {
        padding: 40px 36px;
    }
}

@media (max-width: 820px) {
    .guide-hero {
        padding: 100px 0 70px;
    }

    .guide-hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 18px 20px;
    }

    .guide-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-section {
        margin-bottom: 52px;
    }
}

@media (max-width: 560px) {
    .guide-hero {
        padding: 88px 0 56px;
    }

    .guide-hero-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px 18px;
    }

    .guide-hero-art,
    .guide-hero-figure,
    .guide-hero-preview {
        max-width: none;
    }

    .guide-learn-panel,
    .guide-cta-panel {
        padding: 28px 22px;
    }

    .guide-section {
        margin-bottom: 44px;
    }

    .guide-callout {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-toc-inner {
        padding: 22px 22px 20px;
    }

    .guide-eyebrow {
        gap: 6px;
    }
}

@media (max-width: 1024px) {
    .resources-framework-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding: 48px 36px;
    }
}

@media (max-width: 760px) {
    .resources-framework-panel {
        padding: 36px 24px;
    }

    .resources-honesty {
        white-space: normal;
        padding: 12px 16px;
        text-align: left;
        line-height: 1.4;
    }
}

/* CHECKLIST CARDS */
/* MODULE GUIDES (new) */
.resources-modules-section {
    padding: 100px 0 0;
    background: var(--resources-bg);
}

.resources-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.resources-premium-page .resources-module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 30px 28px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(58, 106, 255, 0.08), transparent 55%),
        #ffffff;
    border: 1px solid var(--resources-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.resources-premium-page .resources-module-card:hover {
    transform: translateY(-4px);
    border-color: rgba(58, 106, 255, 0.32);
    box-shadow: 0 30px 60px -32px rgba(8, 18, 36, 0.32);
}

.resources-module-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3a6aff, #6ea0ff);
    opacity: 0.75;
}

.resources-module-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(58, 106, 255, 0.12);
    color: #3a6aff;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.resources-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(58, 106, 255, 0.16), rgba(58, 106, 255, 0.02));
    border: 1px solid rgba(58, 106, 255, 0.22);
    color: #3a6aff;
}

.resources-module-icon svg {
    width: 28px;
    height: 28px;
}

.resources-module-card h3 {
    margin: 0;
    color: var(--resources-ink);
    font-size: 1.28rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.resources-module-card p {
    margin: 0;
    color: var(--resources-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    flex: 1;
}

.resources-module-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #3a6aff;
    font-size: 0.96rem;
    font-weight: 800;
}

.resources-module-card strong span {
    transition: transform 0.18s ease;
}

.resources-module-card:hover strong span {
    transform: translateX(4px);
}

@media (max-width: 700px) {
    .resources-modules-grid {
        grid-template-columns: 1fr;
    }
}

.resources-checklist-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--resources-soft) 0%, var(--resources-bg) 100%);
}

.resources-checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.resources-checklist-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 26px 26px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--resources-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.resources-checklist-card:hover {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 255, 0.32);
    box-shadow: 0 30px 60px -32px rgba(8, 18, 36, 0.32);
}

.resources-checklist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--resources-violet-soft);
    color: var(--resources-violet);
}

.resources-checklist-icon svg {
    width: 22px;
    height: 22px;
}

.resources-checklist-card h3 {
    margin: 0;
    color: var(--resources-ink);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-checklist-card p {
    margin: 0;
    color: var(--resources-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    flex: 1;
}

.resources-checklist-card strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--resources-violet);
    font-size: 0.9rem;
    font-weight: 800;
}

.resources-checklist-card strong span {
    transition: transform 0.18s ease;
}

.resources-checklist-card:hover strong span {
    transform: translateX(4px);
}

/* RELATED */
.resources-related-section {
    padding: 100px 0 84px;
    background: var(--resources-bg);
}

.resources-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.resources-related-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 30px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(104, 73, 255, 0.06), transparent 50%),
        #ffffff;
    border: 1px solid var(--resources-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.resources-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(104, 73, 255, 0.3);
    box-shadow: 0 30px 60px -32px rgba(8, 18, 36, 0.3);
}

.resources-related-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--resources-violet) 0%, var(--resources-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 16px 30px -16px rgba(104, 73, 255, 0.7);
}

.resources-related-card > span svg {
    width: 22px;
    height: 22px;
}

.resources-related-card h3 {
    margin: 0;
    color: var(--resources-ink);
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-related-card p {
    margin: 0;
    color: var(--resources-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    flex: 1;
}

.resources-related-card strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--resources-violet);
    font-size: 0.96rem;
    font-weight: 800;
}

.resources-related-card strong span {
    transition: transform 0.18s ease;
}

.resources-related-card:hover strong span {
    transform: translateX(4px);
}

/* FINAL CTA */
.resources-final-cta {
    padding: 92px 0 110px;
    background: var(--resources-bg);
}

.resources-final-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 50px;
    align-items: center;
    padding: 64px 60px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 18%, rgba(141, 120, 255, 0.34), transparent 42%),
        radial-gradient(circle at 10% 95%, rgba(58, 106, 255, 0.18), transparent 44%),
        linear-gradient(135deg, #131334 0%, #0a1226 60%, #04081a 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 60px 130px -52px rgba(11, 18, 38, 0.6);
}

.resources-final-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.resources-final-panel > div {
    position: relative;
    z-index: 1;
}

.resources-final-panel h2 {
    margin: 0;
    max-width: 540px;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.55rem);
    font-weight: 950;
    letter-spacing: -0.01em;
    line-height: 1.06;
}

.resources-final-panel > div > p {
    margin: 18px 0 0;
    max-width: 540px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
}

.resources-final-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .resources-hero-grid,
    .resources-playbooks-grid,
    .resources-calculator-panel,
    .resources-story-grid,
    .resources-final-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .resources-final-actions {
        justify-content: flex-start;
    }

    .resources-types-grid,
    .resources-featured-grid,
    .resources-checklist-grid,
    .resources-related-grid,
    .resources-measure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resources-section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .resources-calculator-panel,
    .resources-final-panel {
        padding: 48px 36px;
    }
}

@media (max-width: 700px) {
    .resources-hero {
        padding: 100px 0 70px;
    }

    .resources-types-grid,
    .resources-featured-grid,
    .resources-checklist-grid,
    .resources-related-grid,
    .resources-measure-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .resources-hero {
        padding: 100px 0 76px;
    }

    .resources-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resources-types-grid,
    .resources-featured-grid,
    .resources-checklist-grid,
    .resources-related-grid,
    .resources-measure-grid,
    .resources-story-stats,
    .resources-calc-board-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .resources-banner figcaption {
        padding: 40px 28px 36px;
    }

    .resources-banner figcaption i {
        inset: auto 24px 24px auto;
        width: 64px;
    }

    .resources-playbook-list li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .resources-playbook-list i {
        display: none;
    }

    .resources-calculator-panel,
    .resources-final-panel {
        padding: 40px 24px;
    }

    .resources-story-media {
        aspect-ratio: 16 / 11;
    }

    .resources-section-heading {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Guide page enhancements: progress, ambient, animations, scrollspy
   ========================================================================== */

/* Reading progress bar */
.guide-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
    background: rgba(8, 18, 36, 0.04);
}

.guide-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--guide-violet) 0%, var(--guide-violet-2) 50%, var(--guide-amber) 100%);
    box-shadow: 0 0 12px rgba(104, 73, 255, 0.5);
    transition: transform 0.08s linear;
}

/* Ambient gradient orbs in hero */
.guide-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.guide-hero-orbs span {
    position: absolute;
    border-radius: 999px;
    filter: blur(28px);
    opacity: 0.42;
    transform: translateZ(0);
}

.guide-hero-orbs span:nth-child(1) {
    width: 280px;
    height: 280px;
    top: -80px;
    left: -60px;
    background: radial-gradient(circle, rgba(104, 73, 255, 0.55), transparent 70%);
    animation: guideOrbA 18s ease-in-out infinite alternate;
}

.guide-hero-orbs span:nth-child(2) {
    width: 320px;
    height: 320px;
    top: 28%;
    right: -100px;
    background: radial-gradient(circle, rgba(141, 120, 255, 0.5), transparent 70%);
    animation: guideOrbB 24s ease-in-out infinite alternate;
}

.guide-hero-orbs span:nth-child(3) {
    width: 240px;
    height: 240px;
    bottom: -80px;
    left: 35%;
    background: radial-gradient(circle, rgba(58, 106, 255, 0.4), transparent 70%);
    animation: guideOrbC 28s ease-in-out infinite alternate;
}

@keyframes guideOrbA {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(60px, 50px, 0) scale(1.15); }
}

@keyframes guideOrbB {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-80px, -40px, 0) scale(1.1); }
}

@keyframes guideOrbC {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(40px, -60px, 0) scale(1.2); }
}

.guide-hero > .shell {
    position: relative;
    z-index: 1;
}

/* Hero figure composite */
.guide-hero-figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.85);
}

.guide-hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-hero-figure-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(104, 73, 255, 0.18), transparent 50%),
        linear-gradient(180deg, transparent 40%, rgba(11, 19, 38, 0.6) 100%);
    pointer-events: none;
}

.guide-hero-figure-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(11, 19, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
}

.guide-hero-figure-badge svg {
    width: 16px;
    height: 16px;
    color: #c7b8ff;
    stroke-width: 2.2;
}

.guide-hero-figure-badge em {
    font-style: normal;
}

/* Key chapters preview card */
.guide-hero-preview {
    position: relative;
    margin-top: -54px;
    margin-left: auto;
    margin-right: 12px;
    max-width: 340px;
    padding: 22px 22px 18px;
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 10, 24, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8);
    color: #ffffff;
    z-index: 2;
}

.guide-hero-preview::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(141, 120, 255, 0.5), rgba(255, 154, 60, 0.2) 60%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.guide-hero-preview-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
}

.guide-hero-preview-title span {
    color: #c7b8ff;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guide-hero-preview-title em {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(141, 120, 255, 0.2);
    color: #ffffff;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 800;
}

.guide-hero-preview ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.guide-hero-preview li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, transform 0.2s ease;
}

.guide-hero-preview li:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(2px);
}

.guide-hero-preview-num {
    color: #c7b8ff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.guide-hero-preview-text {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.guide-hero-preview-more {
    display: block;
    margin-top: 2px;
    padding: 6px 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    grid-template-columns: 1fr !important;
}

/* Learn flow diagram */
.guide-learn-flow {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--guide-violet-soft) 0%, #ffffff 100%);
    border: 1px solid rgba(104, 73, 255, 0.18);
    width: fit-content;
}

.guide-learn-flow-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--guide-line);
    color: var(--guide-ink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 20px -12px rgba(8, 18, 36, 0.25);
}

.guide-learn-flow-node.is-accent {
    background: linear-gradient(135deg, var(--guide-violet) 0%, var(--guide-violet-2) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 12px 28px -14px rgba(104, 73, 255, 0.65);
}

.guide-learn-flow-link {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, var(--guide-violet) 0%, var(--guide-violet-2) 100%);
    position: relative;
}

.guide-learn-flow-link::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border: 2px solid var(--guide-violet-2);
    border-bottom: none;
    border-left: none;
    transform: translateY(-50%) rotate(45deg);
}

/* Scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .guide-hero-orbs span {
        animation: none;
    }
}

/* TOC enhancements: progress badge + active state */
.guide-toc-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.guide-toc-title em {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: background 0.2s ease;
}

.guide-premium-page .guide-toc ol a {
    position: relative;
}

.guide-premium-page .guide-toc ol a.is-active {
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
}

.guide-premium-page .guide-toc ol a.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--guide-violet) 0%, var(--guide-violet-2) 100%);
}

.guide-premium-page .guide-toc ol a.is-active span,
.guide-premium-page .guide-toc ol a.is-active strong {
    color: var(--guide-violet);
}

/* Back to top */
.guide-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--guide-violet) 0%, var(--guide-violet-2) 100%);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 16px 36px -16px rgba(104, 73, 255, 0.7);
}

.guide-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.guide-back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px -16px rgba(104, 73, 255, 0.8);
}

.guide-back-to-top svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

/* Hero copy refinement — let badges wrap nicely on mobile */
@media (max-width: 760px) {
    .guide-eyebrow {
        gap: 8px;
    }

    .guide-tag-type,
    .guide-tag-sector {
        font-size: 0.68rem;
    }

    .guide-hero-preview {
        max-width: none;
        margin: 18px 0 0;
    }

    .guide-back-to-top {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }

    .guide-learn-flow {
        width: auto;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* ==========================================================================
   Guide diagrams
   ========================================================================== */

.guide-diagram {
    margin: 40px 0 16px;
    padding: 0;
    border-radius: 22px;
    background: linear-gradient(155deg, #ffffff 0%, var(--guide-soft) 100%);
    border: 1px solid var(--guide-line);
    box-shadow: 0 30px 70px -42px rgba(8, 18, 36, 0.28);
    overflow: hidden;
}

.guide-diagram-caption {
    padding: 26px 30px 18px;
    border-bottom: 1px solid var(--guide-line);
    background:
        radial-gradient(circle at 100% 0%, rgba(104, 73, 255, 0.06), transparent 50%),
        rgba(255, 255, 255, 0.5);
}

.guide-diagram-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--guide-violet-soft);
    color: var(--guide-violet);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guide-diagram-caption strong {
    display: block;
    color: var(--guide-ink);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.guide-diagram-caption strong em {
    color: var(--guide-violet);
    font-style: normal;
}

.guide-diagram-caption p {
    margin: 10px 0 0;
    color: var(--guide-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.guide-diagram-canvas {
    padding: 34px 32px;
    background: #ffffff;
}

.guide-diagram-canvas svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Shared diagram primitives */
.guide-diagram .dia-card,
.guide-diagram .dia-state,
.guide-diagram .dia-station,
.guide-diagram .dia-bom-node,
.guide-diagram .dia-stockloop-step,
.guide-diagram .dia-variants-parent,
.guide-diagram .dia-variants-rule,
.guide-diagram .dia-kds-ticket,
.guide-diagram .dia-kds-router-pill {
    box-sizing: border-box;
}

.guide-diagram-canvas {
    --dia-ink: #0a1326;
    --dia-ink-soft: #2a334a;
    --dia-muted: #5b667c;
    --dia-line: #e1e6f0;
    --dia-line-strong: #cdd5e3;
    --dia-soft: #f4f6fb;
    --dia-violet: #6849ff;
    --dia-violet-2: #8d78ff;
    --dia-violet-soft: #ede8ff;
    --dia-amber: #ff9a3c;
    --dia-amber-soft: #fff0dc;
    --dia-green: #16b187;
    --dia-green-soft: #ddf6ec;
    --dia-red: #ef5d5d;
}

.guide-diagram-legend {
    list-style: none;
    margin: 0;
    padding: 18px 30px 24px;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--guide-line);
    background: rgba(255, 255, 255, 0.7);
}

.guide-diagram-legend li {
    position: relative;
    padding-left: 22px;
    color: var(--guide-ink-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

.guide-diagram-legend strong {
    color: var(--guide-ink);
}

.guide-diagram-legend-dot {
    position: absolute;
    left: 0;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--guide-violet);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--guide-violet) 18%, transparent);
}

.guide-diagram-legend-dot.is-amber {
    background: #ff9a3c;
    box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.18);
}

.guide-diagram-legend-dot.is-green {
    background: #16b187;
    box-shadow: 0 0 0 4px rgba(22, 177, 135, 0.18);
}

.guide-diagram-legend-dot.is-violet {
    background: var(--guide-violet);
    box-shadow: 0 0 0 4px rgba(104, 73, 255, 0.18);
}

@media (max-width: 760px) {
    .guide-diagram-caption,
    .guide-diagram-legend {
        padding-left: 22px;
        padding-right: 22px;
    }

    .guide-diagram-canvas {
        padding: 22px 18px;
    }
}

/* ============================================================
   Diagram: Hospitality channels (input col → hub → output col)
   ============================================================ */
.dia-channels-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr);
    gap: 0;
    align-items: stretch;
    min-height: 360px;
}

.dia-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.dia-col-hub {
    align-items: center;
}

.dia-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    border-radius: 12px;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 2px 6px -2px rgba(8, 18, 36, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dia-card-input {
    background: linear-gradient(135deg, #ffffff 0%, var(--dia-soft) 100%);
}

.dia-card svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--dia-violet);
}

.dia-flow-line {
    flex-shrink: 0;
    height: 2px;
    width: 100%;
    border-radius: 999px;
    margin: 0;
    position: relative;
}

.dia-flow-line-left {
    background: linear-gradient(90deg, transparent 0%, rgba(104, 73, 255, 0.55) 100%);
}

.dia-flow-line-right {
    background: linear-gradient(90deg, rgba(104, 73, 255, 0.55) 0%, rgba(104, 73, 255, 0.95) 100%);
}

.dia-flow-line-right::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 8px solid rgba(104, 73, 255, 0.95);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.dia-col-hub {
    flex-direction: row;
    gap: 12px;
}

.dia-col-hub .dia-hub {
    flex-shrink: 0;
    min-width: 180px;
}

.dia-hub {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 22px;
    width: 100%;
    max-width: 200px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -20px rgba(104, 73, 255, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    text-align: center;
    overflow: hidden;
}

.dia-hub-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
}

.dia-hub-title {
    display: block;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.dia-hub-sub {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 600;
}

.dia-hub-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
}

.dia-col-outputs {
    padding-left: 14px;
}

.dia-card-output {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 6px 14px -8px rgba(8, 18, 36, 0.18);
}

.dia-card-output .dia-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
}

.dia-card-output.dia-card-amber .dia-card-icon {
    background: var(--dia-amber-soft);
    color: var(--dia-amber);
}

.dia-card-output.dia-card-green .dia-card-icon {
    background: var(--dia-green-soft);
    color: var(--dia-green);
}

.dia-card-output.dia-card-violet .dia-card-icon {
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
}

.dia-card-output .dia-card-icon svg {
    width: 22px;
    height: 22px;
}

.dia-card-output strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}

.dia-card-output span {
    display: block;
    margin-top: 3px;
    color: var(--dia-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* ============================================================
   Diagram: Hospitality KDS routing
   ============================================================ */
.dia-kds {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) auto minmax(280px, 1.4fr);
    gap: 24px;
    align-items: center;
}

.dia-kds-ticket {
    padding: 22px 22px 20px;
    border-radius: 18px;
    background: linear-gradient(150deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -22px rgba(104, 73, 255, 0.7);
}

.dia-kds-ticket-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
}

.dia-kds-ticket strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.dia-kds-ticket ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dia-kds-ticket li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.82rem;
}

.dia-kds-ticket li b {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.66rem;
    min-width: 50px;
}

.dia-kds-ticket li span {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.dia-kds-router {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dia-kds-router svg {
    width: 110px;
    height: 32px;
}

.dia-kds-router-pill {
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px dashed var(--dia-violet);
    text-align: center;
    min-width: 150px;
}

.dia-kds-router-pill span {
    display: block;
    color: var(--dia-violet);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.16em;
}

.dia-kds-router-pill strong {
    display: block;
    margin: 4px 0 2px;
    color: var(--dia-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.dia-kds-router-pill em {
    display: block;
    color: var(--dia-muted);
    font-style: normal;
    font-size: 0.74rem;
}

.dia-kds-stations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dia-station {
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-station header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dia-station-eyebrow {
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    color: var(--dia-ink-soft);
}

.dia-station-time {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--dia-soft);
    color: var(--dia-ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
}

.dia-station strong {
    display: block;
    color: var(--dia-ink);
    font-size: 1rem;
    font-weight: 800;
}

.dia-station p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
}

.dia-station-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-station-amber .dia-station-eyebrow,
.dia-station-amber .dia-station-time {
    color: var(--dia-amber);
}

.dia-station-amber .dia-station-time {
    background: rgba(255, 154, 60, 0.16);
}

.dia-station-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-station-green .dia-station-eyebrow,
.dia-station-green .dia-station-time {
    color: var(--dia-green);
}

.dia-station-green .dia-station-time {
    background: rgba(22, 177, 135, 0.16);
}

.dia-station-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-station-violet .dia-station-eyebrow,
.dia-station-violet .dia-station-time {
    color: var(--dia-violet);
}

.dia-station-violet .dia-station-time {
    background: rgba(104, 73, 255, 0.16);
}

.dia-kds-rail {
    grid-column: 1 / -1;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--dia-line);
}

.dia-kds-rail-label {
    display: block;
    margin-bottom: 8px;
    color: var(--dia-muted);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.16em;
}

.dia-kds-rail-steps {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dia-kds-rail-steps span {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--dia-soft);
    color: var(--dia-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.dia-kds-rail-steps i {
    width: 20px;
    height: 2px;
    background: var(--dia-line-strong);
    position: relative;
}

.dia-kds-rail-steps i::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 6px solid var(--dia-line-strong);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* ============================================================
   Diagram: Retail variants
   ============================================================ */
.dia-variants {
    display: grid;
    gap: 20px;
}

.dia-variants-parent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -22px rgba(104, 73, 255, 0.7);
}

.dia-variants-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
    display: block;
}

.dia-variants-parent strong {
    display: block;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-variants-parent ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.dia-variants-parent li {
    display: flex;
    flex-direction: column;
}

.dia-variants-parent li b {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dia-variants-parent li span {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
}

.dia-variants-axes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dia-variants-axis {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-variants-axis-label {
    display: block;
    margin-bottom: 8px;
    color: var(--dia-violet);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-variants-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dia-variants-tokens span {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--dia-soft);
    color: var(--dia-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.dia-variants-skus {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--dia-soft);
    border: 1px solid var(--dia-line);
}

.dia-variants-skus-label {
    margin: 0 0 10px;
    color: var(--dia-ink-soft);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-variants-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dia-sku {
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    color: var(--dia-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.dia-sku.is-warning {
    background: var(--dia-amber-soft);
    border-color: rgba(255, 154, 60, 0.5);
    color: var(--dia-amber);
}

.dia-sku.is-warning em {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--dia-amber);
    color: #ffffff;
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dia-sku.is-muted {
    background: transparent;
    border-style: dashed;
    color: var(--dia-muted);
    font-weight: 600;
}

.dia-variants-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dia-variants-rule {
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-variants-rule header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dia-variants-rule header svg {
    width: 18px;
    height: 18px;
}

.dia-variants-rule header span {
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-variants-rule strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.98rem;
    font-weight: 800;
}

.dia-variants-rule p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.dia-variants-rule-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-variants-rule-green header svg,
.dia-variants-rule-green header span {
    color: var(--dia-green);
}

.dia-variants-rule-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-variants-rule-violet header svg,
.dia-variants-rule-violet header span {
    color: var(--dia-violet);
}

/* ============================================================
   Diagram: Retail sale → stock → reorder loop
   ============================================================ */
.dia-stockloop {
    display: grid;
    gap: 0;
}

.dia-stockloop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.dia-stockloop-row + .dia-stockloop-row {
    margin-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dia-stockloop-step {
    position: relative;
    padding: 18px 18px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-stockloop-num {
    position: absolute;
    top: -12px;
    left: 14px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--dia-violet);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 4px 10px -4px rgba(104, 73, 255, 0.65);
}

.dia-stockloop-step-1 {
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 28px -16px rgba(104, 73, 255, 0.55);
}

.dia-stockloop-step-1 .dia-stockloop-num {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: none;
}

.dia-stockloop-step-2 {
    border-color: var(--dia-violet);
    border-width: 2px;
}

.dia-stockloop-step-3 {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.45);
}

.dia-stockloop-step-3 .dia-stockloop-num {
    background: var(--dia-amber);
    box-shadow: 0 4px 10px -4px rgba(255, 154, 60, 0.65);
}

.dia-stockloop-eyebrow {
    display: block;
    color: var(--dia-violet);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dia-stockloop-step-1 .dia-stockloop-eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

.dia-stockloop-step-3 .dia-stockloop-eyebrow {
    color: var(--dia-amber);
}

.dia-stockloop-step strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--dia-ink);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-stockloop-step-1 strong {
    color: #ffffff;
}

.dia-stockloop-step p {
    margin: 0;
    color: var(--dia-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.dia-stockloop-step-1 p {
    color: rgba(255, 255, 255, 0.85);
}

.dia-stockloop-step small {
    display: block;
    margin-top: 4px;
    color: var(--dia-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.dia-stockloop-step-1 small {
    color: rgba(255, 255, 255, 0.7);
}

.dia-stockloop-arrow {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.dia-stockloop-arrow svg {
    width: 80px;
    height: 24px;
}

.dia-stockloop-fan {
    padding: 12px 0 0;
}

.dia-stockloop-fan svg {
    width: 100%;
    height: 40px;
}

.dia-stockloop-out {
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-stockloop-out-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-stockloop-out-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-stockloop-out-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-stockloop-out-violet .dia-stockloop-eyebrow {
    color: var(--dia-violet);
}

.dia-stockloop-out-green .dia-stockloop-eyebrow {
    color: var(--dia-green);
}

.dia-stockloop-out-amber .dia-stockloop-eyebrow {
    color: var(--dia-amber);
}

/* ============================================================
   Diagram: Manufacturing BOM tree
   ============================================================ */
.dia-bom {
    display: grid;
    gap: 0;
}

.dia-bom-root {
    align-self: center;
    margin: 0 auto;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 14px 28px -16px rgba(104, 73, 255, 0.55);
    max-width: 280px;
}

.dia-bom-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}

.dia-bom-root strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-bom-root p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
}

.dia-bom-line {
    width: 100%;
    height: 28px;
    margin: 0 auto;
    background:
        linear-gradient(to bottom, var(--dia-line-strong) 0, var(--dia-line-strong) 100%) no-repeat center top / 2px 100%;
    position: relative;
}

.dia-bom-line-root::before,
.dia-bom-line-root::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    background: var(--dia-line-strong);
}

.dia-bom-line-root::before {
    left: 25%;
    width: 50%;
}

.dia-bom-line-root::after {
    display: none;
}

.dia-bom-level-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 12%;
    position: relative;
}

.dia-bom-level-2::before,
.dia-bom-level-2::after {
    content: "";
    position: absolute;
    top: -28px;
    width: 2px;
    height: 28px;
    background: var(--dia-line-strong);
}

.dia-bom-level-2::before {
    left: calc(12% + (44% / 2));
}

.dia-bom-level-2::after {
    right: calc(12% + (44% / 2));
}

.dia-bom-level-3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    position: relative;
}

.dia-bom-line-mid {
    height: 28px;
}

.dia-bom-line-mid::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 50%;
    height: 2px;
    background: var(--dia-line-strong);
}

.dia-bom-node {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-bom-node-assembly {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
    text-align: center;
}

.dia-bom-tag {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--dia-violet);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-bom-node-assembly strong {
    display: block;
    color: var(--dia-ink);
    font-size: 1rem;
    font-weight: 800;
}

.dia-bom-node-assembly p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
}

.dia-bom-node-comp header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dia-bom-node-comp header span {
    color: var(--dia-ink-soft);
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-bom-node-comp strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.96rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.dia-bom-node-comp ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
}

.dia-bom-node-comp ul li {
    display: flex;
    flex-direction: column;
}

.dia-bom-node-comp ul b {
    color: var(--dia-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dia-bom-node-comp ul span {
    color: var(--dia-ink);
    font-size: 0.85rem;
    font-weight: 700;
}

.dia-bom-node-warn {
    background: linear-gradient(135deg, rgba(255, 93, 93, 0.06) 0%, #ffffff 100%);
    border-color: rgba(239, 93, 93, 0.45);
}

.dia-bom-flag {
    margin: 8px 0 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 154, 60, 0.18);
    color: var(--dia-amber);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.dia-status {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.dia-status-green {
    background: var(--dia-green);
    box-shadow: 0 0 0 3px rgba(22, 177, 135, 0.2);
}

.dia-status-red {
    background: var(--dia-red);
    box-shadow: 0 0 0 3px rgba(239, 93, 93, 0.2);
}

.dia-bom-status-key {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--dia-line);
    color: var(--dia-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.dia-bom-status-key span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Diagram: Manufacturing work order states
   ============================================================ */
.dia-states {
    display: grid;
    gap: 22px;
}

.dia-states-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    flex-wrap: wrap;
}

.dia-state {
    flex: 1 1 0;
    min-width: 124px;
    padding: 14px 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    text-align: center;
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
    position: relative;
}

.dia-state-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
    font-size: 0.92rem;
    font-weight: 900;
}

.dia-state strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-state p {
    margin: 6px 0 0;
    color: var(--dia-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.dia-state-violet {
    background: linear-gradient(150deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 28px -16px rgba(104, 73, 255, 0.55);
}

.dia-state-violet .dia-state-num {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.dia-state-violet strong {
    color: #ffffff;
}

.dia-state-violet p {
    color: rgba(255, 255, 255, 0.82);
}

.dia-state-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-state-green .dia-state-num {
    background: var(--dia-green);
    color: #ffffff;
}

.dia-state-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-state-amber .dia-state-num {
    background: var(--dia-amber);
    color: #ffffff;
}

.dia-state-arrow {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    position: relative;
}

.dia-state-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 8px;
    top: 50%;
    height: 2px;
    background: var(--dia-line-strong);
    transform: translateY(-50%);
}

.dia-state-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid var(--dia-line-strong);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: translateY(-50%);
}

.dia-states-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--dia-soft);
    border: 1px solid var(--dia-line);
}

.dia-states-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dia-states-meta span {
    color: var(--dia-muted);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-states-meta strong {
    color: var(--dia-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

/* ============================================================
   Responsive: stack diagrams on narrow viewports
   ============================================================ */
@media (max-width: 900px) {
    .dia-channels-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dia-channels-grid .dia-connectors {
        display: none;
    }

    .dia-col-outputs {
        padding-left: 0;
    }

    .dia-kds {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dia-kds-router {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .dia-kds-router svg {
        transform: rotate(90deg);
        width: 40px;
    }

    .dia-stockloop-row {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .dia-stockloop-arrow {
        justify-self: center;
        padding: 0;
    }

    .dia-stockloop-arrow svg {
        transform: rotate(90deg);
        width: 40px;
        height: 24px;
    }

    .dia-stockloop-fan {
        display: none;
    }

    .dia-states-list {
        flex-direction: column;
        align-items: stretch;
    }

    .dia-state-arrow {
        width: 100%;
        height: 24px;
        transform: rotate(90deg);
        margin: -8px 0;
    }
}

@media (max-width: 760px) {
    .dia-kds-stations,
    .dia-variants-axes,
    .dia-variants-rules,
    .dia-bom-level-2,
    .dia-bom-level-3,
    .dia-states-meta {
        grid-template-columns: 1fr;
    }

    .dia-bom-level-2,
    .dia-bom-line {
        padding: 0;
    }

    .dia-bom-line-root::before,
    .dia-bom-level-2::before,
    .dia-bom-level-2::after,
    .dia-bom-line-mid::before {
        display: none;
    }
}

/* ============================================================
   Diagram: Multi-site central vs local matrix
   ============================================================ */
.dia-cl {
    display: grid;
    gap: 8px;
}

.dia-cl-headers {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) repeat(2, minmax(0, 1.6fr));
    gap: 10px;
    align-items: center;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--dia-line);
}

.dia-cl-label {
    color: var(--dia-muted);
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-cl-col-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

.dia-cl-col-head svg {
    width: 16px;
    height: 16px;
}

.dia-cl-col-central {
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
}

.dia-cl-col-local {
    background: var(--dia-amber-soft);
    color: var(--dia-amber);
}

.dia-cl-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) repeat(2, minmax(0, 1.6fr));
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background 0.18s ease;
}

.dia-cl-row:nth-child(even) {
    background: var(--dia-soft);
}

.dia-cl-row-label {
    color: var(--dia-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.dia-cl-cell {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
}

.dia-cl-cell-on {
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px -10px rgba(104, 73, 255, 0.5);
}

.dia-cl-row:nth-child(odd) .dia-cl-cell-on:last-of-type,
.dia-cl-row .dia-cl-cell-on + .dia-cl-cell-off,
.dia-cl-cell-on + .dia-cl-cell-soft {
    /* visual hierarchy reset */
}

/* The "on" version when it appears in the local column gets amber treatment */
.dia-cl-row .dia-cl-cell-on:nth-child(3) {
    background: linear-gradient(135deg, var(--dia-amber) 0%, #ffb46b 100%);
    box-shadow: 0 8px 18px -10px rgba(255, 154, 60, 0.5);
}

.dia-cl-cell-off,
.dia-cl-cell-soft {
    background: #ffffff;
    border-color: var(--dia-line);
    color: var(--dia-ink-soft);
}

.dia-cl-cell-soft {
    color: var(--dia-muted);
    font-weight: 600;
    font-style: italic;
}

/* ============================================================
   Diagram: Wholesale quote-to-order pipeline
   ============================================================ */
.dia-pipeline {
    display: grid;
    gap: 22px;
}

.dia-pipeline-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    position: relative;
}

.dia-pipeline-track::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--dia-violet) 0%, var(--dia-violet-2) 50%, var(--dia-green) 100%);
    z-index: 0;
    border-radius: 999px;
    opacity: 0.18;
}

.dia-pipeline-step {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    text-align: center;
    box-shadow: 0 6px 14px -8px rgba(8, 18, 36, 0.16);
    z-index: 1;
}

.dia-pipeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--dia-violet);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 4px 10px -4px rgba(104, 73, 255, 0.65);
}

.dia-pipeline-step-3 .dia-pipeline-num {
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    width: 34px;
    height: 34px;
    font-size: 0.92rem;
}

.dia-pipeline-step-5 .dia-pipeline-num {
    background: var(--dia-green);
    box-shadow: 0 4px 10px -4px rgba(22, 177, 135, 0.65);
}

.dia-pipeline-eyebrow {
    display: block;
    color: var(--dia-violet);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-pipeline-step strong {
    display: block;
    margin: 4px 0 4px;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-pipeline-step p {
    margin: 0;
    color: var(--dia-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.dia-pipeline-step-3 {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-pipeline-step-5 {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-pipeline-step-5 .dia-pipeline-eyebrow {
    color: var(--dia-green);
}

.dia-pipeline-context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dia-pipeline-card {
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-pipeline-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-pipeline-card strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.96rem;
    font-weight: 800;
}

.dia-pipeline-card p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.dia-pipeline-card-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-pipeline-card-violet span {
    color: var(--dia-violet);
}

.dia-pipeline-card-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-pipeline-card-amber span {
    color: var(--dia-amber);
}

.dia-pipeline-card-amber ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.dia-pipeline-card-amber ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--dia-line);
}

.dia-pipeline-card-amber ul li:last-child {
    border-bottom: none;
}

.dia-pipeline-card-amber ul b {
    color: var(--dia-ink);
    font-size: 0.8rem;
    font-weight: 800;
}

.dia-pipeline-card-amber ul span {
    margin: 0;
    color: var(--dia-amber);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.dia-pipeline-card-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-pipeline-card-green span {
    color: var(--dia-green);
}

/* ============================================================
   Diagram: Phone-order intake flow
   ============================================================ */
.dia-phone {
    display: grid;
    gap: 22px;
}

.dia-phone-call {
    position: relative;
    margin: 0 auto;
    padding: 22px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 18px 40px -22px rgba(104, 73, 255, 0.7);
    overflow: hidden;
    min-width: 280px;
}

.dia-phone-call-tag {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}

.dia-phone-call strong {
    display: block;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-phone-call p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.84rem;
}

.dia-phone-call-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    margin: -125px 0 0 -125px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 60%);
    pointer-events: none;
}

.dia-phone-fork {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    position: relative;
}

.dia-phone-fork::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: -16px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--dia-violet) 50%, transparent 100%);
}

.dia-phone-branch {
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 6px 14px -8px rgba(8, 18, 36, 0.16);
}

.dia-phone-branch-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--dia-violet);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-phone-branch-match {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-phone-branch-new {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-phone-branch-new .dia-phone-branch-eyebrow {
    color: var(--dia-amber);
}

.dia-phone-customer strong {
    display: block;
    color: var(--dia-ink);
    font-size: 1.02rem;
    font-weight: 800;
}

.dia-phone-customer p {
    margin: 4px 0 8px;
    color: var(--dia-ink-soft);
    font-size: 0.82rem;
}

.dia-phone-customer ul {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    gap: 16px;
}

.dia-phone-customer ul li {
    display: flex;
    flex-direction: column;
}

.dia-phone-customer ul b {
    color: var(--dia-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dia-phone-customer ul span {
    color: var(--dia-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.dia-phone-customer-empty p {
    color: var(--dia-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.dia-phone-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dia-phone-outcome {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-phone-outcome-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-phone-outcome strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.98rem;
    font-weight: 800;
}

.dia-phone-outcome p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.dia-phone-outcome-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-phone-outcome-green .dia-phone-outcome-tag {
    background: var(--dia-green);
    color: #ffffff;
}

.dia-phone-outcome-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-phone-outcome-amber .dia-phone-outcome-tag {
    background: var(--dia-amber);
    color: #ffffff;
}

/* ============================================================
   Diagram: Branch transfer 4-state flow
   ============================================================ */
.dia-transfer {
    display: grid;
    gap: 26px;
}

.dia-transfer-branches {
    display: grid;
    grid-template-columns: 1fr auto 1.1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.dia-transfer-branch {
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 6px 14px -8px rgba(8, 18, 36, 0.16);
}

.dia-transfer-branch-tag {
    display: block;
    margin-bottom: 6px;
    color: var(--dia-violet);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-transfer-branch strong {
    display: block;
    color: var(--dia-ink);
    font-size: 1.05rem;
    font-weight: 900;
}

.dia-transfer-branch p {
    margin: 6px 0 0;
    color: var(--dia-ink-soft);
    font-size: 0.84rem;
}

.dia-transfer-branch p b {
    color: var(--dia-ink);
    font-weight: 800;
}

.dia-transfer-branch-from {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-transfer-branch-transit {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.45);
    border-style: dashed;
    text-align: center;
}

.dia-transfer-branch-transit .dia-transfer-branch-tag {
    color: var(--dia-amber);
}

.dia-transfer-branch-to {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-transfer-branch-to .dia-transfer-branch-tag {
    color: var(--dia-green);
}

.dia-transfer-flow {
    width: 60px;
    height: 18px;
    position: relative;
}

.dia-transfer-arrow {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--dia-line-strong);
    transform: translateY(-50%);
}

.dia-transfer-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 9px solid var(--dia-line-strong);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: translateY(-50%);
}

.dia-transfer-states {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dia-transfer-state {
    position: relative;
    padding: 14px 16px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-transfer-state-num {
    position: absolute;
    top: -10px;
    left: 12px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--dia-violet);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 4px 10px -4px rgba(104, 73, 255, 0.55);
}

.dia-transfer-state-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-transfer-state-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-transfer-state-amber .dia-transfer-state-num {
    background: var(--dia-amber);
    box-shadow: 0 4px 10px -4px rgba(255, 154, 60, 0.55);
}

.dia-transfer-state-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-transfer-state-green .dia-transfer-state-num {
    background: var(--dia-green);
    box-shadow: 0 4px 10px -4px rgba(22, 177, 135, 0.55);
}

.dia-transfer-state strong {
    display: block;
    margin-top: 6px;
    color: var(--dia-ink);
    font-size: 0.98rem;
    font-weight: 900;
}

.dia-transfer-state p {
    margin: 4px 0 0;
    color: var(--dia-ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.dia-transfer-state p em {
    color: var(--dia-amber);
    font-style: normal;
    font-weight: 700;
}

/* ============================================================
   Responsive for new diagrams
   ============================================================ */
@media (max-width: 900px) {
    .dia-cl-headers,
    .dia-cl-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dia-cl-label {
        display: none;
    }

    .dia-pipeline-track {
        grid-template-columns: 1fr;
    }

    .dia-pipeline-track::before {
        display: none;
    }

    .dia-pipeline-context {
        grid-template-columns: 1fr;
    }

    .dia-transfer-branches {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dia-transfer-flow {
        width: 100%;
        height: 18px;
        transform: rotate(90deg);
        margin: -12px 0;
    }

    .dia-transfer-states {
        grid-template-columns: 1fr;
    }

    .dia-phone-fork,
    .dia-phone-outcomes {
        grid-template-columns: 1fr;
    }

    .dia-phone-fork::before {
        display: none;
    }
}

/* ============================================================
   Diagram: Food Hygiene SFBB diary
   ============================================================ */
.dia-diary {
    display: grid;
    gap: 18px;
}

.dia-diary-setup,
.dia-diary-export {
    padding: 18px 22px;
    border-radius: 14px;
    text-align: center;
}

.dia-diary-setup {
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px -16px rgba(104, 73, 255, 0.55);
}

.dia-diary-export {
    background: linear-gradient(135deg, #0a1326 0%, #1a253c 100%);
    color: #ffffff;
}

.dia-diary-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
}

.dia-diary-setup strong,
.dia-diary-export strong {
    display: block;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-diary-setup p,
.dia-diary-export p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
}

.dia-diary-logs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    position: relative;
}

.dia-diary-logs::before,
.dia-diary-logs::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: var(--dia-line-strong);
    transform: translateX(-50%);
}

.dia-diary-logs::before {
    top: -18px;
    height: 18px;
}

.dia-diary-logs::after {
    bottom: -18px;
    height: 18px;
}

.dia-diary-log {
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-diary-log-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
}

.dia-diary-log-violet { background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%); border-color: rgba(104,73,255,0.35); }
.dia-diary-log-violet .dia-diary-log-tag { background: rgba(104, 73, 255, 0.18); color: var(--dia-violet); }

.dia-diary-log-amber { background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%); border-color: rgba(255,154,60,0.35); }
.dia-diary-log-amber .dia-diary-log-tag { background: rgba(255, 154, 60, 0.18); color: var(--dia-amber); }

.dia-diary-log-green { background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%); border-color: rgba(22,177,135,0.35); }
.dia-diary-log-green .dia-diary-log-tag { background: rgba(22, 177, 135, 0.18); color: var(--dia-green); }

.dia-diary-log-red { background: linear-gradient(135deg, rgba(239,93,93,0.08) 0%, #ffffff 100%); border-color: rgba(239,93,93,0.45); }
.dia-diary-log-red .dia-diary-log-tag { background: rgba(239, 93, 93, 0.18); color: var(--dia-red); }

.dia-diary-log strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.dia-diary-log p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* ============================================================
   Diagram: Date Labels print flow
   ============================================================ */
.dia-labels {
    display: grid;
    gap: 18px;
}

.dia-labels-inputs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dia-labels-input {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-labels-input-tag {
    display: block;
    margin-bottom: 6px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-labels-input strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.96rem;
    font-weight: 800;
}

.dia-labels-input p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.dia-labels-input p b {
    color: var(--dia-ink-soft);
    font-weight: 700;
}

.dia-labels-input-violet { background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%); border-color: rgba(104,73,255,0.35); }
.dia-labels-input-violet .dia-labels-input-tag { color: var(--dia-violet); }

.dia-labels-input-amber { background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%); border-color: rgba(255,154,60,0.35); }
.dia-labels-input-amber .dia-labels-input-tag { color: var(--dia-amber); }

.dia-labels-input-green { background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%); border-color: rgba(22,177,135,0.35); }
.dia-labels-input-green .dia-labels-input-tag { color: var(--dia-green); }

.dia-labels-render {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.dia-labels-render-arrow {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dia-violet) 50%, transparent);
}

.dia-labels-render-card {
    padding: 14px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 2px dashed var(--dia-violet);
    text-align: center;
    min-width: 220px;
}

.dia-labels-render-card span {
    display: block;
    color: var(--dia-violet);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
}

.dia-labels-render-card strong {
    display: block;
    margin: 4px 0 2px;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.dia-labels-render-card p {
    margin: 0;
    color: var(--dia-muted);
    font-size: 0.76rem;
}

.dia-labels-drivers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dia-labels-driver {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-labels-driver-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dia-labels-driver strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.dia-labels-driver p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
}

.dia-labels-driver-on {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-labels-driver-on .dia-labels-driver-tag {
    background: var(--dia-green);
    color: #ffffff;
}

.dia-labels-driver-soon {
    background: #ffffff;
    border-style: dashed;
}

.dia-labels-driver-soon .dia-labels-driver-tag {
    background: var(--dia-soft);
    color: var(--dia-muted);
}

.dia-labels-audit {
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0a1326 0%, #1a253c 100%);
    color: #ffffff;
    text-align: center;
}

.dia-labels-audit-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}

.dia-labels-audit strong {
    display: block;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
}

.dia-labels-audit p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
}

/* ============================================================
   Diagram: HR time entry lifecycle
   ============================================================ */
.dia-hr {
    display: grid;
    gap: 18px;
}

.dia-hr-badge {
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 14px 28px -16px rgba(104, 73, 255, 0.55);
}

.dia-hr-eyebrow {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}

.dia-hr-badge strong {
    display: block;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-hr-badge p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
}

.dia-hr-states {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    position: relative;
}

.dia-hr-states::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--dia-violet) 0%, var(--dia-violet-2) 50%, var(--dia-green) 100%);
    z-index: 0;
    opacity: 0.18;
    border-radius: 999px;
}

.dia-hr-state {
    position: relative;
    z-index: 1;
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    text-align: center;
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-hr-state-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--dia-violet-soft);
    color: var(--dia-violet);
    font-size: 0.82rem;
    font-weight: 900;
}

.dia-hr-state strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-hr-state p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.dia-hr-state-violet {
    background: linear-gradient(135deg, var(--dia-violet) 0%, var(--dia-violet-2) 100%);
    border-color: transparent;
    color: #ffffff;
}

.dia-hr-state-violet .dia-hr-state-num {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.dia-hr-state-violet strong {
    color: #ffffff;
}

.dia-hr-state-violet p {
    color: rgba(255, 255, 255, 0.85);
}

.dia-hr-state-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-hr-state-green .dia-hr-state-num {
    background: var(--dia-green);
    color: #ffffff;
}

.dia-hr-context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dia-hr-context-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
}

.dia-hr-context-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-hr-context-card strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.dia-hr-context-card p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.dia-hr-context-card-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-hr-context-card-violet span { color: var(--dia-violet); }

.dia-hr-context-card-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-hr-context-card-amber span { color: var(--dia-amber); }

.dia-hr-context-card-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-hr-context-card-green span { color: var(--dia-green); }

/* ============================================================
   Diagram: CRM unified touchpoint timeline
   ============================================================ */
.dia-crm {
    display: grid;
    gap: 14px;
}

.dia-crm-streams {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dia-crm-stream {
    padding: 16px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--dia-line);
    box-shadow: 0 4px 10px -6px rgba(8, 18, 36, 0.16);
}

.dia-crm-stream-tag {
    display: block;
    margin-bottom: 6px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dia-crm-stream strong {
    display: block;
    color: var(--dia-ink);
    font-size: 0.98rem;
    font-weight: 800;
}

.dia-crm-stream p {
    margin: 4px 0 0;
    color: var(--dia-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.dia-crm-stream-violet {
    background: linear-gradient(135deg, var(--dia-violet-soft) 0%, #ffffff 100%);
    border-color: rgba(104, 73, 255, 0.35);
}

.dia-crm-stream-violet .dia-crm-stream-tag { color: var(--dia-violet); }

.dia-crm-stream-green {
    background: linear-gradient(135deg, var(--dia-green-soft) 0%, #ffffff 100%);
    border-color: rgba(22, 177, 135, 0.35);
}

.dia-crm-stream-green .dia-crm-stream-tag { color: var(--dia-green); }

.dia-crm-stream-amber {
    background: linear-gradient(135deg, var(--dia-amber-soft) 0%, #ffffff 100%);
    border-color: rgba(255, 154, 60, 0.35);
}

.dia-crm-stream-amber .dia-crm-stream-tag { color: var(--dia-amber); }

.dia-crm-arrows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 0 6px;
}

.dia-crm-arrows span {
    display: block;
    height: 18px;
    width: 2px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--dia-violet), transparent);
    position: relative;
}

.dia-crm-arrows span::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--dia-violet);
    opacity: 0.6;
}

.dia-crm-record {
    padding: 22px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0a1326 0%, #1a253c 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px -16px rgba(8, 18, 36, 0.55);
}

.dia-crm-record-eyebrow {
    display: block;
    color: #c7b8ff;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}

.dia-crm-record > strong {
    display: block;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.dia-crm-record > p {
    margin: 4px 0 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
}

.dia-crm-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
}

.dia-crm-timeline-list li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.dia-crm-timeline-list li:last-child {
    border-bottom: none;
}

.dia-crm-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dia-violet);
}

.dia-crm-row-dot.is-violet { background: var(--dia-violet-2); box-shadow: 0 0 0 3px rgba(141, 120, 255, 0.18); }
.dia-crm-row-dot.is-green { background: var(--dia-green); box-shadow: 0 0 0 3px rgba(22, 177, 135, 0.18); }
.dia-crm-row-dot.is-amber { background: var(--dia-amber); box-shadow: 0 0 0 3px rgba(255, 154, 60, 0.18); }

.dia-crm-row-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.86rem;
}

.dia-crm-row-text b {
    color: #ffffff;
    font-weight: 800;
    margin-right: 6px;
}

.dia-crm-row-time {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .dia-diary-logs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dia-diary-logs::before,
    .dia-diary-logs::after {
        display: none;
    }

    .dia-labels-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dia-labels-render {
        grid-template-columns: 1fr;
    }

    .dia-labels-render-arrow {
        height: 16px;
        width: 2px;
        background: linear-gradient(180deg, transparent, var(--dia-violet) 50%, transparent);
        margin: 0 auto;
    }

    .dia-labels-drivers {
        grid-template-columns: 1fr;
    }

    .dia-hr-states {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dia-hr-states::before {
        display: none;
    }

    .dia-hr-context {
        grid-template-columns: 1fr;
    }

    .dia-crm-streams {
        grid-template-columns: 1fr;
    }

    .dia-crm-arrows {
        display: none;
    }
}

@media (max-width: 760px) {
    .dia-diary-logs,
    .dia-labels-inputs,
    .dia-hr-states {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Company page (premium) — /company
   ========================================================================== */

.company-premium-page {
    --co-bg: #f4f6fb;
    --co-soft: #eef1f8;
    --co-ink: #08111f;
    --co-ink-soft: #1f2a40;
    --co-muted: #5b667c;
    --co-line: #dde3ef;
    --co-violet: #6849ff;
    --co-violet-2: #8d78ff;
    --co-violet-soft: #e9e3ff;
    --co-amber: #ff9a3c;
    --co-amber-soft: #fff0dc;
    --co-green: #16b187;
    --co-green-soft: #ddf6ec;
    --co-blue: #3a6aff;
    --co-blue-soft: #e0e9ff;
    --co-dark: #0b1326;
    --co-dark-2: #050b18;
    --co-dark-3: #131334;
    background: var(--co-bg);
    color: var(--co-ink);
}

.company-premium-page .nav-links a[aria-current="page"] {
    color: var(--co-violet);
}

.company-main {
    overflow: hidden;
    background: var(--co-bg);
}

/* Shared eyebrow / kicker / link */
.company-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--co-violet);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.company-kicker-light {
    color: #b8a8ff;
}

.company-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #c7b8ff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.company-eyebrow > span:first-child {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--co-amber);
    box-shadow: 0 0 0 5px rgba(255, 154, 60, 0.18);
}

.company-eyebrow i {
    font-style: normal;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.company-eyebrow em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(22, 177, 135, 0.18);
    color: #71f0b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.company-eyebrow em::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #21c986;
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.25);
}

.company-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--co-violet);
    font-size: 0.96rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.18s ease, color 0.18s ease;
}

.company-link span[aria-hidden] {
    transition: transform 0.18s ease;
}

.company-link:hover {
    gap: 10px;
    color: var(--co-violet-2);
}

.company-link:hover span[aria-hidden] {
    transform: translateX(3px);
}

.company-link-light {
    margin-top: 36px;
    color: #c7b8ff;
}

.company-link-light:hover {
    color: #ffffff;
}

/* Buttons */
.company-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.company-button span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
}

.company-button:hover span[aria-hidden="true"] {
    transform: translateX(3px);
}

.company-premium-page .company-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #6849ff 0%, #8d78ff 100%);
    box-shadow: 0 24px 48px -22px rgba(104, 73, 255, 0.65);
}

.company-premium-page .company-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 30px 60px -22px rgba(104, 73, 255, 0.75);
    color: #ffffff;
}

.company-premium-page .company-button-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.company-premium-page .company-button-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.company-premium-page .company-button-ghost {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.company-premium-page .company-button-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.company-premium-page .company-button-dark {
    color: #ffffff;
    background: var(--co-ink);
}

.company-premium-page .company-button-dark:hover {
    background: #1a253c;
    color: #ffffff;
}

/* Reveal animations (shared pattern) */
.company-premium-page [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.company-premium-page [data-reveal].is-visible,
.company-premium-page [data-reveal] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .company-premium-page [data-reveal] {
        transition: none;
    }
}

/* ============== HERO ============== */
.company-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 0 96px;
    color: #ffffff;
    background:
        radial-gradient(circle at 80% 14%, rgba(141, 120, 255, 0.34), transparent 38%),
        radial-gradient(circle at 10% 86%, rgba(58, 106, 255, 0.22), transparent 44%),
        linear-gradient(140deg, var(--co-dark-3) 0%, var(--co-dark) 50%, var(--co-dark-2) 100%);
}

.company-hero-glow {
    position: absolute;
    inset: -30% 0 auto -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(104, 73, 255, 0.36), transparent 70%);
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

.company-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.company-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.company-hero-orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.6;
}

.company-hero-orbs span:nth-child(1) {
    width: 280px;
    height: 280px;
    top: 8%;
    right: -6%;
    background: radial-gradient(closest-side, rgba(255, 154, 60, 0.42), transparent 70%);
}

.company-hero-orbs span:nth-child(2) {
    width: 220px;
    height: 220px;
    bottom: -8%;
    left: 28%;
    background: radial-gradient(closest-side, rgba(22, 177, 135, 0.4), transparent 70%);
}

.company-hero-orbs span:nth-child(3) {
    width: 320px;
    height: 320px;
    top: 32%;
    left: -8%;
    background: radial-gradient(closest-side, rgba(58, 106, 255, 0.34), transparent 70%);
}

.company-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    gap: 80px;
    align-items: center;
}

.company-hero-copy h1 {
    margin: 0;
    max-width: 720px;
    color: #ffffff;
    font-size: var(--marketing-hero-h1-size, clamp(2.4rem, 5vw, 4rem));
    font-weight: 950;
    line-height: var(--marketing-hero-h1-line-height, 1.04);
    letter-spacing: -0.015em;
}

.company-hero-copy h1 span {
    background: linear-gradient(120deg, #b39bff 0%, #ffb676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.company-hero-subtitle {
    max-width: 640px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.14rem;
    line-height: 1.7;
}

.company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.company-honesty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
}

.company-honesty span[aria-hidden="true"] {
    color: var(--co-amber);
    font-size: 1.2rem;
    line-height: 0.5;
}

/* Hero visual — investor brief card */
.company-hero-visual {
    position: relative;
}

.company-brief-shell {
    position: relative;
    padding: 28px 28px 24px;
    border-radius: 26px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 10, 24, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(141, 120, 255, 0.1) inset;
    color: #ffffff;
}

.company-brief-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 27px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(141, 120, 255, 0.5), rgba(58, 106, 255, 0.1) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.company-brief-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.company-brief-head > div span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.company-brief-head > div strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.company-brief-head p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(22, 177, 135, 0.18);
    color: #71f0b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.company-brief-head p::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #21c986;
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.25);
}

.company-brief-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0 0 22px;
    padding: 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.company-brief-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background 0.18s ease;
}

.company-brief-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.company-brief-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(141, 120, 255, 0.22), rgba(58, 106, 255, 0.06));
    color: #c7b8ff;
    border: 1px solid rgba(141, 120, 255, 0.22);
}

.company-brief-icon svg {
    width: 18px;
    height: 18px;
}

.company-brief-list dt {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.company-brief-list dd {
    margin: 0;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-align: right;
}

.company-brief-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.company-brief-foot span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: rgba(255, 154, 60, 0.18);
    color: #ffc188;
    border: 1px solid rgba(255, 154, 60, 0.28);
}

.company-brief-foot span svg {
    width: 16px;
    height: 16px;
}

.company-brief-foot p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ============== SECTION HEADINGS ============== */
.company-section-heading {
    max-width: 760px;
    margin: 0 0 48px;
}

.company-section-heading h2 {
    margin: 0;
    color: var(--co-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.company-section-heading p {
    margin: 18px 0 0;
    color: var(--co-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.company-section-heading-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.company-section-heading-row > div {
    max-width: 720px;
}

/* ============== MANIFESTO ============== */
.company-manifesto-section {
    padding: 100px 0;
    background: var(--co-bg);
}

.company-manifesto-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
    padding: 56px 60px 60px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid var(--co-line);
    box-shadow: 0 60px 120px -60px rgba(8, 18, 36, 0.32);
    overflow: hidden;
}

.company-manifesto-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% -10%, rgba(255, 154, 60, 0.12), transparent 40%),
        radial-gradient(circle at 6% 110%, rgba(104, 73, 255, 0.12), transparent 50%);
    pointer-events: none;
}

.company-manifesto-copy {
    position: relative;
}

.company-manifesto-copy h2 {
    margin: 0;
    color: var(--co-ink);
    font-size: clamp(2rem, 4.1vw, 3.1rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.company-manifesto-copy p {
    margin: 24px 0 0;
    color: var(--co-ink-soft);
    font-size: 1.06rem;
    line-height: 1.7;
}

.company-manifesto-quote {
    position: relative;
    margin: 0;
    padding: 36px 32px 32px;
    border-radius: 22px;
    background: linear-gradient(155deg, var(--co-dark-3) 0%, var(--co-dark) 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 50px 90px -50px rgba(8, 18, 36, 0.6);
}

.company-quote-mark {
    display: inline-flex;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    color: #b39bff;
    opacity: 0.85;
}

.company-quote-mark svg {
    width: 100%;
    height: 100%;
}

.company-manifesto-quote blockquote {
    margin: 0;
    color: #ffffff;
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.company-manifesto-quote figcaption {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    font-style: normal;
}

.company-manifesto-quote figcaption::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--co-amber);
}

.company-quote-orb {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(141, 120, 255, 0.45), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

/* ============== PRINCIPLES ============== */
.company-principles-section {
    padding: 100px 0;
    background: var(--co-soft);
    border-block: 1px solid var(--co-line);
}

.company-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.company-principle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--co-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.company-principle-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(104, 73, 255, 0.35), rgba(58, 106, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.company-principle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.35);
}

.company-principle-card:hover::before {
    opacity: 1;
}

.company-principle-num {
    position: absolute;
    top: 22px;
    right: 24px;
    color: var(--co-violet);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    opacity: 0.55;
}

.company-principle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.company-principle-icon svg {
    width: 24px;
    height: 24px;
}

.company-principle-card:nth-child(2) .company-principle-icon {
    background: linear-gradient(150deg, var(--co-amber-soft), #ffffff);
    color: var(--co-amber);
    border-color: rgba(255, 154, 60, 0.2);
}

.company-principle-card:nth-child(3) .company-principle-icon {
    background: linear-gradient(150deg, var(--co-green-soft), #ffffff);
    color: var(--co-green);
    border-color: rgba(22, 177, 135, 0.2);
}

.company-principle-card:nth-child(4) .company-principle-icon {
    background: linear-gradient(150deg, var(--co-blue-soft), #ffffff);
    color: var(--co-blue);
    border-color: rgba(58, 106, 255, 0.2);
}

.company-principle-card:nth-child(5) .company-principle-icon {
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border-color: rgba(104, 73, 255, 0.16);
}

.company-principle-card:nth-child(6) .company-principle-icon {
    background: linear-gradient(150deg, var(--co-amber-soft), #ffffff);
    color: var(--co-amber);
    border-color: rgba(255, 154, 60, 0.2);
}

.company-principle-card h3 {
    margin: 0;
    color: var(--co-ink);
    font-size: 1.16rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.company-principle-card p {
    margin: 0;
    color: var(--co-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ============== PLATFORM SUITES (dark) ============== */
.company-platform-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 100px;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 10%, rgba(141, 120, 255, 0.22), transparent 40%),
        radial-gradient(circle at 88% 96%, rgba(58, 106, 255, 0.16), transparent 44%),
        linear-gradient(160deg, var(--co-dark-3) 0%, var(--co-dark) 60%, var(--co-dark-2) 100%);
}

.company-platform-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.company-platform-section .company-section-heading h2 {
    color: #ffffff;
}

.company-platform-section .company-section-heading p {
    color: rgba(255, 255, 255, 0.72);
}

.company-suite-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.company-suite-mesh span {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
}

.company-suite-mesh span:nth-child(1) {
    width: 240px;
    height: 240px;
    top: 12%;
    right: 8%;
    background: radial-gradient(closest-side, rgba(255, 154, 60, 0.4), transparent 70%);
}

.company-suite-mesh span:nth-child(2) {
    width: 220px;
    height: 220px;
    bottom: 8%;
    left: 12%;
    background: radial-gradient(closest-side, rgba(22, 177, 135, 0.4), transparent 70%);
}

.company-suite-mesh span:nth-child(3) {
    width: 180px;
    height: 180px;
    top: 40%;
    left: 38%;
    background: radial-gradient(closest-side, rgba(141, 120, 255, 0.4), transparent 70%);
}

.company-suite-mesh span:nth-child(4) {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 30%;
    background: radial-gradient(closest-side, rgba(58, 106, 255, 0.4), transparent 70%);
}

.company-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 12px;
}

.company-suite-card {
    position: relative;
    padding: 28px 26px 26px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 10, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: transform 0.18s ease, border 0.18s ease, background 0.18s ease;
}

.company-suite-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(141, 120, 255, 0.4), transparent 60%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.company-suite-card:hover {
    transform: translateY(-3px);
    border-color: rgba(141, 120, 255, 0.32);
}

.company-suite-card:hover::before {
    opacity: 1;
}

.company-suite-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(141, 120, 255, 0.22), rgba(58, 106, 255, 0.06));
    color: #b39bff;
    border: 1px solid rgba(141, 120, 255, 0.22);
}

.company-suite-icon svg {
    width: 22px;
    height: 22px;
}

.company-suite-card:nth-child(4n+2) .company-suite-icon {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.2), rgba(255, 154, 60, 0.04));
    color: #ffc188;
    border-color: rgba(255, 154, 60, 0.28);
}

.company-suite-card:nth-child(4n+3) .company-suite-icon {
    background: linear-gradient(150deg, rgba(22, 177, 135, 0.22), rgba(22, 177, 135, 0.04));
    color: #71f0b8;
    border-color: rgba(22, 177, 135, 0.3);
}

.company-suite-card:nth-child(4n) .company-suite-icon {
    background: linear-gradient(150deg, rgba(58, 106, 255, 0.24), rgba(58, 106, 255, 0.04));
    color: #97b5ff;
    border-color: rgba(58, 106, 255, 0.3);
}

.company-suite-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.company-suite-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ============== MARKET (why now) ============== */
.company-market-section {
    padding: 110px 0 100px;
    background: var(--co-soft);
    border-block: 1px solid var(--co-line);
}

.company-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: start;
}

.company-market-copy h2 {
    margin: 0;
    color: var(--co-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.company-market-copy p {
    margin: 22px 0 0;
    color: var(--co-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.company-market-copy .company-link {
    margin-top: 26px;
}

.company-market-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: market;
}

.company-market-list li {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: start;
    gap: 22px;
    padding: 26px 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--co-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.company-market-list li:hover {
    transform: translateX(2px);
    border-color: rgba(104, 73, 255, 0.32);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.3);
}

.company-market-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.company-market-list li:nth-child(2) .company-market-num {
    background: linear-gradient(150deg, var(--co-amber-soft), #ffffff);
    color: var(--co-amber);
    border-color: rgba(255, 154, 60, 0.2);
}

.company-market-list li:nth-child(3) .company-market-num {
    background: linear-gradient(150deg, var(--co-green-soft), #ffffff);
    color: var(--co-green);
    border-color: rgba(22, 177, 135, 0.2);
}

.company-market-list li:nth-child(4) .company-market-num {
    background: linear-gradient(150deg, var(--co-blue-soft), #ffffff);
    color: var(--co-blue);
    border-color: rgba(58, 106, 255, 0.2);
}

.company-market-list li strong {
    display: block;
    color: var(--co-ink);
    font-size: 1.12rem;
    font-weight: 850;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.company-market-list li p {
    margin: 8px 0 0;
    color: var(--co-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ============== OPERATORS ============== */
.company-operators-section {
    padding: 110px 0 100px;
    background: var(--co-bg);
}

.company-operator-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.company-operator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px 26px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--co-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.company-operator-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(104, 73, 255, 0.35), rgba(58, 106, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.company-operator-card:hover {
    transform: translateY(-4px);
    border-color: rgba(104, 73, 255, 0.25);
    box-shadow: 0 40px 80px -42px rgba(8, 18, 36, 0.4);
}

.company-operator-card:hover::before {
    opacity: 1;
}

.company-operator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.company-operator-icon svg {
    width: 24px;
    height: 24px;
}

.company-operator-card:nth-child(2) .company-operator-icon {
    background: linear-gradient(150deg, var(--co-amber-soft), #ffffff);
    color: var(--co-amber);
    border-color: rgba(255, 154, 60, 0.2);
}

.company-operator-card:nth-child(3) .company-operator-icon {
    background: linear-gradient(150deg, var(--co-green-soft), #ffffff);
    color: var(--co-green);
    border-color: rgba(22, 177, 135, 0.2);
}

.company-operator-card:nth-child(4) .company-operator-icon {
    background: linear-gradient(150deg, var(--co-blue-soft), #ffffff);
    color: var(--co-blue);
    border-color: rgba(58, 106, 255, 0.2);
}

.company-operator-card:nth-child(5) .company-operator-icon {
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border-color: rgba(104, 73, 255, 0.16);
}

.company-operator-card h3 {
    margin: 0;
    color: var(--co-ink);
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.company-operator-card p {
    margin: 0;
    color: var(--co-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    flex: 1;
}

.company-operator-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--co-violet);
    font-size: 0.92rem;
    font-weight: 800;
}

.company-operator-card strong span {
    transition: transform 0.18s ease;
}

.company-operator-card:hover strong span {
    transform: translateX(3px);
}

/* ============== INVESTOR PANEL ============== */
.company-investor-section {
    padding: 110px 0 100px;
    background: var(--co-bg);
}

.company-investor-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
    padding: 60px 64px;
    border-radius: 32px;
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 154, 60, 0.24), transparent 38%),
        radial-gradient(circle at 8% 96%, rgba(141, 120, 255, 0.36), transparent 42%),
        linear-gradient(160deg, var(--co-dark-3) 0%, var(--co-dark) 60%, var(--co-dark-2) 100%);
    overflow: hidden;
    box-shadow: 0 60px 140px -60px rgba(8, 18, 36, 0.6);
}

.company-investor-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.company-investor-copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.company-investor-copy p {
    margin: 22px 0 30px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 600px;
}

.company-investor-copy .company-actions {
    margin-top: 4px;
}

.company-investor-points {
    margin: 0;
    padding: 28px 28px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    display: grid;
    gap: 18px;
}

.company-investor-points > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: baseline;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.company-investor-points > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.company-investor-points dt {
    color: #b8a8ff;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.company-investor-points dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.55;
}

/* ============== RELATED ============== */
.company-related-section {
    padding: 100px 0 80px;
    background: var(--co-bg);
}

.company-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.company-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 28px 26px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--co-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.company-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 255, 0.3);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.3);
}

.company-related-card > span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--co-violet-soft), #ffffff);
    color: var(--co-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.company-related-card > span[aria-hidden] svg {
    width: 22px;
    height: 22px;
}

.company-related-card h3 {
    margin: 0;
    color: var(--co-ink);
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.company-related-card p {
    margin: 0;
    color: var(--co-muted);
    font-size: 0.94rem;
    line-height: 1.6;
    flex: 1;
}

.company-related-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--co-violet);
    font-size: 0.92rem;
    font-weight: 800;
}

/* ============== FINAL CTA ============== */
.company-final-section {
    padding: 90px 0 110px;
    background: var(--co-bg);
}

.company-final-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: center;
    padding: 56px 60px;
    border-radius: 32px;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 18%, rgba(141, 120, 255, 0.35), transparent 40%),
        radial-gradient(circle at 88% 90%, rgba(255, 154, 60, 0.2), transparent 42%),
        linear-gradient(160deg, var(--co-dark-3) 0%, var(--co-dark) 60%, var(--co-dark-2) 100%);
    overflow: hidden;
}

.company-final-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.company-final-grid h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.company-final-grid p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 540px;
}

.company-final-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.company-final-actions .company-button {
    min-width: 240px;
    justify-content: space-between;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1120px) {
    .company-hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .company-manifesto-panel {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 44px 36px 48px;
    }

    .company-market-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .company-investor-panel {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 48px 40px;
    }

    .company-final-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 44px 36px;
    }

    .company-final-actions {
        align-items: flex-start;
    }
}

@media (max-width: 960px) {
    .company-hero {
        padding: 92px 0 72px;
    }

    .company-principles-grid,
    .company-suite-grid,
    .company-operator-grid,
    .company-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 680px) {
    .company-hero {
        padding: 80px 0 60px;
    }

    .company-hero-copy h1 {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .company-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .company-button {
        justify-content: center;
    }

    .company-brief-shell {
        padding: 22px 20px 20px;
    }

    .company-brief-row {
        grid-template-columns: 32px 1fr auto;
        padding: 10px 10px;
    }

    .company-brief-list dd {
        font-size: 0.9rem;
    }

    .company-manifesto-section,
    .company-principles-section,
    .company-platform-section,
    .company-market-section,
    .company-operators-section,
    .company-investor-section,
    .company-related-section,
    .company-final-section {
        padding: 72px 0;
    }

    .company-manifesto-panel,
    .company-investor-panel,
    .company-final-grid {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .company-principles-grid,
    .company-suite-grid,
    .company-operator-grid,
    .company-related-grid {
        grid-template-columns: 1fr;
    }

    .company-investor-points > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .company-final-actions .company-button {
        min-width: 0;
        width: 100%;
    }

    .company-market-list li {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 22px;
    }

    .company-market-num {
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   Wholesale page (premium) — /wholesale
   ========================================================================== */

.wholesale-premium-page {
    --ws-bg: #f4f6fb;
    --ws-soft: #eef1f8;
    --ws-ink: #08111f;
    --ws-ink-soft: #1f2a40;
    --ws-muted: #5b667c;
    --ws-line: #dde3ef;
    --ws-emerald: #16b187;
    --ws-emerald-2: #21c986;
    --ws-emerald-soft: #ddf6ec;
    --ws-amber: #ff9a3c;
    --ws-amber-2: #ffc188;
    --ws-amber-soft: #fff0dc;
    --ws-violet: #6849ff;
    --ws-violet-soft: #e9e3ff;
    --ws-blue: #3a6aff;
    --ws-blue-soft: #e0e9ff;
    --ws-dark: #0b1326;
    --ws-dark-2: #050b18;
    --ws-dark-3: #102139;
    background: var(--ws-bg);
    color: var(--ws-ink);
}

.wholesale-premium-page .nav-links a[aria-current="page"] {
    color: var(--ws-emerald);
}

.wholesale-main {
    overflow: hidden;
    background: var(--ws-bg);
}

/* Shared eyebrow / kicker / buttons */
.wholesale-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--ws-emerald);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.wholesale-kicker-light {
    color: #71f0b8;
}

.wholesale-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #97f0c6;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.wholesale-eyebrow span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ws-amber);
    box-shadow: 0 0 0 5px rgba(255, 154, 60, 0.18);
}

.wholesale-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.wholesale-button span[aria-hidden="true"] {
    display: inline-flex;
    transition: transform 0.18s ease;
}

.wholesale-button:hover span[aria-hidden="true"] {
    transform: translateX(3px);
}

.wholesale-premium-page .wholesale-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #16b187 0%, #21c986 100%);
    box-shadow: 0 24px 48px -22px rgba(22, 177, 135, 0.6);
}

.wholesale-premium-page .wholesale-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 30px 60px -22px rgba(22, 177, 135, 0.7);
    color: #ffffff;
}

.wholesale-premium-page .wholesale-button-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.wholesale-premium-page .wholesale-button-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.wholesale-premium-page .wholesale-button-ghost {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.wholesale-premium-page .wholesale-button-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ============== HERO ============== */
.wholesale-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 0 100px;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 14%, rgba(22, 177, 135, 0.34), transparent 38%),
        radial-gradient(circle at 12% 86%, rgba(255, 154, 60, 0.22), transparent 44%),
        linear-gradient(140deg, var(--ws-dark-3) 0%, var(--ws-dark) 50%, var(--ws-dark-2) 100%);
}

.wholesale-hero-glow {
    position: absolute;
    inset: -30% 0 auto -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(22, 177, 135, 0.32), transparent 70%);
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

.wholesale-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.wholesale-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.wholesale-hero-orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
}

.wholesale-hero-orbs span:nth-child(1) {
    width: 280px;
    height: 280px;
    top: 8%;
    right: -6%;
    background: radial-gradient(closest-side, rgba(255, 154, 60, 0.42), transparent 70%);
}

.wholesale-hero-orbs span:nth-child(2) {
    width: 220px;
    height: 220px;
    bottom: -8%;
    left: 28%;
    background: radial-gradient(closest-side, rgba(22, 177, 135, 0.4), transparent 70%);
}

.wholesale-hero-orbs span:nth-child(3) {
    width: 320px;
    height: 320px;
    top: 32%;
    left: -8%;
    background: radial-gradient(closest-side, rgba(58, 106, 255, 0.28), transparent 70%);
}

.wholesale-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(460px, 0.95fr);
    gap: 76px;
    align-items: center;
}

.wholesale-hero-copy h1 {
    margin: 0;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.wholesale-hero-copy h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #71f0b8 0%, #ffc188 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.wholesale-hero-subtitle {
    max-width: 600px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.14rem;
    line-height: 1.7;
}

.wholesale-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.wholesale-proof-list {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wholesale-proof-list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.84rem;
    font-weight: 700;
}

.wholesale-proof-list li span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ws-emerald-2);
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.22);
}

/* Hero trade-desk visual */
.wholesale-hero-visual {
    position: relative;
}

.wholesale-tradedesk-shell {
    position: relative;
    padding: 26px 28px 24px;
    border-radius: 28px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(22, 177, 135, 0.12) inset;
    color: #ffffff;
}

.wholesale-tradedesk-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(22, 177, 135, 0.55), rgba(255, 154, 60, 0.18) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.wholesale-tradedesk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.wholesale-tradedesk-head > div span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wholesale-tradedesk-head > div strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.wholesale-tradedesk-head p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(22, 177, 135, 0.18);
    color: #71f0b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wholesale-tradedesk-head p::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ws-emerald-2);
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.25);
    animation: ws-pulse 2s ease-in-out infinite;
}

@keyframes ws-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.wholesale-tradedesk-call {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(22, 177, 135, 0.10);
    border: 1px solid rgba(22, 177, 135, 0.25);
    margin-bottom: 18px;
    position: relative;
}

.wholesale-call-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(22, 177, 135, 0.32), rgba(255, 154, 60, 0.16));
    color: #71f0b8;
    border: 1px solid rgba(22, 177, 135, 0.35);
}

.wholesale-call-avatar svg {
    width: 20px;
    height: 20px;
}

.wholesale-call-meta {
    flex: 1;
    min-width: 0;
}

.wholesale-call-meta strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.wholesale-call-meta span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 600;
}

.wholesale-call-pulse {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ws-emerald-2);
    box-shadow: 0 0 0 0 rgba(33, 201, 134, 0.55);
    animation: ws-call-pulse 1.6s ease-out infinite;
    flex: none;
}

@keyframes ws-call-pulse {
    0% { box-shadow: 0 0 0 0 rgba(33, 201, 134, 0.6); }
    100% { box-shadow: 0 0 0 14px rgba(33, 201, 134, 0); }
}

.wholesale-tradedesk-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 18px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wholesale-tradedesk-meta > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.wholesale-tradedesk-meta > div + div {
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.wholesale-tradedesk-meta dt {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wholesale-tradedesk-meta dd {
    margin: 0;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: right;
}

.wholesale-tradedesk-basket {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wholesale-tradedesk-basket > p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wholesale-tradedesk-basket div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88rem;
    font-weight: 600;
}

.wholesale-tradedesk-basket div:last-of-type {
    border-bottom: 0;
}

.wholesale-tradedesk-basket div b {
    font-weight: 800;
    letter-spacing: -0.005em;
}

.wholesale-tradedesk-basket div.is-back {
    color: #ffc188;
}

.wholesale-tradedesk-basket div.is-back b {
    color: var(--ws-amber);
    background: rgba(255, 154, 60, 0.18);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wholesale-basket-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 0 !important;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.wholesale-basket-total strong {
    color: #ffffff;
}

.wholesale-basket-total b {
    color: var(--ws-emerald-2) !important;
    font-size: 1.18rem !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    background: none !important;
    padding: 0 !important;
}

/* ============== SECTIONS — base ============== */
.wholesale-section {
    padding: 96px 0;
}

.wholesale-section.wholesale-soft {
    background: var(--ws-soft);
    border-block: 1px solid var(--ws-line);
}

.wholesale-section.wholesale-white {
    background: var(--ws-bg);
}

.wholesale-section.wholesale-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 10%, rgba(22, 177, 135, 0.18), transparent 40%),
        radial-gradient(circle at 88% 96%, rgba(255, 154, 60, 0.14), transparent 44%),
        linear-gradient(160deg, var(--ws-dark-3) 0%, var(--ws-dark) 60%, var(--ws-dark-2) 100%);
}

.wholesale-section.wholesale-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.wholesale-section-heading {
    max-width: 760px;
    margin: 0 0 44px;
}

.wholesale-section-heading h2 {
    margin: 0;
    color: var(--ws-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.wholesale-section-heading p {
    margin: 18px 0 0;
    color: var(--ws-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.wholesale-section-heading-dark h2 {
    color: #ffffff;
}

.wholesale-section-heading-dark p {
    color: rgba(255, 255, 255, 0.72);
}

.wholesale-section-copy h2 {
    margin: 0;
    color: var(--ws-ink);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.wholesale-section.wholesale-dark .wholesale-section-copy h2 {
    color: #ffffff;
}

.wholesale-section-copy p {
    margin: 18px 0 0;
    color: var(--ws-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.wholesale-section.wholesale-dark .wholesale-section-copy p {
    color: rgba(255, 255, 255, 0.72);
}

/* ============== PROBLEM ============== */
.wholesale-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}

.wholesale-problem-points {
    display: grid;
    gap: 14px;
}

.wholesale-problem-points article {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: start;
    gap: 22px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.wholesale-problem-points article:hover {
    transform: translateX(2px);
    border-color: rgba(22, 177, 135, 0.32);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.3);
}

.wholesale-problem-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--ws-emerald-soft), #ffffff);
    color: var(--ws-emerald);
    border: 1px solid rgba(22, 177, 135, 0.2);
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.wholesale-problem-points article:nth-child(2) span {
    background: linear-gradient(150deg, var(--ws-amber-soft), #ffffff);
    color: var(--ws-amber);
    border-color: rgba(255, 154, 60, 0.22);
}

.wholesale-problem-points article:nth-child(3) span {
    background: linear-gradient(150deg, var(--ws-blue-soft), #ffffff);
    color: var(--ws-blue);
    border-color: rgba(58, 106, 255, 0.22);
}

.wholesale-problem-points article:nth-child(4) span {
    background: linear-gradient(150deg, var(--ws-violet-soft), #ffffff);
    color: var(--ws-violet);
    border-color: rgba(104, 73, 255, 0.22);
}

.wholesale-problem-points article p {
    margin: 6px 0 0;
    color: var(--ws-ink-soft);
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 600;
}

.wholesale-problem-callout {
    margin-top: 6px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ws-emerald) 0%, var(--ws-emerald-2) 100%);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 24px 48px -22px rgba(22, 177, 135, 0.6);
}

/* ============== TRADE SCENARIOS ============== */
.wholesale-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.wholesale-scenario-card {
    position: relative;
    padding: 26px 26px 24px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.wholesale-scenario-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(22, 177, 135, 0.4), rgba(255, 154, 60, 0.0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.wholesale-scenario-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.35);
}

.wholesale-scenario-card:hover::before {
    opacity: 1;
}

.wholesale-scenario-card span {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--ws-emerald-soft);
    color: var(--ws-emerald);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wholesale-scenario-card:nth-child(4n+2) span {
    background: var(--ws-amber-soft);
    color: var(--ws-amber);
}

.wholesale-scenario-card:nth-child(4n+3) span {
    background: var(--ws-blue-soft);
    color: var(--ws-blue);
}

.wholesale-scenario-card:nth-child(4n) span {
    background: var(--ws-violet-soft);
    color: var(--ws-violet);
}

.wholesale-scenario-card h3 {
    margin: 0 0 10px;
    color: var(--ws-ink);
    font-size: 1.16rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.wholesale-scenario-card p {
    margin: 0;
    color: var(--ws-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ============== FLOW (the trade desk flow) ============== */
.wholesale-flow-section {
    padding: 110px 0;
}

.wholesale-flow-glow {
    position: absolute;
    inset: -20% -10% auto auto;
    width: 60%;
    height: 60%;
    background: radial-gradient(closest-side, rgba(255, 154, 60, 0.18), transparent 70%);
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

.wholesale-flow-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    counter-reset: flow;
}

.wholesale-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr 40px;
    align-items: center;
    gap: 36px;
    padding: 26px 28px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, border 0.18s ease;
}

.wholesale-flow-step::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(22, 177, 135, 0.45), transparent 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.wholesale-flow-step:hover {
    transform: translateX(3px);
    border-color: rgba(22, 177, 135, 0.32);
}

.wholesale-flow-step:hover::before {
    opacity: 1;
}

.wholesale-flow-step-num {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wholesale-flow-step-num span {
    font-size: 2rem;
    font-weight: 950;
    color: var(--ws-emerald-2);
    line-height: 1;
    letter-spacing: -0.02em;
}

.wholesale-flow-step:nth-child(2) .wholesale-flow-step-num span {
    color: var(--ws-amber-2);
}

.wholesale-flow-step:nth-child(3) .wholesale-flow-step-num span {
    color: #97b5ff;
}

.wholesale-flow-step:nth-child(4) .wholesale-flow-step-num span {
    color: #c7b8ff;
}

.wholesale-flow-step:nth-child(5) .wholesale-flow-step-num span {
    color: var(--ws-emerald-2);
}

.wholesale-flow-step-num strong {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.wholesale-flow-step-copy h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.28rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.wholesale-flow-step-copy p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.98rem;
    line-height: 1.55;
}

.wholesale-flow-step-arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.18s ease, transform 0.18s ease;
}

.wholesale-flow-step-arrow svg {
    width: 20px;
    height: 20px;
}

.wholesale-flow-step:hover .wholesale-flow-step-arrow {
    color: var(--ws-emerald-2);
    transform: translateX(4px);
}

/* ============== PRICING ============== */
.wholesale-duo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: start;
}

.wholesale-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.wholesale-pricing-card {
    padding: 20px 22px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
    transition: border 0.18s ease, transform 0.18s ease;
}

.wholesale-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(22, 177, 135, 0.32);
}

.wholesale-pricing-card h3 {
    margin: 0 0 6px;
    color: var(--ws-ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.wholesale-pricing-card p {
    margin: 0;
    color: var(--ws-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wholesale-pricing-board {
    position: relative;
    padding: 28px 28px 24px;
    border-radius: 26px;
    background:
        linear-gradient(160deg, var(--ws-dark-3) 0%, var(--ws-dark) 100%);
    color: #ffffff;
    box-shadow: 0 50px 100px -50px rgba(8, 18, 36, 0.55);
    overflow: hidden;
}

.wholesale-pricing-board::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 27px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(22, 177, 135, 0.55), rgba(255, 154, 60, 0.15) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.wholesale-pricing-board header {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.wholesale-pricing-board header span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wholesale-pricing-board header strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.14rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.wholesale-pricing-board header p {
    margin: 6px 0 0;
    color: #97f0c6;
    font-size: 0.84rem;
    font-weight: 700;
}

.wholesale-pricing-table {
    display: grid;
    gap: 10px;
}

.wholesale-pricing-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wholesale-pricing-row b {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.wholesale-pricing-row span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: line-through;
}

.wholesale-pricing-row em {
    color: #71f0b8;
    font-style: normal;
    font-size: 0.92rem;
    font-weight: 850;
    text-align: right;
    letter-spacing: -0.005em;
}

.wholesale-pricing-board footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wholesale-pricing-board footer span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wholesale-pricing-board footer strong {
    color: var(--ws-emerald-2);
    font-size: 1.6rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

/* ============== STOCK CARDS (dark section) ============== */
.wholesale-stock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.wholesale-stock-card {
    position: relative;
    padding: 26px 24px 24px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: transform 0.18s ease, border 0.18s ease;
}

.wholesale-stock-card:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 177, 135, 0.32);
}

.wholesale-stock-card span {
    display: inline-block;
    width: 32px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ws-emerald), transparent);
    margin-bottom: 16px;
}

.wholesale-stock-card:nth-child(2) span {
    background: linear-gradient(90deg, var(--ws-amber), transparent);
}

.wholesale-stock-card:nth-child(3) span {
    background: linear-gradient(90deg, var(--ws-blue), transparent);
}

.wholesale-stock-card:nth-child(4) span {
    background: linear-gradient(90deg, var(--ws-violet), transparent);
}

.wholesale-stock-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.wholesale-stock-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ============== REPORTING ============== */
.wholesale-reporting-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.wholesale-report-list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wholesale-report-list li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
    color: var(--ws-ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.wholesale-report-list li span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ws-emerald);
}

.wholesale-report-panel {
    padding: 28px 28px 24px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
    box-shadow: 0 40px 80px -50px rgba(8, 18, 36, 0.35);
}

.wholesale-report-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--ws-line);
}

.wholesale-report-head strong {
    color: var(--ws-ink);
    font-size: 1.06rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.wholesale-report-head span {
    color: var(--ws-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wholesale-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.wholesale-report-metrics > div {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--ws-soft);
    border: 1px solid var(--ws-line);
}

.wholesale-report-metrics > div:first-child {
    background: linear-gradient(135deg, var(--ws-emerald-soft), #ffffff);
    border-color: rgba(22, 177, 135, 0.2);
}

.wholesale-report-metrics > div:nth-child(2) {
    background: linear-gradient(135deg, var(--ws-amber-soft), #ffffff);
    border-color: rgba(255, 154, 60, 0.22);
}

.wholesale-report-metrics > div:nth-child(3) {
    background: linear-gradient(135deg, var(--ws-violet-soft), #ffffff);
    border-color: rgba(104, 73, 255, 0.22);
}

.wholesale-report-metrics span {
    display: block;
    color: var(--ws-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wholesale-report-metrics strong {
    display: block;
    margin-top: 4px;
    color: var(--ws-ink);
    font-size: 1.5rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.wholesale-report-customers p {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.7fr);
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--ws-line);
    margin: 0;
    color: var(--ws-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.wholesale-report-customers p:last-child {
    border-bottom: 0;
}

.wholesale-report-customers b {
    color: var(--ws-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wholesale-report-customers strong {
    color: var(--ws-emerald);
    text-align: right;
    font-size: 0.96rem;
    font-weight: 850;
}

/* ============== DEPOT (multi-site) ============== */
.wholesale-depot-section {
    padding: 96px 0;
}

.wholesale-depot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
}

.wholesale-depot-board {
    padding: 28px 28px 24px;
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.wholesale-depot-summary {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.wholesale-depot-summary span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wholesale-depot-summary strong {
    display: block;
    margin: 6px 0 4px;
    color: var(--ws-emerald-2);
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.wholesale-depot-summary p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    font-weight: 600;
}

.wholesale-depot-list {
    display: grid;
    gap: 6px;
}

.wholesale-depot-list p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 700;
}

.wholesale-depot-list p b {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wholesale-depot-list p span {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.005em;
}

/* ============== COMPARISON ============== */
.wholesale-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.wholesale-comparison-card {
    padding: 32px 30px 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--ws-line);
}

.wholesale-comparison-card h3 {
    margin: 0 0 22px;
    color: var(--ws-muted);
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.wholesale-comparison-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.wholesale-comparison-card li {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 12px;
    color: var(--ws-ink-soft);
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 600;
}

.wholesale-comparison-card li span {
    display: inline-block;
    margin-top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ws-line);
}

.wholesale-comparison-card.is-ordello {
    background: linear-gradient(155deg, var(--ws-dark-3) 0%, var(--ws-dark) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 40px 80px -50px rgba(8, 18, 36, 0.55);
    position: relative;
    overflow: hidden;
}

.wholesale-comparison-card.is-ordello::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(160deg, var(--ws-emerald), var(--ws-amber) 60%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.wholesale-comparison-card.is-ordello h3 {
    color: var(--ws-emerald-2);
}

.wholesale-comparison-card.is-ordello li {
    color: rgba(255, 255, 255, 0.92);
}

.wholesale-comparison-card.is-ordello li span {
    background: var(--ws-emerald-2);
    box-shadow: 0 0 0 3px rgba(33, 201, 134, 0.22);
}

.wholesale-closing-line {
    margin: 44px auto 0;
    max-width: 800px;
    text-align: center;
    color: var(--ws-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* ============== FINAL CTA ============== */
.wholesale-final-cta {
    padding: 90px 0 110px;
    background: var(--ws-bg);
}

.wholesale-final-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: center;
    padding: 56px 60px;
    border-radius: 32px;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 18%, rgba(22, 177, 135, 0.34), transparent 40%),
        radial-gradient(circle at 88% 90%, rgba(255, 154, 60, 0.22), transparent 42%),
        linear-gradient(160deg, var(--ws-dark-3) 0%, var(--ws-dark) 60%, var(--ws-dark-2) 100%);
    overflow: hidden;
}

.wholesale-final-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.wholesale-final-panel h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.wholesale-final-panel p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 540px;
}

.wholesale-final-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.wholesale-final-actions .wholesale-button {
    min-width: 240px;
    justify-content: space-between;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1120px) {
    .wholesale-hero-grid,
    .wholesale-problem-grid,
    .wholesale-duo-grid,
    .wholesale-reporting-grid,
    .wholesale-depot-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wholesale-stock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wholesale-flow-step {
        grid-template-columns: 140px 1fr 32px;
        gap: 24px;
    }

    .wholesale-final-panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 44px 36px;
    }

    .wholesale-final-actions {
        align-items: flex-start;
    }
}

@media (max-width: 960px) {
    .wholesale-hero {
        padding: 92px 0 76px;
    }

    .wholesale-scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wholesale-pricing-grid {
        grid-template-columns: 1fr;
    }

    .wholesale-comparison-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .wholesale-section {
        padding: 72px 0;
    }

    .wholesale-hero {
        padding: 76px 0 60px;
    }

    .wholesale-hero-copy h1 {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .wholesale-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wholesale-button {
        justify-content: center;
    }

    .wholesale-scenario-grid,
    .wholesale-stock-grid {
        grid-template-columns: 1fr;
    }

    .wholesale-report-list {
        grid-template-columns: 1fr;
    }

    .wholesale-flow-step {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 22px;
    }

    .wholesale-flow-step-arrow {
        display: none;
    }

    .wholesale-final-panel {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .wholesale-final-actions .wholesale-button {
        min-width: 0;
        width: 100%;
    }

    .wholesale-problem-points article {
        grid-template-columns: 42px 1fr;
        gap: 16px;
        padding: 18px 20px;
    }

    .wholesale-tradedesk-shell {
        padding: 22px 22px 20px;
    }

    .wholesale-tradedesk-meta > div {
        grid-template-columns: 1fr;
    }

    .wholesale-tradedesk-meta dd {
        text-align: left;
    }
}

/* ==========================================================================
   Platform page (premium) — /platform
   ========================================================================== */

.platform-premium-page {
    --pl-bg: #f4f6fb;
    --pl-soft: #eef1f8;
    --pl-ink: #08111f;
    --pl-ink-soft: #1f2a40;
    --pl-muted: #5b667c;
    --pl-line: #dde3ef;
    --pl-violet: #6849ff;
    --pl-violet-2: #8d78ff;
    --pl-violet-soft: #e9e3ff;
    --pl-cyan: #25d3ee;
    --pl-cyan-2: #6be3f4;
    --pl-cyan-soft: #d6f4fa;
    --pl-blue: #3a6aff;
    --pl-blue-soft: #e0e9ff;
    --pl-amber: #ff9a3c;
    --pl-amber-soft: #fff0dc;
    --pl-emerald: #16b187;
    --pl-emerald-soft: #ddf6ec;
    --pl-dark: #0b1326;
    --pl-dark-2: #050b18;
    --pl-dark-3: #131334;
    background: var(--pl-bg);
    color: var(--pl-ink);
}

.platform-premium-page .nav-links a[aria-current="page"] {
    color: var(--pl-violet);
}

.platform-main {
    overflow: hidden;
    background: var(--pl-bg);
}

/* Shared eyebrow / kicker / buttons */
.platform-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--pl-violet);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.platform-kicker-light {
    color: #b8a8ff;
}

.platform-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    color: #c7b8ff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.platform-eyebrow span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pl-cyan);
    box-shadow: 0 0 0 5px rgba(37, 211, 238, 0.22);
}

.platform-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.platform-button span[aria-hidden="true"] {
    display: inline-flex;
    transition: transform 0.18s ease;
}

.platform-button:hover span[aria-hidden="true"] {
    transform: translateX(3px);
}

.platform-premium-page .platform-button-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #6849ff 0%, #8d78ff 100%);
    box-shadow: 0 24px 48px -22px rgba(104, 73, 255, 0.65);
}

.platform-premium-page .platform-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 30px 60px -22px rgba(104, 73, 255, 0.7);
    color: #ffffff;
}

.platform-premium-page .platform-button-secondary {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.platform-premium-page .platform-button-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.platform-premium-page .platform-button-ghost {
    color: #ffffff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
}

.platform-premium-page .platform-button-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* ============== HERO ============== */
.platform-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 128px 0 100px;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 14%, rgba(141, 120, 255, 0.34), transparent 38%),
        radial-gradient(circle at 12% 86%, rgba(37, 211, 238, 0.22), transparent 44%),
        linear-gradient(140deg, var(--pl-dark-3) 0%, var(--pl-dark) 50%, var(--pl-dark-2) 100%);
}

.platform-hero-glow {
    position: absolute;
    inset: -30% 0 auto -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(104, 73, 255, 0.36), transparent 70%);
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

.platform-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.platform-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.platform-hero-orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
}

.platform-hero-orbs span:nth-child(1) {
    width: 280px;
    height: 280px;
    top: 8%;
    right: -6%;
    background: radial-gradient(closest-side, rgba(37, 211, 238, 0.4), transparent 70%);
}

.platform-hero-orbs span:nth-child(2) {
    width: 220px;
    height: 220px;
    bottom: -8%;
    left: 28%;
    background: radial-gradient(closest-side, rgba(141, 120, 255, 0.42), transparent 70%);
}

.platform-hero-orbs span:nth-child(3) {
    width: 320px;
    height: 320px;
    top: 32%;
    left: -8%;
    background: radial-gradient(closest-side, rgba(58, 106, 255, 0.34), transparent 70%);
}

.platform-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(480px, 0.95fr);
    gap: 64px;
    align-items: center;
}

.platform-hero-copy h1 {
    margin: 0;
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.platform-hero-copy h1 span {
    background: linear-gradient(120deg, #b39bff 0%, #6be3f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.platform-hero-subtitle {
    max-width: 640px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.12rem;
    line-height: 1.7;
}

.platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.platform-stat-row {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: flex;
    gap: 36px;
}

.platform-stat-row li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.platform-stat-row strong {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #b39bff 0%, #6be3f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.platform-stat-row span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Hero mesh visual */
.platform-hero-visual {
    position: relative;
}

.platform-mesh {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 620px;
    margin: 0 auto;
    --mesh-radius: 250px;
}

.platform-mesh-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    background: linear-gradient(135deg, rgba(141, 120, 255, 0.3) 0%, rgba(37, 211, 238, 0.22) 100%);
    border: 1px solid rgba(141, 120, 255, 0.4);
    backdrop-filter: blur(12px);
    z-index: 3;
    box-shadow: 0 30px 60px -20px rgba(104, 73, 255, 0.4), 0 0 0 1px rgba(141, 120, 255, 0.15) inset;
}

.platform-mesh-core span {
    color: #c7b8ff;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.18em;
}

.platform-mesh-core strong {
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    padding: 0 14px;
    line-height: 1.2;
}

.platform-mesh-core::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(141, 120, 255, 0.32);
    animation: pl-mesh-rotate 24s linear infinite;
}

.platform-mesh-core::after {
    content: "";
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    border: 1px solid rgba(37, 211, 238, 0.18);
}

@keyframes pl-mesh-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.platform-mesh-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116px;
    padding: 11px 12px;
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.72);
    border: 1px solid rgba(141, 120, 255, 0.22);
    color: #ffffff;
    text-align: center;
    transform:
        translate(-50%, -50%)
        rotate(calc(var(--pos) * 30deg))
        translateY(calc(var(--mesh-radius) * -1))
        rotate(calc(var(--pos) * -30deg));
    box-shadow: 0 20px 40px -20px rgba(8, 18, 36, 0.6);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.platform-mesh-node:hover {
    border-color: rgba(141, 120, 255, 0.5);
    box-shadow: 0 30px 60px -22px rgba(104, 73, 255, 0.5);
    z-index: 4;
}

.platform-mesh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    border-radius: 9px;
    background: linear-gradient(150deg, rgba(141, 120, 255, 0.25), rgba(37, 211, 238, 0.08));
    color: #c7b8ff;
    border: 1px solid rgba(141, 120, 255, 0.22);
}

.platform-mesh-icon svg {
    width: 15px;
    height: 15px;
}

.platform-mesh-node:nth-child(3n) .platform-mesh-icon {
    background: linear-gradient(150deg, rgba(37, 211, 238, 0.28), rgba(141, 120, 255, 0.08));
    color: var(--pl-cyan-2);
    border-color: rgba(37, 211, 238, 0.32);
}

.platform-mesh-node:nth-child(3n+1) .platform-mesh-icon {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.22), rgba(141, 120, 255, 0.06));
    color: #ffc188;
    border-color: rgba(255, 154, 60, 0.28);
}

.platform-mesh-node b {
    display: block;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============== SECTIONS — base ============== */
.platform-section {
    padding: 100px 0;
}

.platform-section.platform-white {
    background: var(--pl-bg);
}

.platform-section.platform-soft {
    background: var(--pl-soft);
    border-block: 1px solid var(--pl-line);
}

.platform-section.platform-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 10%, rgba(141, 120, 255, 0.22), transparent 40%),
        radial-gradient(circle at 88% 96%, rgba(37, 211, 238, 0.16), transparent 44%),
        linear-gradient(160deg, var(--pl-dark-3) 0%, var(--pl-dark) 60%, var(--pl-dark-2) 100%);
}

.platform-section.platform-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}

.platform-section-heading {
    max-width: 760px;
    margin: 0 0 48px;
}

.platform-section-heading h2 {
    margin: 0;
    color: var(--pl-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.platform-section-heading p {
    margin: 18px 0 0;
    color: var(--pl-muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.platform-section-heading-dark h2 {
    color: #ffffff;
}

.platform-section-heading-dark p {
    color: rgba(255, 255, 255, 0.72);
}

/* ============== MODULE GRID ============== */
.platform-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.platform-module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 24px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--pl-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.platform-module-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(104, 73, 255, 0.35), rgba(37, 211, 238, 0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.platform-module-card:hover {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 255, 0.32);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.35);
}

.platform-module-card:hover::before {
    opacity: 1;
}

.platform-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--pl-violet-soft), #ffffff);
    color: var(--pl-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.platform-module-icon svg {
    width: 22px;
    height: 22px;
}

.platform-module-card:nth-child(4n+2) .platform-module-icon {
    background: linear-gradient(150deg, var(--pl-cyan-soft), #ffffff);
    color: var(--pl-cyan);
    border-color: rgba(37, 211, 238, 0.22);
}

.platform-module-card:nth-child(4n+3) .platform-module-icon {
    background: linear-gradient(150deg, var(--pl-amber-soft), #ffffff);
    color: var(--pl-amber);
    border-color: rgba(255, 154, 60, 0.22);
}

.platform-module-card:nth-child(4n) .platform-module-icon {
    background: linear-gradient(150deg, var(--pl-emerald-soft), #ffffff);
    color: var(--pl-emerald);
    border-color: rgba(22, 177, 135, 0.22);
}

.platform-module-card h3 {
    margin: 0;
    color: var(--pl-ink);
    font-size: 1.06rem;
    font-weight: 850;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.platform-module-card p {
    margin: 0;
    color: var(--pl-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    flex: 1;
}

.platform-module-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--pl-violet);
    font-size: 0.88rem;
    font-weight: 800;
}

.platform-module-card strong span {
    transition: transform 0.18s ease;
}

.platform-module-card:hover strong span {
    transform: translateX(3px);
}

/* ============== PLATFORM CAPABILITIES (dark) ============== */
.platform-capabilities-section {
    padding: 110px 0;
}

.platform-capabilities-glow {
    position: absolute;
    inset: -20% auto auto -10%;
    width: 55%;
    height: 55%;
    background: radial-gradient(closest-side, rgba(37, 211, 238, 0.16), transparent 70%);
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

.platform-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.platform-capability-card {
    position: relative;
    padding: 30px 28px 28px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 13, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: transform 0.18s ease, border 0.18s ease;
}

.platform-capability-card:hover {
    transform: translateY(-3px);
    border-color: rgba(141, 120, 255, 0.32);
}

.platform-capability-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(141, 120, 255, 0.25), rgba(37, 211, 238, 0.08));
    color: #c7b8ff;
    border: 1px solid rgba(141, 120, 255, 0.28);
}

.platform-capability-card:nth-child(3n+2) .platform-capability-icon {
    background: linear-gradient(150deg, rgba(37, 211, 238, 0.25), rgba(141, 120, 255, 0.08));
    color: var(--pl-cyan-2);
    border-color: rgba(37, 211, 238, 0.32);
}

.platform-capability-card:nth-child(3n) .platform-capability-icon {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.22), rgba(141, 120, 255, 0.06));
    color: #ffc188;
    border-color: rgba(255, 154, 60, 0.3);
}

.platform-capability-icon svg {
    width: 24px;
    height: 24px;
}

.platform-capability-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.platform-capability-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ============== SUITE DEPTH ============== */
.platform-suites-section {
    padding: 110px 0;
}

.platform-suite-stack {
    display: grid;
    gap: 28px;
}

.platform-suite-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
    padding: 44px 48px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid var(--pl-line);
    transition: border 0.18s ease, box-shadow 0.18s ease;
}

.platform-suite-panel:hover {
    border-color: rgba(104, 73, 255, 0.22);
    box-shadow: 0 50px 100px -50px rgba(8, 18, 36, 0.3);
}

.platform-suite-kicker {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pl-violet-soft);
    color: var(--pl-violet);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.platform-suite-panel:nth-child(2) .platform-suite-kicker {
    background: var(--pl-cyan-soft);
    color: var(--pl-cyan);
}

.platform-suite-panel:nth-child(3) .platform-suite-kicker {
    background: var(--pl-emerald-soft);
    color: var(--pl-emerald);
}

.platform-suite-panel:nth-child(4) .platform-suite-kicker {
    background: var(--pl-blue-soft);
    color: var(--pl-blue);
}

.platform-suite-panel:nth-child(5) .platform-suite-kicker {
    background: var(--pl-amber-soft);
    color: var(--pl-amber);
}

.platform-suite-copy h3 {
    margin: 0;
    color: var(--pl-ink);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.platform-suite-copy > p {
    margin: 18px 0;
    color: var(--pl-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.platform-suite-copy strong {
    display: block;
    color: var(--pl-ink);
    font-size: 0.96rem;
    font-weight: 850;
    letter-spacing: -0.005em;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pl-violet-soft) 0%, var(--pl-cyan-soft) 100%);
    border: 1px solid rgba(104, 73, 255, 0.18);
}

.platform-suite-board {
    position: relative;
    padding: 26px 26px 22px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, var(--pl-dark-3) 0%, var(--pl-dark) 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 40px 80px -50px rgba(8, 18, 36, 0.55);
}

.platform-suite-board::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(141, 120, 255, 0.5), rgba(37, 211, 238, 0.15) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.platform-suite-board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.platform-suite-board-head span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.platform-suite-board-head b {
    color: #c7b8ff;
    font-size: 1.1rem;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.platform-suite-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.platform-suite-chips span {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.78rem;
    font-weight: 700;
}

.platform-suite-signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.platform-suite-signals > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
}

.platform-suite-signals span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-suite-signals strong {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

/* ============== A DAY ON THE PLATFORM ============== */
.platform-day-section {
    padding: 110px 0;
}

.platform-day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    counter-reset: day;
}

.platform-day-list li {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: start;
    gap: 32px;
    padding: 26px 28px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--pl-line);
    transition: transform 0.18s ease, border 0.18s ease;
}

.platform-day-list li:hover {
    transform: translateX(3px);
    border-color: rgba(104, 73, 255, 0.28);
}

.platform-day-num {
    color: var(--pl-violet);
    font-size: 1.36rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.platform-day-list li:nth-child(2) .platform-day-num {
    color: var(--pl-cyan);
}

.platform-day-list li:nth-child(3) .platform-day-num {
    color: var(--pl-amber);
}

.platform-day-list li:nth-child(4) .platform-day-num {
    color: var(--pl-emerald);
}

.platform-day-list li:nth-child(5) .platform-day-num {
    color: var(--pl-blue);
}

.platform-day-list li:nth-child(6) .platform-day-num {
    color: var(--pl-violet);
}

.platform-day-list li strong {
    display: block;
    color: var(--pl-ink);
    font-size: 1.12rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.platform-day-list li p {
    margin: 8px 0 0;
    color: var(--pl-muted);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ============== INDUSTRIES ============== */
.platform-industry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.platform-industry-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 22px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--pl-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border 0.18s ease, box-shadow 0.18s ease;
}

.platform-industry-card:hover {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 255, 0.28);
    box-shadow: 0 30px 60px -36px rgba(8, 18, 36, 0.3);
}

.platform-industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--pl-violet-soft), #ffffff);
    color: var(--pl-violet);
    border: 1px solid rgba(104, 73, 255, 0.16);
}

.platform-industry-card:nth-child(2) .platform-industry-icon {
    background: linear-gradient(150deg, var(--pl-amber-soft), #ffffff);
    color: var(--pl-amber);
    border-color: rgba(255, 154, 60, 0.22);
}

.platform-industry-card:nth-child(3) .platform-industry-icon {
    background: linear-gradient(150deg, var(--pl-emerald-soft), #ffffff);
    color: var(--pl-emerald);
    border-color: rgba(22, 177, 135, 0.22);
}

.platform-industry-card:nth-child(4) .platform-industry-icon {
    background: linear-gradient(150deg, var(--pl-cyan-soft), #ffffff);
    color: var(--pl-cyan);
    border-color: rgba(37, 211, 238, 0.22);
}

.platform-industry-card:nth-child(5) .platform-industry-icon {
    background: linear-gradient(150deg, var(--pl-blue-soft), #ffffff);
    color: var(--pl-blue);
    border-color: rgba(58, 106, 255, 0.22);
}

.platform-industry-icon svg {
    width: 22px;
    height: 22px;
}

.platform-industry-card h3 {
    margin: 0;
    color: var(--pl-ink);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.platform-industry-card p {
    margin: 0;
    color: var(--pl-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    flex: 1;
}

.platform-industry-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--pl-violet);
    font-size: 0.86rem;
    font-weight: 800;
}

/* ============== COMPARISON ============== */
.platform-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.platform-comparison-card {
    padding: 32px 30px 30px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--pl-line);
}

.platform-comparison-card h3 {
    margin: 0 0 22px;
    color: var(--pl-muted);
    font-size: 1.04rem;
    font-weight: 800;
}

.platform-comparison-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.platform-comparison-card li {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 12px;
    color: var(--pl-ink-soft);
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 600;
}

.platform-comparison-card li span {
    display: inline-block;
    margin-top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pl-line);
}

.platform-comparison-card.is-ordello {
    background: linear-gradient(155deg, var(--pl-dark-3) 0%, var(--pl-dark) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 40px 80px -50px rgba(8, 18, 36, 0.55);
    position: relative;
    overflow: hidden;
}

.platform-comparison-card.is-ordello::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    padding: 1px;
    background: linear-gradient(160deg, var(--pl-violet-2), var(--pl-cyan) 60%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.platform-comparison-card.is-ordello h3 {
    color: var(--pl-cyan-2);
}

.platform-comparison-card.is-ordello li {
    color: rgba(255, 255, 255, 0.92);
}

.platform-comparison-card.is-ordello li span {
    background: var(--pl-cyan);
    box-shadow: 0 0 0 3px rgba(37, 211, 238, 0.24);
}

/* ============== FINAL CTA ============== */
.platform-final-cta {
    padding: 90px 0 110px;
    background: var(--pl-bg);
}

.platform-final-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 56px;
    align-items: center;
    padding: 56px 60px;
    border-radius: 32px;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 18%, rgba(141, 120, 255, 0.34), transparent 40%),
        radial-gradient(circle at 88% 90%, rgba(37, 211, 238, 0.22), transparent 42%),
        linear-gradient(160deg, var(--pl-dark-3) 0%, var(--pl-dark) 60%, var(--pl-dark-2) 100%);
    overflow: hidden;
}

.platform-final-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.platform-final-panel h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.platform-final-panel p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 540px;
}

.platform-final-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.platform-final-actions .platform-button {
    min-width: 260px;
    justify-content: space-between;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1200px) {
    .platform-hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .platform-mesh {
        max-width: 540px;
        --mesh-radius: 215px;
    }

    .platform-module-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .platform-industry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .platform-suite-panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 36px;
    }

    .platform-final-panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 44px 36px;
    }

    .platform-final-actions {
        align-items: flex-start;
    }
}

@media (max-width: 960px) {
    .platform-hero {
        padding: 92px 0 76px;
    }

    .platform-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-comparison-grid {
        grid-template-columns: 1fr;
    }

    .platform-stat-row {
        gap: 22px;
    }

    .platform-stat-row strong {
        font-size: 2rem;
    }
}

@media (max-width: 680px) {
    .platform-section {
        padding: 72px 0;
    }

    .platform-hero {
        padding: 76px 0 60px;
    }

    .platform-hero-copy h1 {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .platform-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-button {
        justify-content: center;
    }

    .platform-mesh {
        max-width: 340px;
        --mesh-radius: 138px;
    }

    .platform-mesh-core {
        width: 116px;
        height: 116px;
    }

    .platform-mesh-core strong {
        font-size: 0.78rem;
    }

    .platform-mesh-node {
        width: 92px;
        padding: 8px 10px;
    }

    .platform-mesh-icon {
        width: 26px;
        height: 26px;
    }

    .platform-mesh-icon svg {
        width: 13px;
        height: 13px;
    }

    .platform-mesh-node b {
        font-size: 0.62rem;
    }

    .platform-module-grid,
    .platform-capability-grid,
    .platform-industry-grid {
        grid-template-columns: 1fr;
    }

    .platform-stat-row {
        gap: 18px;
    }

    .platform-stat-row strong {
        font-size: 1.7rem;
    }

    .platform-day-list li {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 22px;
    }

    .platform-suite-panel {
        padding: 28px 24px;
    }

    .platform-final-panel {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .platform-final-actions .platform-button {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Platform page v2 — premium 2026 redesign — /platform
   ========================================================================== */

.platform-premium-page {
    --pl2-bg: #f4f6fb;
    --pl2-bg-soft: #eef1f8;
    --pl2-ink: #0a0e22;
    --pl2-ink-soft: #1f2a40;
    --pl2-muted: #5b667c;
    --pl2-muted-2: #8a93a6;
    --pl2-line: #dde3ef;
    --pl2-line-2: #e9eef7;
    --pl2-blue: #5588ff;
    --pl2-blue-2: #3a6aff;
    --pl2-violet: #7d5fff;
    --pl2-violet-2: #a78bff;
    --pl2-teal: #4dd4e2;
    --pl2-teal-2: #6be3f4;
    --pl2-amber: #ff9a3c;
    --pl2-amber-2: #ffc188;
    --pl2-green: #3ecf8e;
    --pl2-dark: #070a1a;
    --pl2-dark-2: #0a0e22;
    --pl2-dark-3: #11173a;
    --pl2-dark-4: #0d1230;
    background: var(--pl2-bg);
    color: var(--pl2-ink);
}

.platform-premium-page .nav-links a[aria-current="page"] {
    color: var(--pl2-blue);
}

.pl2-main {
    overflow: hidden;
    background: var(--pl2-bg);
}

/* Shared kicker / buttons */
.pl2-kicker {
    display: inline-flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--pl2-blue);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pl2-kicker-light {
    color: var(--pl2-teal-2);
}

.pl2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.platform-premium-page .pl2-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #5588ff 0%, #7d5fff 100%);
    box-shadow: 0 16px 40px -16px rgba(85, 136, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.platform-premium-page .pl2-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 56px -20px rgba(85, 136, 255, 0.75);
    color: #ffffff;
}

.platform-premium-page .pl2-btn-ghost {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
}

.platform-premium-page .pl2-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* ============== HERO ============== */
.pl2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 120px 0 92px;
    color: #ffffff;
    background:
        radial-gradient(ellipse at 70% 0%, rgba(125, 95, 255, 0.32), transparent 55%),
        radial-gradient(ellipse at 10% 100%, rgba(77, 212, 226, 0.16), transparent 55%),
        linear-gradient(165deg, #0a0e22 0%, #070a1a 60%, #050816 100%);
}

.pl2-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.pl2-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}

.pl2-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.65;
}

.pl2-hero-orb-violet {
    width: 360px;
    height: 360px;
    top: -80px;
    right: 18%;
    background: radial-gradient(closest-side, rgba(125, 95, 255, 0.55), transparent 70%);
}

.pl2-hero-orb-blue {
    width: 300px;
    height: 300px;
    bottom: -60px;
    left: 22%;
    background: radial-gradient(closest-side, rgba(85, 136, 255, 0.5), transparent 70%);
}

.pl2-hero-orb-teal {
    width: 280px;
    height: 280px;
    top: 40%;
    right: -60px;
    background: radial-gradient(closest-side, rgba(77, 212, 226, 0.45), transparent 70%);
}

.pl2-hero-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(540px, 0.95fr);
    gap: 64px;
    align-items: center;
}

.pl2-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pl2-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pl2-amber);
    box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.22);
    animation: pl2-pulse 2s ease-in-out infinite;
}

@keyframes pl2-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pl2-hero-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.pl2-hero-line {
    display: block;
}

.pl2-hero-line-gradient {
    background: linear-gradient(120deg, #6be3f4 0%, #a78bff 50%, #ff9a3c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-hero-subtitle {
    max-width: 540px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.08rem;
    line-height: 1.7;
}

.pl2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.pl2-hero-proof {
    margin: 36px 0 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pl2-hero-proof span {
    color: rgba(255, 255, 255, 0.78);
}

/* HERO ECOSYSTEM VISUAL */
.pl2-ecosystem {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.pl2-ecosystem-stage {
    position: absolute;
    inset: 0;
}

.pl2-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(125, 95, 255, 0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pl2-orbit-1 {
    width: 240px;
    height: 240px;
    border-color: rgba(125, 95, 255, 0.28);
    animation: pl2-rot 30s linear infinite;
}

.pl2-orbit-2 {
    width: 380px;
    height: 380px;
    border-color: rgba(85, 136, 255, 0.18);
    animation: pl2-rot 60s linear infinite reverse;
}

.pl2-orbit-3 {
    width: 540px;
    height: 540px;
    border: 1px solid rgba(77, 212, 226, 0.1);
}

@keyframes pl2-rot {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.pl2-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 168px;
    height: 168px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 30% 25%, rgba(125, 95, 255, 0.6), rgba(85, 136, 255, 0.4) 50%, rgba(8, 12, 30, 0.85) 90%);
    border: 1px solid rgba(167, 139, 255, 0.55);
    color: #ffffff;
    z-index: 4;
    box-shadow:
        0 30px 80px -20px rgba(125, 95, 255, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 80px rgba(85, 136, 255, 0.35) inset;
    backdrop-filter: blur(12px);
}

.pl2-core::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(125, 95, 255, 0.35), transparent 70%);
    filter: blur(20px);
    z-index: -1;
}

.pl2-core-mark {
    display: inline-flex;
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    color: #ffffff;
    opacity: 0.92;
}

.pl2-core-mark svg {
    width: 100%;
    height: 100%;
}

.pl2-core strong {
    color: #ffffff;
    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-core em {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.65);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pl2-node {
    position: absolute;
    width: 124px;
    padding: 11px 12px;
    border-radius: 12px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(10, 14, 34, 0.78);
    border: 1px solid rgba(125, 95, 255, 0.24);
    color: #ffffff;
    text-align: left;
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px -16px rgba(8, 12, 30, 0.7);
    z-index: 3;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pl2-node:hover {
    transform: scale(1.04);
    border-color: rgba(167, 139, 255, 0.55);
    box-shadow: 0 24px 50px -18px rgba(125, 95, 255, 0.55);
    z-index: 5;
}

.pl2-node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    border-radius: 7px;
    background: linear-gradient(150deg, rgba(125, 95, 255, 0.32), rgba(85, 136, 255, 0.12));
    color: var(--pl2-violet-2);
    border: 1px solid rgba(125, 95, 255, 0.32);
}

.pl2-node-icon svg {
    width: 13px;
    height: 13px;
}

.pl2-node b {
    display: block;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Positions for 12 modules around the core — using absolute placement
   for finer visual control. Inner ring (6) + outer ring (6) feel. */
.pl2-node-1  { top: 8%;  left: 35%; }
.pl2-node-2  { top: 18%; left: 64%; }
.pl2-node-3  { top: 0%;  left: 12%; }
.pl2-node-4  { top: 36%; left: 78%; }
.pl2-node-5  { top: 32%; left: -2%; }
.pl2-node-6  { top: 60%; left: 78%; }
.pl2-node-7  { top: 58%; left: -2%; }
.pl2-node-8  { top: 80%; left: 64%; }
.pl2-node-9  { top: 80%; left: 12%; }
.pl2-node-10 { top: 92%; left: 35%; }
.pl2-node-11 { top: 48%; left: 88%; }
.pl2-node-12 { top: 48%; left: -12%; }

.pl2-node:nth-child(2n) .pl2-node-icon {
    background: linear-gradient(150deg, rgba(85, 136, 255, 0.34), rgba(77, 212, 226, 0.12));
    color: #99b9ff;
    border-color: rgba(85, 136, 255, 0.36);
}

.pl2-node:nth-child(3n) .pl2-node-icon {
    background: linear-gradient(150deg, rgba(77, 212, 226, 0.28), rgba(125, 95, 255, 0.1));
    color: var(--pl2-teal-2);
    border-color: rgba(77, 212, 226, 0.32);
}

.pl2-node:nth-child(5n) .pl2-node-icon {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.26), rgba(125, 95, 255, 0.08));
    color: var(--pl2-amber-2);
    border-color: rgba(255, 154, 60, 0.32);
}

/* Floating mini UI cards */
.pl2-float {
    position: absolute;
    padding: 14px 16px;
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%),
        rgba(10, 14, 34, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -20px rgba(8, 12, 30, 0.7);
    z-index: 6;
    min-width: 156px;
}

.pl2-float p {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pl2-float strong {
    display: block;
    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 850;
    letter-spacing: -0.015em;
}

.pl2-float > span:not(.pl2-trend) {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
    font-weight: 600;
}

.pl2-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pl2-trend svg {
    width: 11px;
    height: 11px;
}

.pl2-trend-up {
    background: rgba(62, 207, 142, 0.18);
    color: var(--pl2-green);
}

.pl2-trend-down {
    background: rgba(255, 154, 60, 0.18);
    color: var(--pl2-amber-2);
}

.pl2-float-revenue { top: -8%; right: -6%; }
.pl2-float-orders { top: 38%; left: -16%; }
.pl2-float-stock {
    bottom: -2%;
    right: -8%;
}

.pl2-float-spark {
    display: block;
    margin-top: 8px;
    width: 88px;
    height: 24px;
}

/* ============== SHARED SECTION ============== */
.pl2-section {
    padding: 110px 0;
    position: relative;
}

.pl2-section-light {
    background: var(--pl2-bg);
}

.pl2-section-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(165deg, #0a0e22 0%, #070a1a 60%, #050816 100%);
}

.pl2-section-heading {
    margin: 0 0 56px;
}

.pl2-section-headline {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
}

.pl2-section-headline h2 {
    margin: 0;
    color: var(--pl2-ink);
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.pl2-section-headline h2 span {
    background: linear-gradient(120deg, var(--pl2-blue) 0%, var(--pl2-violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-section-headline p {
    margin: 0;
    color: var(--pl2-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* ============== MODULES GRID ============== */
.pl2-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pl2-module-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    gap: 14px;
    align-items: center;
    padding: 22px 22px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--pl2-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pl2-module-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(125, 95, 255, 0.4), rgba(85, 136, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-module-card:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 95, 255, 0.32);
    box-shadow: 0 22px 48px -28px rgba(10, 14, 34, 0.3);
}

.pl2-module-card:hover::before {
    opacity: 1;
}

.pl2-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(150deg, #e9e3ff, #ffffff);
    color: var(--pl2-violet);
    border: 1px solid rgba(125, 95, 255, 0.18);
}

.pl2-module-icon svg {
    width: 21px;
    height: 21px;
}

.pl2-module-card:nth-child(4n+2) .pl2-module-icon {
    background: linear-gradient(150deg, #e0e9ff, #ffffff);
    color: var(--pl2-blue);
    border-color: rgba(85, 136, 255, 0.2);
}

.pl2-module-card:nth-child(4n+3) .pl2-module-icon {
    background: linear-gradient(150deg, #d6f4fa, #ffffff);
    color: var(--pl2-teal);
    border-color: rgba(77, 212, 226, 0.22);
}

.pl2-module-card:nth-child(4n) .pl2-module-icon {
    background: linear-gradient(150deg, #fff0dc, #ffffff);
    color: var(--pl2-amber);
    border-color: rgba(255, 154, 60, 0.22);
}

.pl2-module-body h3 {
    margin: 0;
    color: var(--pl2-ink);
    font-size: 0.98rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-module-body p {
    margin: 4px 0 0;
    color: var(--pl2-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.pl2-module-chev {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--pl2-muted-2);
    transition: transform 0.18s ease, color 0.18s ease;
}

.pl2-module-chev svg {
    width: 18px;
    height: 18px;
}

.pl2-module-card:hover .pl2-module-chev {
    color: var(--pl2-violet);
    transform: translateX(3px);
}

/* ============== PLATFORM PERFORMANCE (dark) ============== */
.pl2-perf-section {
    padding: 110px 0;
}

.pl2-perf-glow {
    position: absolute;
    inset: -20% auto auto -10%;
    width: 60%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(125, 95, 255, 0.32), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.pl2-perf-shell {
    position: relative;
    padding: 56px 60px;
    border-radius: 28px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(13, 18, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.pl2-perf-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(125, 95, 255, 0.5), rgba(77, 212, 226, 0.15) 50%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-perf-heading {
    margin: 0 0 40px;
    max-width: 760px;
}

.pl2-perf-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.pl2-perf-heading h2 span {
    background: linear-gradient(120deg, var(--pl2-teal-2) 0%, var(--pl2-violet-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-perf-heading p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.02rem;
    line-height: 1.6;
}

.pl2-perf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pl2-perf-card {
    padding: 24px 22px 22px;
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(10, 14, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.pl2-perf-card:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 95, 255, 0.32);
}

.pl2-perf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(125, 95, 255, 0.22), rgba(77, 212, 226, 0.06));
    color: var(--pl2-violet-2);
    border: 1px solid rgba(125, 95, 255, 0.26);
}

.pl2-perf-card:nth-child(3n+2) .pl2-perf-icon {
    background: linear-gradient(150deg, rgba(77, 212, 226, 0.22), rgba(125, 95, 255, 0.06));
    color: var(--pl2-teal-2);
    border-color: rgba(77, 212, 226, 0.3);
}

.pl2-perf-card:nth-child(3n) .pl2-perf-icon {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.22), rgba(125, 95, 255, 0.06));
    color: var(--pl2-amber-2);
    border-color: rgba(255, 154, 60, 0.3);
}

.pl2-perf-icon svg {
    width: 19px;
    height: 19px;
}

.pl2-perf-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-perf-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ============== PRODUCT SUITES (editorial) ============== */
.pl2-suites-section {
    padding: 110px 0;
}

.pl2-suite-stack {
    display: grid;
    gap: 80px;
}

.pl2-suite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
}

.pl2-suite:nth-child(even) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.pl2-suite:nth-child(even) .pl2-suite-copy {
    order: 2;
}

.pl2-suite:nth-child(even) .pl2-suite-preview {
    order: 1;
}

.pl2-suite-num {
    margin: 0 0 16px;
    color: var(--pl2-blue);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.14em;
}

.pl2-suite-copy h3 {
    margin: 0;
    color: var(--pl2-ink);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.pl2-suite-copy > p {
    margin: 18px 0 22px;
    color: var(--pl2-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.pl2-suite-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.pl2-suite-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--pl2-bg-soft);
    border: 1px solid var(--pl2-line);
    color: var(--pl2-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.pl2-suite-chips svg {
    width: 13px;
    height: 13px;
    color: var(--pl2-blue);
}

.pl2-suite-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pl2-blue);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.18s ease;
}

.pl2-suite-link i {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.pl2-suite-link svg {
    width: 14px;
    height: 14px;
}

.pl2-suite-link:hover {
    gap: 10px;
    color: var(--pl2-violet);
}

/* SUITE PREVIEW MOCK */
.pl2-suite-preview {
    position: relative;
}

.pl2-mock {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(170deg, #11173a 0%, #0a0e22 100%);
    border: 1px solid rgba(125, 95, 255, 0.18);
    box-shadow: 0 50px 100px -50px rgba(10, 14, 34, 0.6);
    min-height: 320px;
}

.pl2-mock::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(125, 95, 255, 0.45), rgba(77, 212, 226, 0.18) 50%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-mock-sidebar {
    background: rgba(8, 12, 30, 0.7);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pl2-mock-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-mock-brand span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    box-shadow: 0 0 12px rgba(125, 95, 255, 0.5);
}

.pl2-mock-nav {
    display: grid;
    gap: 8px;
}

.pl2-mock-nav span {
    display: block;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

.pl2-mock-nav span:first-child {
    background: linear-gradient(90deg, rgba(125, 95, 255, 0.35), rgba(125, 95, 255, 0.1));
}

.pl2-mock-canvas {
    position: relative;
    padding: 18px 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.pl2-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl2-mock-head strong {
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.pl2-mock-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pl2-green);
    box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.25);
}

.pl2-mock-row-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pl2-mock-row-stats > div {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pl2-mock-row-stats b {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.pl2-mock-row-stats span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Pipeline preview — v1 selectors retired (the .pl2-mock-pipeline class
   now lives on the root .pl2-mock element, so these would leak into the
   new structure and break the sidebar+canvas grid). The v3 pipeline mock
   reuses the shared .pl2-mock-* primitives. */

.pl2-pipe-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.pl2-pipe-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-blue));
}

.pl2-mock-donut {
    position: absolute;
    bottom: 14px;
    right: 18px;
    width: 80px;
    height: 80px;
}

.pl2-mock-donut-right {
    bottom: 18px;
    right: 18px;
}

/* Chart preview */
.pl2-mock-chart {
    display: block;
    width: 100%;
    height: 130px;
}

/* Kanban preview */
.pl2-mock-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pl2-mock-col {
    padding: 10px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 200px;
}

.pl2-col-h {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 800;
}

.pl2-col-h i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.pl2-mock-task {
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(125, 95, 255, 0.14);
    border: 1px solid rgba(125, 95, 255, 0.22);
    color: #ffffff;
}

.pl2-mock-task b {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
}

.pl2-mock-task span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.64rem;
    font-weight: 700;
}

.pl2-mock-task-amber { background: rgba(255, 154, 60, 0.14); border-color: rgba(255, 154, 60, 0.28); }
.pl2-mock-task-teal { background: rgba(77, 212, 226, 0.14); border-color: rgba(77, 212, 226, 0.28); }
.pl2-mock-task-green { background: rgba(62, 207, 142, 0.16); border-color: rgba(62, 207, 142, 0.3); }
.pl2-mock-task-dim { opacity: 0.55; }

/* Orders table */
.pl2-mock-table {
    display: grid;
    gap: 4px;
    font-size: 0.74rem;
}

.pl2-mock-th,
.pl2-mock-tr {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr 0.9fr 1.1fr 0.7fr;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
}

.pl2-mock-th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pl2-mock-tr {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.86);
    font-weight: 700;
}

.pl2-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pl2-tag-green { background: rgba(62, 207, 142, 0.18); color: var(--pl2-green); }
.pl2-tag-blue { background: rgba(85, 136, 255, 0.18); color: #8db0ff; }
.pl2-tag-amber { background: rgba(255, 154, 60, 0.18); color: var(--pl2-amber-2); }
.pl2-tag-violet { background: rgba(125, 95, 255, 0.18); color: var(--pl2-violet-2); }

.pl2-mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pl2-mock-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-weight: 700;
}

.pl2-mock-chip i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

/* Team preview */
.pl2-mock-team {
    display: grid;
    gap: 4px;
    font-size: 0.78rem;
}

.pl2-mock-team-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.7fr;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pl2-mock-team-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.7fr;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
}

.pl2-mock-team-row b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.pl2-mock-team-row b i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    flex: none;
}

.pl2-mock-team-row > span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
}

.pl2-mock-bars {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.pl2-mock-bars > div {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.pl2-mock-bars i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pl2-blue), var(--pl2-teal));
}

/* ============== PROOF (dark band) ============== */
.pl2-proof-section {
    padding: 110px 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 0%, rgba(125, 95, 255, 0.22), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(77, 212, 226, 0.16), transparent 50%),
        linear-gradient(165deg, #0a0e22 0%, #050816 100%);
}

.pl2-proof-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}

.pl2-proof-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
    gap: 56px;
    align-items: end;
    margin-bottom: 48px;
}

.pl2-proof-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.pl2-proof-heading h2 span {
    background: linear-gradient(120deg, var(--pl2-teal-2) 0%, var(--pl2-violet-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-proof-heading > div p {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 620px;
}

.pl2-proof-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.pl2-proof-card {
    padding: 22px 20px;
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(13, 18, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.pl2-proof-card:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 95, 255, 0.32);
}

.pl2-proof-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(125, 95, 255, 0.22), rgba(77, 212, 226, 0.06));
    color: var(--pl2-violet-2);
    border: 1px solid rgba(125, 95, 255, 0.26);
}

.pl2-proof-card:nth-child(2) .pl2-proof-icon { background: linear-gradient(150deg, rgba(77, 212, 226, 0.22), rgba(85, 136, 255, 0.06)); color: var(--pl2-teal-2); border-color: rgba(77, 212, 226, 0.3); }
.pl2-proof-card:nth-child(3) .pl2-proof-icon { background: linear-gradient(150deg, rgba(255, 154, 60, 0.22), rgba(125, 95, 255, 0.06)); color: var(--pl2-amber-2); border-color: rgba(255, 154, 60, 0.3); }
.pl2-proof-card:nth-child(4) .pl2-proof-icon { background: linear-gradient(150deg, rgba(85, 136, 255, 0.22), rgba(77, 212, 226, 0.08)); color: #8db0ff; border-color: rgba(85, 136, 255, 0.3); }
.pl2-proof-card:nth-child(5) .pl2-proof-icon { background: linear-gradient(150deg, rgba(62, 207, 142, 0.2), rgba(77, 212, 226, 0.06)); color: var(--pl2-green); border-color: rgba(62, 207, 142, 0.28); }

.pl2-proof-icon svg {
    width: 18px;
    height: 18px;
}

.pl2-proof-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.pl2-proof-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    line-height: 1.55;
}

/* ============== INDUSTRIES ============== */
.pl2-industries-section {
    padding: 110px 0;
}

.pl2-industry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.pl2-industry-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--pl2-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pl2-industry-card:hover {
    transform: translateY(-3px);
    border-color: rgba(125, 95, 255, 0.3);
    box-shadow: 0 30px 60px -36px rgba(10, 14, 34, 0.4);
}

.pl2-industry-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 30% 30%, rgba(125, 95, 255, 0.5), rgba(85, 136, 255, 0.18) 50%, rgba(8, 12, 30, 0.8) 90%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl2-industry-card:nth-child(2) .pl2-industry-media {
    background: radial-gradient(circle at 30% 30%, rgba(255, 154, 60, 0.5), rgba(125, 95, 255, 0.16) 50%, rgba(8, 12, 30, 0.8) 90%);
}

.pl2-industry-card:nth-child(3) .pl2-industry-media {
    background: radial-gradient(circle at 30% 30%, rgba(62, 207, 142, 0.5), rgba(85, 136, 255, 0.16) 50%, rgba(8, 12, 30, 0.8) 90%);
}

.pl2-industry-card:nth-child(4) .pl2-industry-media {
    background: radial-gradient(circle at 30% 30%, rgba(77, 212, 226, 0.5), rgba(125, 95, 255, 0.16) 50%, rgba(8, 12, 30, 0.8) 90%);
}

.pl2-industry-card:nth-child(5) .pl2-industry-media {
    background: radial-gradient(circle at 30% 30%, rgba(85, 136, 255, 0.5), rgba(77, 212, 226, 0.16) 50%, rgba(8, 12, 30, 0.8) 90%);
}

.pl2-industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.pl2-industry-icon svg {
    width: 26px;
    height: 26px;
}

.pl2-industry-copy {
    padding: 18px 18px 20px;
}

.pl2-industry-copy h3 {
    margin: 0 0 6px;
    color: var(--pl2-ink);
    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-industry-copy p {
    margin: 0;
    color: var(--pl2-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.pl2-industries-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    color: var(--pl2-blue);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.18s ease;
}

.pl2-industries-link i {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.pl2-industries-link svg {
    width: 14px;
    height: 14px;
}

.pl2-industries-link:hover {
    gap: 10px;
}

/* ============== COMPARISON ============== */
.pl2-compare-section {
    padding: 110px 0;
}

.pl2-compare-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.pl2-compare-copy h2 {
    margin: 0;
    color: var(--pl2-ink);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.pl2-compare-copy p {
    margin: 20px 0 0;
    color: var(--pl2-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.pl2-compare-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.pl2-compare-card {
    padding: 26px 26px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--pl2-line);
}

.pl2-compare-card.pl2-compare-with {
    border-color: rgba(125, 95, 255, 0.32);
    box-shadow: 0 30px 60px -36px rgba(125, 95, 255, 0.4);
}

.pl2-compare-card header {
    margin-bottom: 18px;
}

.pl2-compare-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.pl2-compare-pill svg {
    width: 12px;
    height: 12px;
}

.pl2-compare-pill.is-with {
    background: linear-gradient(135deg, rgba(125, 95, 255, 0.14), rgba(85, 136, 255, 0.1));
    color: var(--pl2-violet);
    border: 1px solid rgba(125, 95, 255, 0.32);
}

.pl2-compare-pill.is-without {
    background: var(--pl2-bg-soft);
    color: var(--pl2-muted);
    border: 1px solid var(--pl2-line);
}

.pl2-compare-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.pl2-compare-card li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 10px;
    color: var(--pl2-ink-soft);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
}

.pl2-compare-with li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    color: #ffffff;
}

.pl2-compare-with li span svg {
    width: 11px;
    height: 11px;
}

.pl2-compare-without li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--pl2-bg-soft);
    color: #c84d4d;
    font-weight: 800;
}

.pl2-compare-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    z-index: 2;
    box-shadow: 0 16px 32px -12px rgba(125, 95, 255, 0.55), 0 0 0 4px rgba(125, 95, 255, 0.14);
}

/* ============== FINAL CTA ============== */
.pl2-final-section {
    padding: 110px 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 12% 20%, rgba(125, 95, 255, 0.34), transparent 50%),
        radial-gradient(circle at 88% 90%, rgba(77, 212, 226, 0.2), transparent 50%),
        linear-gradient(165deg, #0a0e22 0%, #070a1a 60%, #050816 100%);
}

.pl2-final-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.14;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}

.pl2-final-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
}

.pl2-final-copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.pl2-final-copy h2 span {
    background: linear-gradient(120deg, var(--pl2-teal-2) 0%, var(--pl2-violet-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-final-copy > p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 520px;
}

.pl2-final-meta {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.86rem;
    font-weight: 700;
}

.pl2-final-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pl2-final-meta li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(62, 207, 142, 0.2);
    color: var(--pl2-green);
}

.pl2-final-meta svg {
    width: 10px;
    height: 10px;
}

.pl2-final-visual {
    position: relative;
}

.pl2-final-board {
    position: relative;
    padding: 24px 26px 22px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(13, 18, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    box-shadow: 0 50px 100px -40px rgba(8, 12, 30, 0.6);
    overflow: hidden;
}

.pl2-final-board::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(125, 95, 255, 0.55), rgba(77, 212, 226, 0.2) 50%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-final-board header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pl2-final-board header span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pl2-final-board header em {
    font-style: normal;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(62, 207, 142, 0.18);
    color: var(--pl2-green);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.pl2-final-metric {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.pl2-final-metric strong {
    color: #ffffff;
    font-size: 1.84rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.pl2-final-chart {
    display: block;
    width: 100%;
    height: 90px;
    margin-bottom: 16px;
}

.pl2-final-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pl2-final-cards > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pl2-final-cards span {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pl2-final-cards b {
    display: block;
    margin-top: 2px;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1200px) {
    .pl2-hero-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .pl2-ecosystem {
        max-width: 500px;
    }

    .pl2-section-headline {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pl2-modules-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-perf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-perf-shell {
        padding: 44px 36px;
    }

    .pl2-suite {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pl2-suite:nth-child(even) .pl2-suite-copy { order: 1; }
    .pl2-suite:nth-child(even) .pl2-suite-preview { order: 2; }

    .pl2-proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-proof-heading {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pl2-industry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-compare-shell {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .pl2-final-shell {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 960px) {
    .pl2-section { padding: 80px 0; }
    .pl2-hero { padding: 96px 0 80px; }

    .pl2-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-perf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-compare-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pl2-compare-vs {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }

    .pl2-ecosystem {
        max-width: 420px;
    }

    .pl2-core {
        width: 140px;
        height: 140px;
    }

    .pl2-orbit-2 {
        width: 320px;
        height: 320px;
    }

    .pl2-orbit-3 {
        width: 440px;
        height: 440px;
    }

    .pl2-node {
        width: 108px;
        padding: 9px 10px;
    }

    .pl2-node b {
        font-size: 0.68rem;
    }

    .pl2-mock-row-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-mock-kanban {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .pl2-section { padding: 64px 0; }
    .pl2-hero { padding: 80px 0 64px; }

    .pl2-hero-title {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }

    .pl2-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pl2-btn { width: 100%; }

    .pl2-modules-grid,
    .pl2-perf-grid,
    .pl2-proof-grid,
    .pl2-industry-grid {
        grid-template-columns: 1fr;
    }

    .pl2-perf-shell {
        padding: 32px 24px;
    }

    .pl2-final-meta {
        flex-direction: column;
        gap: 10px;
    }

    /* Hero ecosystem on mobile: simplify to a static grid of 12 cards under the core */
    .pl2-ecosystem {
        aspect-ratio: auto;
        max-width: 100%;
        height: auto;
    }

    .pl2-ecosystem-stage {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 200px;
    }

    .pl2-orbit { display: none; }

    .pl2-core {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 168px;
        height: 168px;
    }

    .pl2-node {
        position: static;
        width: auto !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    .pl2-float { display: none; }

    .pl2-mock {
        grid-template-columns: 40px 1fr;
        min-height: 280px;
    }

    .pl2-mock-row-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl2-mock-kanban { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Platform page — polish pass v2 (premium cinematic upgrades)
   ========================================================================== */

/* ---- Container width: align header & body to the same site .shell (1440px) ---- */
.platform-premium-page .ordello-public-shell {
    width: min(100% - 32px, 1440px);
    margin-inline: auto;
}

/* ---- HERO: taller, more cinematic ---- */
.pl2-hero {
    padding: 156px 0 124px;
    min-height: 92vh;
    display: flex;
    align-items: center;
}

.pl2-hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1.05fr);
    gap: 80px;
    width: 100%;
}

.pl2-hero-title {
    font-size: clamp(2.8rem, 5.6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.pl2-hero-line-gradient {
    background: linear-gradient(110deg, #6be3f4 0%, #99b9ff 35%, #a78bff 70%, #ff9a3c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pl2-gradient-shift 8s ease-in-out infinite;
}

@keyframes pl2-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.pl2-hero-subtitle {
    max-width: 580px;
    font-size: 1.18rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.pl2-hero-orb-violet {
    width: 480px;
    height: 480px;
    opacity: 0.85;
}

.pl2-hero-orb-blue {
    width: 420px;
    height: 420px;
    opacity: 0.7;
}

.pl2-hero-orb-teal {
    width: 380px;
    height: 380px;
    opacity: 0.75;
}

/* ---- Ecosystem: bigger, more dramatic ---- */
.pl2-ecosystem {
    max-width: 680px;
}

.pl2-orbit-1 { width: 280px; height: 280px; }
.pl2-orbit-2 { width: 440px; height: 440px; }
.pl2-orbit-3 { width: 620px; height: 620px; }

.pl2-ecosystem-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(167, 139, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.pl2-core {
    width: 196px;
    height: 196px;
    box-shadow:
        0 40px 100px -20px rgba(125, 95, 255, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 120px rgba(85, 136, 255, 0.45) inset,
        0 0 60px rgba(125, 95, 255, 0.4);
}

.pl2-core::before {
    inset: -24px;
    filter: blur(28px);
}

.pl2-core::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(167, 139, 255, 0.6) 90deg, transparent 180deg, rgba(107, 227, 244, 0.55) 270deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    animation: pl2-core-spin 12s linear infinite;
}

@keyframes pl2-core-spin {
    to { transform: rotate(360deg); }
}

.pl2-core-mark {
    width: 42px;
    height: 42px;
}

.pl2-core strong {
    font-size: 1.18rem;
}

.pl2-core em {
    font-size: 0.76rem;
}

/* Nodes — bigger, glassier */
.pl2-node {
    width: 138px;
    padding: 13px 14px;
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
        rgba(10, 14, 34, 0.7);
    border: 1px solid rgba(167, 139, 255, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 24px 48px -20px rgba(8, 12, 30, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.pl2-node-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.pl2-node-icon svg {
    width: 15px;
    height: 15px;
}

.pl2-node b {
    font-size: 0.8rem;
    font-weight: 750;
}

/* Spread nodes further around the larger ecosystem */
.pl2-node-1  { top: 4%;  left: 32%; }
.pl2-node-2  { top: 14%; left: 66%; }
.pl2-node-3  { top: -2%; left: 6%; }
.pl2-node-4  { top: 32%; left: 82%; }
.pl2-node-5  { top: 28%; left: -8%; }
.pl2-node-6  { top: 60%; left: 82%; }
.pl2-node-7  { top: 60%; left: -8%; }
.pl2-node-8  { top: 86%; left: 66%; }
.pl2-node-9  { top: 86%; left: 6%; }
.pl2-node-10 { top: 96%; left: 36%; }
.pl2-node-11 { top: 46%; left: 92%; }
.pl2-node-12 { top: 46%; left: -16%; }

/* Floating metric widgets — feel like real product cards */
.pl2-float {
    padding: 16px 18px;
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
        rgba(10, 14, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 30px 60px -20px rgba(8, 12, 30, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    min-width: 180px;
    z-index: 7;
}

.pl2-float strong {
    font-size: 1.28rem;
}

.pl2-float-revenue { top: -6%; right: -4%; }
.pl2-float-orders { top: 42%; left: -22%; }
.pl2-float-stock { bottom: -4%; right: -10%; min-width: 200px; }

/* Connection lines from core to outer nodes via SVG-like CSS */
.pl2-ecosystem-stage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 540px;
    height: 540px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(167, 139, 255, 0.18), transparent 8%, rgba(107, 227, 244, 0.15) 50%, transparent 58%, rgba(167, 139, 255, 0.18) 100%);
    -webkit-mask: radial-gradient(circle, transparent 92px, #000 95px, #000 270px, transparent 271px);
    mask: radial-gradient(circle, transparent 92px, #000 95px, #000 270px, transparent 271px);
    opacity: 0.5;
    pointer-events: none;
}

/* ---- MODULES grid: more refined ---- */
.pl2-modules-grid {
    gap: 18px;
}

.pl2-module-card {
    padding: 26px 24px;
    border-radius: 20px;
    grid-template-columns: 48px 1fr 22px;
}

.pl2-module-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    box-shadow: 0 8px 20px -8px rgba(125, 95, 255, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.pl2-module-icon svg {
    width: 22px;
    height: 22px;
}

.pl2-module-body h3 {
    font-size: 1.04rem;
    font-weight: 800;
}

.pl2-module-body p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--pl2-muted);
}

.pl2-module-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 30px 56px -28px rgba(125, 95, 255, 0.3),
        0 0 0 1px rgba(125, 95, 255, 0.16) inset;
}

/* Premium section heading scale */
.pl2-section-headline h2 {
    font-size: clamp(2.2rem, 3.8vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
}

/* ---- PERFORMANCE panel: wider, more luxurious ---- */
.pl2-perf-section {
    padding: 130px 0;
}

.pl2-perf-shell {
    padding: 72px 72px;
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(125, 95, 255, 0.16), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(77, 212, 226, 0.12), transparent 50%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(13, 18, 48, 0.65);
}

.pl2-perf-shell::after {
    content: "";
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 320px;
    background: radial-gradient(ellipse, rgba(125, 95, 255, 0.25), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
}

.pl2-perf-heading h2 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    letter-spacing: -0.022em;
}

.pl2-perf-grid {
    gap: 18px;
}

.pl2-perf-card {
    padding: 30px 28px;
    border-radius: 20px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(10, 14, 34, 0.55);
}

.pl2-perf-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 12px;
}

.pl2-perf-icon svg {
    width: 22px;
    height: 22px;
}

.pl2-perf-card h3 {
    font-size: 1.12rem;
    margin-bottom: 10px;
}

.pl2-perf-card p {
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ---- SUITES: improved spacing and dashboard size ---- */
.pl2-suites-section {
    padding: 130px 0;
}

.pl2-suite-stack {
    gap: 120px;
}

.pl2-suite {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 80px;
}

.pl2-suite:nth-child(even) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.pl2-suite-num {
    margin-bottom: 20px;
    font-size: 0.74rem;
}

.pl2-suite-copy h3 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
}

.pl2-suite-copy > p {
    font-size: 1.04rem;
    line-height: 1.7;
    margin: 22px 0 28px;
}

.pl2-suite-chips span {
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 700;
}

.pl2-suite-link {
    font-size: 0.98rem;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(85, 136, 255, 0.08);
    border: 1px solid rgba(85, 136, 255, 0.22);
}

.pl2-suite-link:hover {
    background: rgba(125, 95, 255, 0.12);
    border-color: rgba(125, 95, 255, 0.32);
}

/* ---- MOCK DASHBOARDS — rich product UIs ---- */
.pl2-mock {
    grid-template-columns: 152px 1fr;
    min-height: 420px;
    border-radius: 22px;
    background:
        linear-gradient(160deg, #11173a 0%, #0a0e22 100%);
    border: 1px solid rgba(125, 95, 255, 0.22);
    box-shadow:
        0 60px 120px -50px rgba(10, 14, 34, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.pl2-mock::after {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(ellipse, rgba(125, 95, 255, 0.18), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
}

/* Sidebar */
.pl2-mock-sidebar {
    padding: 18px 14px;
    background: rgba(8, 12, 30, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pl2-mock-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
}

.pl2-mock-brand span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    box-shadow: 0 0 12px rgba(125, 95, 255, 0.6);
}

.pl2-mock-brand strong {
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-mock-nav {
    display: grid;
    gap: 4px;
    flex: 1;
}

.platform-premium-page .pl2-mock-navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.pl2-mock-navitem i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.pl2-mock-navitem em {
    font-style: normal;
}

.pl2-mock-navitem.is-active {
    background: linear-gradient(135deg, rgba(125, 95, 255, 0.28), rgba(85, 136, 255, 0.18));
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(125, 95, 255, 0.32) inset;
}

.pl2-mock-navitem.is-active i {
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    box-shadow: 0 0 8px rgba(125, 95, 255, 0.45);
}

.pl2-mock-side-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pl2-mock-side-foot .pl2-mock-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-amber), #ff7a3c);
}

.pl2-mock-side-foot b {
    display: block;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.pl2-mock-side-foot small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    font-weight: 600;
}

/* Canvas */
.pl2-mock-canvas {
    padding: 22px 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

/* Topbar */
.pl2-mock-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pl2-mock-topbar strong {
    color: #ffffff;
    font-size: 1.04rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-mock-topbar p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.74rem;
    font-weight: 600;
}

.pl2-mock-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pl2-mock-tab {
    padding: 6px 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
}

.pl2-mock-tab.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pl2-mock-btn {
    padding: 7px 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 16px -6px rgba(125, 95, 255, 0.5);
}

/* KPIs */
.pl2-mock-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pl2-mock-kpis-tight {
    gap: 8px;
}

.pl2-mock-kpis > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pl2-mock-kpis span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pl2-mock-kpis b {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.015em;
}

.pl2-mock-trend {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    font-style: normal;
}

.pl2-mock-trend.up { color: var(--pl2-green); }
.pl2-mock-trend.down { color: var(--pl2-amber-2); }

/* Board / Kanban */
.pl2-mock-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.pl2-mock-bcol {
    padding: 10px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl2-mock-bcol header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 800;
}

.pl2-mock-bcol header span {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.55);
}

.pl2-dot-blue { width: 7px; height: 7px; border-radius: 999px; background: var(--pl2-blue); }
.pl2-dot-violet { width: 7px; height: 7px; border-radius: 999px; background: var(--pl2-violet); }
.pl2-dot-amber { width: 7px; height: 7px; border-radius: 999px; background: var(--pl2-amber); }
.pl2-dot-teal { width: 7px; height: 7px; border-radius: 999px; background: var(--pl2-teal); }
.pl2-dot-green { width: 7px; height: 7px; border-radius: 999px; background: var(--pl2-green); }
.pl2-dot-red { width: 7px; height: 7px; border-radius: 999px; background: #c84d4d; }

.pl2-deal {
    padding: 9px 10px;
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(85, 136, 255, 0.18), rgba(125, 95, 255, 0.06));
    border: 1px solid rgba(85, 136, 255, 0.22);
    color: #ffffff;
}

.pl2-deal b {
    display: block;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
}

.pl2-deal em {
    display: block;
    margin-top: 3px;
    color: var(--pl2-teal-2);
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 700;
}

.pl2-deal footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.64rem;
    font-weight: 700;
}

.pl2-deal-violet { background: linear-gradient(160deg, rgba(125, 95, 255, 0.2), rgba(125, 95, 255, 0.04)); border-color: rgba(125, 95, 255, 0.3); }
.pl2-deal-violet em { color: var(--pl2-violet-2); }
.pl2-deal-amber { background: linear-gradient(160deg, rgba(255, 154, 60, 0.18), rgba(255, 154, 60, 0.04)); border-color: rgba(255, 154, 60, 0.3); }
.pl2-deal-amber em { color: var(--pl2-amber-2); }
.pl2-deal-teal { background: linear-gradient(160deg, rgba(77, 212, 226, 0.18), rgba(77, 212, 226, 0.04)); border-color: rgba(77, 212, 226, 0.3); }
.pl2-deal-teal em { color: var(--pl2-teal-2); }
.pl2-deal-green { background: linear-gradient(160deg, rgba(62, 207, 142, 0.18), rgba(62, 207, 142, 0.04)); border-color: rgba(62, 207, 142, 0.32); }
.pl2-deal-green em { color: var(--pl2-green); }
.pl2-deal-dim { opacity: 0.55; }

.pl2-mock-av {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    border: 1.5px solid rgba(13, 18, 48, 1);
}

.pl2-mock-prog {
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pl2-mock-prog i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-blue));
}

/* Chart wrap */
.pl2-mock-chart-wrap {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pl2-mock-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pl2-mock-chart-head strong {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

.pl2-mock-legend {
    display: flex;
    gap: 12px;
}

.pl2-mock-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 700;
}

.pl2-mock-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.pl2-mock-chart {
    display: block;
    width: 100%;
    height: 130px;
}

.pl2-mock-grid line {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

/* Rows (low stock alerts, approvals, etc.) */
.pl2-mock-rows {
    padding: 14px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    gap: 6px;
}

.pl2-mock-rows header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pl2-mock-rows header em {
    font-style: normal;
    color: var(--pl2-teal-2);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.pl2-mock-row {
    display: grid;
    grid-template-columns: 14px 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.78rem;
    font-weight: 700;
}

.pl2-mock-row em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
}

.pl2-mock-row .pl2-tag {
    justify-self: end;
}

.pl2-tag-red { background: rgba(200, 77, 77, 0.18); color: #ff8a8a; }

/* Table */
.pl2-mock-table {
    display: grid;
    gap: 4px;
    flex: 1;
}

.pl2-mock-table header {
    display: grid;
    grid-template-columns: 0.7fr 1.4fr 0.8fr 0.9fr 0.6fr 0.2fr;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
}

.pl2-mock-tr {
    display: grid;
    grid-template-columns: 0.7fr 1.4fr 0.8fr 0.9fr 0.6fr 0.2fr;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 700;
    align-items: center;
}

.pl2-mock-tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.pl2-mock-no {
    color: var(--pl2-teal-2);
    font-weight: 800;
}

.pl2-mock-cust {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pl2-mock-cust i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    flex: none;
}

.pl2-mock-amt {
    color: #ffffff;
    font-weight: 850;
    text-align: right;
}

.pl2-mock-chev {
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    font-size: 1rem;
}

/* Finance split */
.pl2-mock-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pl2-mock-half {
    padding: 14px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pl2-mock-half header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.pl2-mock-half header span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pl2-mock-half header em {
    font-style: normal;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 850;
}

.pl2-mock-stack {
    display: grid;
    gap: 8px;
}

.pl2-mock-stack > div {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    gap: 10px;
}

.pl2-mock-stack b {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.7rem;
    font-weight: 700;
}

.pl2-mock-stack i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pl2-teal), var(--pl2-blue));
}

.pl2-mock-stack i.is-amber {
    background: linear-gradient(90deg, var(--pl2-amber), var(--pl2-amber-2));
}

.pl2-mock-stack i.is-red {
    background: linear-gradient(90deg, #c84d4d, #ff8a8a);
}

.pl2-mock-stack span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: right;
}

/* Team grid */
.pl2-mock-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pl2-mock-mem {
    padding: 14px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: center;
}

.pl2-mock-mem .pl2-mock-av.lg {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
}

.pl2-av-amber { background: linear-gradient(135deg, var(--pl2-amber), #ff6b3c) !important; }
.pl2-av-teal { background: linear-gradient(135deg, var(--pl2-teal), #2fa9b8) !important; }
.pl2-av-violet { background: linear-gradient(135deg, var(--pl2-violet-2), var(--pl2-violet)) !important; }

.pl2-mock-mem b {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.pl2-mock-mem em {
    grid-column: 2;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-weight: 700;
}

.pl2-mock-mem .pl2-tag {
    grid-row: 1 / 3;
    align-self: center;
}

/* ---- PROOF: bigger cards, clearer ---- */
.pl2-proof-section {
    padding: 130px 0;
}

.pl2-proof-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.pl2-proof-card {
    padding: 32px 26px 28px;
    border-radius: 20px;
}

.pl2-proof-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(125, 95, 255, 0.2);
}

.pl2-proof-icon svg {
    width: 22px;
    height: 22px;
}

.pl2-proof-card h3 {
    font-size: 1.08rem;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.pl2-proof-card p {
    font-size: 0.92rem;
    line-height: 1.6;
}

.pl2-proof-heading h2 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    letter-spacing: -0.022em;
}

/* ---- INDUSTRY CARDS — premium product cards ---- */
.pl2-industries-section {
    padding: 130px 0;
}

.pl2-industry-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.pl2-industry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border-radius: 20px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
        #ffffff;
    border: 1px solid var(--pl2-line);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pl2-industry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-blue));
    opacity: 0;
    transition: opacity 0.22s ease;
}

.pl2-industry-card:hover {
    transform: translateY(-4px);
    border-color: rgba(125, 95, 255, 0.32);
    box-shadow: 0 30px 60px -28px rgba(125, 95, 255, 0.3);
}

.pl2-industry-card:hover::before {
    opacity: 1;
}

.pl2-industry-card.pl2-industry-violet::before { background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-violet-2)); }
.pl2-industry-card.pl2-industry-amber::before { background: linear-gradient(90deg, var(--pl2-amber), var(--pl2-amber-2)); }
.pl2-industry-card.pl2-industry-green::before { background: linear-gradient(90deg, var(--pl2-green), #5ee0a3); }
.pl2-industry-card.pl2-industry-teal::before { background: linear-gradient(90deg, var(--pl2-teal), var(--pl2-teal-2)); }
.pl2-industry-card.pl2-industry-blue::before { background: linear-gradient(90deg, var(--pl2-blue), var(--pl2-blue-2)); }

.pl2-industry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.pl2-industry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(150deg, #e9e3ff, #f4f1ff);
    color: var(--pl2-violet);
    border: 1px solid rgba(125, 95, 255, 0.18);
    box-shadow: 0 8px 20px -8px rgba(125, 95, 255, 0.3);
}

.pl2-industry-violet .pl2-industry-icon { background: linear-gradient(150deg, #efe7ff, #ffffff); color: var(--pl2-violet); border-color: rgba(125, 95, 255, 0.2); }
.pl2-industry-amber .pl2-industry-icon { background: linear-gradient(150deg, #fff0dc, #ffffff); color: var(--pl2-amber); border-color: rgba(255, 154, 60, 0.24); }
.pl2-industry-green .pl2-industry-icon { background: linear-gradient(150deg, #d4f6e2, #ffffff); color: var(--pl2-green); border-color: rgba(62, 207, 142, 0.24); }
.pl2-industry-teal .pl2-industry-icon { background: linear-gradient(150deg, #d6f4fa, #ffffff); color: var(--pl2-teal); border-color: rgba(77, 212, 226, 0.24); }
.pl2-industry-blue .pl2-industry-icon { background: linear-gradient(150deg, #e0e9ff, #ffffff); color: var(--pl2-blue); border-color: rgba(85, 136, 255, 0.24); }

.pl2-industry-icon svg {
    width: 24px;
    height: 24px;
}

.pl2-industry-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pl2-green);
    box-shadow: 0 0 0 4px rgba(62, 207, 142, 0.22);
}

.pl2-industry-amber .pl2-industry-pulse { background: var(--pl2-amber); box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.22); }
.pl2-industry-teal .pl2-industry-pulse { background: var(--pl2-teal); box-shadow: 0 0 0 4px rgba(77, 212, 226, 0.22); }
.pl2-industry-blue .pl2-industry-pulse { background: var(--pl2-blue); box-shadow: 0 0 0 4px rgba(85, 136, 255, 0.22); }
.pl2-industry-violet .pl2-industry-pulse { background: var(--pl2-violet); box-shadow: 0 0 0 4px rgba(125, 95, 255, 0.22); }

.pl2-industry-body {
    flex: 1;
    margin-bottom: 22px;
}

.pl2-industry-body h3 {
    margin: 0 0 8px;
    color: var(--pl2-ink);
    font-size: 1.18rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.pl2-industry-body p {
    margin: 0;
    color: var(--pl2-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.pl2-industry-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px dashed var(--pl2-line);
}

.pl2-industry-metric strong {
    display: block;
    color: var(--pl2-ink);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pl2-industry-metric em {
    display: block;
    margin-top: 4px;
    color: var(--pl2-muted-2);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-style: normal;
}

.pl2-industry-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pl2-bg-soft);
    color: var(--pl2-violet);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.pl2-industry-chev svg {
    width: 16px;
    height: 16px;
}

.pl2-industry-card:hover .pl2-industry-chev {
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    color: #ffffff;
    transform: translateX(3px);
}

/* Hide the old media block in case it lingers */
.pl2-industry-media,
.pl2-industry-copy {
    display: none;
}

/* ---- COMPARISON: bigger, more dramatic ---- */
.pl2-compare-section {
    padding: 130px 0;
}

.pl2-compare-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
}

.pl2-compare-copy h2 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
}

.pl2-compare-copy p {
    font-size: 1.1rem;
    line-height: 1.65;
    margin-top: 24px;
}

.pl2-compare-wrap {
    gap: 24px;
}

.pl2-compare-card {
    padding: 36px 32px 32px;
    border-radius: 22px;
}

.pl2-compare-card.pl2-compare-with {
    background: linear-gradient(165deg, #11173a 0%, #0a0e22 100%);
    border-color: transparent;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 40px 80px -40px rgba(125, 95, 255, 0.55),
        0 0 0 1px rgba(125, 95, 255, 0.22);
}

.pl2-compare-card.pl2-compare-with::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(160deg, var(--pl2-violet), var(--pl2-teal) 60%, transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-compare-card.pl2-compare-with::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(125, 95, 255, 0.34), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.pl2-compare-pill {
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 800;
    border-radius: 999px;
}

.pl2-compare-pill svg {
    width: 14px;
    height: 14px;
}

.pl2-compare-card.pl2-compare-with .pl2-compare-pill.is-with {
    background: linear-gradient(135deg, rgba(125, 95, 255, 0.3), rgba(85, 136, 255, 0.2));
    color: #ffffff;
    border: 1px solid rgba(125, 95, 255, 0.4);
}

.pl2-compare-card li {
    font-size: 1.02rem;
    gap: 14px;
    grid-template-columns: 24px 1fr;
    line-height: 1.5;
}

.pl2-compare-card.pl2-compare-with li {
    color: rgba(255, 255, 255, 0.92);
}

.pl2-compare-card.pl2-compare-with li span {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    box-shadow: 0 4px 12px -2px rgba(125, 95, 255, 0.5);
}

.pl2-compare-card.pl2-compare-with li span svg {
    width: 13px;
    height: 13px;
}

.pl2-compare-without {
    background: var(--pl2-bg-soft);
    border-color: var(--pl2-line);
}

.pl2-compare-without li span {
    width: 22px;
    height: 22px;
    background: rgba(200, 77, 77, 0.12);
    color: #c84d4d;
    font-size: 0.94rem;
    font-weight: 900;
    border: 1px solid rgba(200, 77, 77, 0.22);
}

.pl2-compare-vs {
    width: 72px;
    height: 72px;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    box-shadow:
        0 24px 48px -12px rgba(125, 95, 255, 0.6),
        0 0 0 6px rgba(125, 95, 255, 0.12),
        0 0 0 12px rgba(125, 95, 255, 0.06);
}

/* ---- CTA: bigger, more impact ---- */
.pl2-final-section {
    padding: 140px 0;
}

.pl2-final-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(125, 95, 255, 0.22), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.pl2-final-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 80px;
}

.pl2-final-copy h2 {
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
}

.pl2-final-copy > p {
    font-size: 1.16rem;
    line-height: 1.65;
    margin-top: 24px;
}

.pl2-final-section .pl2-hero-actions {
    margin-top: 40px;
}

.pl2-final-section .pl2-btn {
    padding: 17px 32px;
    font-size: 1.02rem;
}

.pl2-final-meta {
    margin-top: 32px;
    gap: 24px;
    font-size: 0.92rem;
}

.pl2-final-board {
    padding: 28px 30px 26px;
    border-radius: 24px;
}

.pl2-final-metric strong {
    font-size: 2.4rem;
}

.pl2-final-chart {
    height: 110px;
}

/* ---- Section heading polish ---- */
.pl2-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
}

/* ---- Mobile / responsive tweaks for polish pass ---- */
@media (max-width: 1200px) {
    .pl2-hero {
        padding: 120px 0 96px;
        min-height: auto;
    }

    .pl2-hero-shell {
        gap: 56px;
    }

    .pl2-ecosystem {
        max-width: 540px;
    }

    .pl2-orbit-3 { width: 520px; height: 520px; }

    .pl2-suites-section {
        padding: 96px 0;
    }

    .pl2-suite-stack {
        gap: 80px;
    }

    .pl2-perf-shell {
        padding: 52px 44px;
    }

    .pl2-final-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 960px) {
    .pl2-hero {
        padding: 100px 0 80px;
    }

    .pl2-suite {
        gap: 48px;
    }

    .pl2-mock {
        grid-template-columns: 1fr;
        min-height: 380px;
    }

    .pl2-mock-sidebar {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .pl2-mock-nav {
        display: flex;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        flex: 1;
    }

    .pl2-mock-navitem {
        white-space: nowrap;
        padding: 7px 10px;
    }

    .pl2-mock-side-foot {
        display: none;
    }

    .pl2-mock-kpis,
    .pl2-mock-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-mock-table header,
    .pl2-mock-tr {
        grid-template-columns: 0.6fr 1.4fr 0.6fr 0.8fr 0.6fr 0.2fr;
        gap: 8px;
        padding: 8px 12px;
        font-size: 0.72rem;
    }

    .pl2-mock-team-grid {
        grid-template-columns: 1fr;
    }

    .pl2-mock-split {
        grid-template-columns: 1fr;
    }

    .pl2-industry-grid,
    .pl2-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-perf-shell {
        padding: 40px 28px;
    }

    .pl2-final-section {
        padding: 96px 0;
    }
}

@media (max-width: 680px) {
    .pl2-hero {
        padding: 80px 0 64px;
    }

    .pl2-hero-title {
        font-size: clamp(2.4rem, 9vw, 3rem);
    }

    .pl2-hero-subtitle {
        font-size: 1rem;
    }

    .pl2-perf-shell {
        padding: 32px 22px;
        border-radius: 24px;
    }

    .pl2-mock-board {
        grid-template-columns: 1fr;
    }

    .pl2-mock-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-mock-table header,
    .pl2-mock-tr {
        grid-template-columns: 0.7fr 1.4fr 0.7fr 0.4fr;
        gap: 8px;
        font-size: 0.7rem;
    }

    .pl2-mock-table header > span:nth-child(3),
    .pl2-mock-tr > span:nth-child(3),
    .pl2-mock-table header > span:nth-child(6),
    .pl2-mock-tr > span:nth-child(6) {
        display: none;
    }

    .pl2-industry-grid,
    .pl2-proof-grid {
        grid-template-columns: 1fr;
    }

    .pl2-compare-card {
        padding: 28px 22px;
    }

    .pl2-compare-vs {
        width: 56px;
        height: 56px;
        font-size: 0.86rem;
    }

    .pl2-final-section {
        padding: 80px 0;
    }

    .pl2-final-copy h2 {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }
}

/* ==========================================================================
   Platform page — design correction pass v3
   - Container aligned with site .shell (no override).
   - Hero replaces scattered orbit with anchored operating cockpit card.
   - Sections rebalanced for confident rhythm and clearer hierarchy.
   ========================================================================== */

/* Hide the previous orbit/node/float decorations entirely */
.pl2-ecosystem,
.pl2-ecosystem-stage,
.pl2-orbit,
.pl2-orbit-1,
.pl2-orbit-2,
.pl2-orbit-3,
.pl2-core,
.pl2-node,
.pl2-float {
    /* legacy classes — no longer rendered */
}

/* ---------- HERO ---------- */
.pl2-hero {
    padding: 132px 0 112px;
    min-height: auto;
}

.pl2-hero-shell {
    width: min(100% - 32px, 1440px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 96px;
    align-items: center;
}

.pl2-hero-orb-violet {
    width: 520px;
    height: 520px;
    top: -120px;
    right: 16%;
    opacity: 0.7;
}

.pl2-hero-orb-blue {
    width: 380px;
    height: 380px;
    bottom: -80px;
    left: 26%;
    opacity: 0.55;
}

.pl2-hero-orb-teal {
    width: 360px;
    height: 360px;
    top: 50%;
    right: -40px;
    opacity: 0.62;
}

.pl2-hero-badge {
    padding: 9px 18px;
    font-size: 0.86rem;
}

.pl2-hero-title {
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    max-width: 620px;
}

.pl2-hero-line-gradient {
    background: linear-gradient(115deg, #6be3f4 0%, #99b9ff 40%, #a78bff 80%);
    background-size: 180% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pl2-gradient-shift 14s ease-in-out infinite;
}

.pl2-hero-subtitle {
    max-width: 540px;
    font-size: 1.16rem;
    line-height: 1.65;
}

.pl2-hero-proof {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
}

.pl2-hero-proof span {
    color: rgba(255, 255, 255, 0.82);
}

/* ---------- OPERATING COCKPIT ---------- */
.pl2-cockpit {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.pl2-cockpit-bg {
    position: absolute;
    inset: -60px;
    z-index: -1;
    pointer-events: none;
}

.pl2-cockpit-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.pl2-cockpit-orb-1 {
    width: 380px;
    height: 380px;
    top: -40px;
    right: -40px;
    background: radial-gradient(closest-side, rgba(125, 95, 255, 0.6), transparent 70%);
}

.pl2-cockpit-orb-2 {
    width: 320px;
    height: 320px;
    bottom: -60px;
    left: -60px;
    background: radial-gradient(closest-side, rgba(77, 212, 226, 0.4), transparent 70%);
}

.pl2-cockpit-card {
    position: relative;
    padding: 26px 28px 22px;
    border-radius: 22px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(13, 18, 48, 0.85);
    border: 1px solid rgba(167, 139, 255, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 60px 120px -40px rgba(8, 12, 30, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 60px rgba(125, 95, 255, 0.18) inset;
    color: #ffffff;
}

.pl2-cockpit-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(167, 139, 255, 0.6), rgba(107, 227, 244, 0.18) 45%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pl2-cockpit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pl2-cockpit-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl2-cockpit-mark {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue) 60%, var(--pl2-teal));
    box-shadow: 0 8px 18px -6px rgba(125, 95, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.pl2-cockpit-brand strong {
    display: block;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-cockpit-brand em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.74rem;
    font-weight: 700;
}

.pl2-cockpit-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(62, 207, 142, 0.14);
    color: #6dd6a3;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pl2-cockpit-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pl2-green);
    box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.22);
    animation: pl2-pulse 2s ease-in-out infinite;
}

.pl2-cockpit-hero-metric {
    padding: 22px 0 18px;
}

.pl2-cockpit-hero-metric span {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pl2-cockpit-hero-metric strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 950;
    letter-spacing: -0.025em;
    line-height: 1;
    background: linear-gradient(110deg, #ffffff 0%, #d4d8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pl2-cockpit-hero-metric em {
    display: inline-block;
    margin-top: 10px;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(62, 207, 142, 0.16);
    color: var(--pl2-green);
}

.pl2-cockpit-hero-metric em svg {
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    margin-right: 2px;
}

.pl2-cockpit-chart {
    display: block;
    width: 100%;
    height: 86px;
    margin-bottom: 18px;
}

.pl2-cockpit-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pl2-cockpit-tile {
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pl2-cockpit-tile span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    border-radius: 7px;
    background: linear-gradient(150deg, rgba(125, 95, 255, 0.25), rgba(85, 136, 255, 0.08));
    color: var(--pl2-violet-2);
    border: 1px solid rgba(125, 95, 255, 0.22);
}

.pl2-cockpit-tile:nth-child(2) span {
    background: linear-gradient(150deg, rgba(77, 212, 226, 0.25), rgba(85, 136, 255, 0.08));
    color: var(--pl2-teal-2);
    border-color: rgba(77, 212, 226, 0.28);
}

.pl2-cockpit-tile:nth-child(3) span {
    background: linear-gradient(150deg, rgba(255, 154, 60, 0.25), rgba(125, 95, 255, 0.06));
    color: var(--pl2-amber-2);
    border-color: rgba(255, 154, 60, 0.3);
}

.pl2-cockpit-tile:nth-child(4) span {
    background: linear-gradient(150deg, rgba(62, 207, 142, 0.25), rgba(77, 212, 226, 0.08));
    color: var(--pl2-green);
    border-color: rgba(62, 207, 142, 0.28);
}

.pl2-cockpit-tile span svg {
    width: 14px;
    height: 14px;
}

.pl2-cockpit-tile b {
    display: block;
    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.05;
}

.pl2-cockpit-tile em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pl2-cockpit-stream {
    padding-top: 16px;
}

.pl2-cockpit-stream header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pl2-cockpit-stream header span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pl2-cockpit-stream header em {
    font-style: normal;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(77, 212, 226, 0.14);
    color: var(--pl2-teal-2);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.pl2-cockpit-stream-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pl2-cockpit-stream-row + .pl2-cockpit-stream-row {
    margin-top: 6px;
}

.pl2-cockpit-stream-row b {
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
}

.pl2-cockpit-stream-row em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Floating pills outside the cockpit card */
.pl2-cockpit-pill {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%),
        rgba(10, 14, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -16px rgba(8, 12, 30, 0.85);
    z-index: 3;
}

.pl2-cockpit-pill-tl {
    top: -28px;
    left: -36px;
}

.pl2-cockpit-pill-br {
    bottom: -28px;
    right: -36px;
}

.pl2-cockpit-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--pl2-violet), var(--pl2-blue));
    color: #ffffff;
}

.pl2-cockpit-pill-icon-amber {
    background: linear-gradient(135deg, var(--pl2-amber), #ff6b3c);
}

.pl2-cockpit-pill-icon svg {
    width: 17px;
    height: 17px;
}

.pl2-cockpit-pill strong {
    display: block;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.pl2-cockpit-pill em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 700;
}

/* ---------- SECTION RHYTHM ---------- */
.pl2-section {
    padding: 120px 0;
}

.pl2-section-heading {
    margin-bottom: 64px;
    max-width: 920px;
}

.pl2-section-headline {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
}

.pl2-section-headline h2 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
}

/* ---------- MODULES grid ---------- */
.pl2-modules-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pl2-module-card {
    padding: 28px 26px;
    grid-template-columns: 52px 1fr 22px;
    gap: 18px;
    border-radius: 22px;
}

.pl2-module-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 10px 24px -10px rgba(125, 95, 255, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.pl2-module-icon svg {
    width: 24px;
    height: 24px;
}

.pl2-module-body h3 {
    font-size: 1.06rem;
    margin-bottom: 6px;
}

/* ---------- PERFORMANCE PANEL ---------- */
.pl2-perf-section {
    padding: 120px 0;
}

.pl2-perf-shell {
    padding: 72px 80px;
    border-radius: 36px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(125, 95, 255, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(77, 212, 226, 0.14), transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(13, 18, 48, 0.78);
}

.pl2-perf-heading {
    max-width: 760px;
    margin-bottom: 56px;
}

.pl2-perf-heading h2 {
    font-size: clamp(2.2rem, 3.8vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
}

.pl2-perf-heading p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 640px;
}

.pl2-perf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pl2-perf-card {
    padding: 32px 30px 30px;
    border-radius: 22px;
}

.pl2-perf-card h3 {
    font-size: 1.16rem;
}

.pl2-perf-card p {
    font-size: 0.96rem;
}

/* ---------- SUITES ---------- */
.pl2-suites-section {
    padding: 130px 0;
}

.pl2-suite-stack {
    gap: 120px;
}

.pl2-suite {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 80px;
}

.pl2-suite:nth-child(even) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.pl2-suite-copy {
    max-width: 480px;
}

.pl2-suite-num {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--pl2-muted-2);
}

.pl2-suite-copy h3 {
    font-size: clamp(1.95rem, 3vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    font-weight: 950;
}

.pl2-suite-copy > p {
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 22px 0 28px;
    color: var(--pl2-muted);
}

.pl2-suite-chips span {
    background: #ffffff;
    border: 1px solid var(--pl2-line);
    color: var(--pl2-ink-soft);
    font-size: 0.85rem;
    padding: 8px 14px;
    box-shadow: 0 2px 8px -2px rgba(10, 14, 34, 0.06);
}

.pl2-suite-chips svg {
    color: var(--pl2-violet);
}

.pl2-suite-link {
    background: transparent;
    border: 1px solid var(--pl2-violet);
    color: var(--pl2-violet);
    padding: 12px 22px;
    font-weight: 800;
    font-size: 0.94rem;
}

.pl2-suite-link:hover {
    background: var(--pl2-violet);
    color: #ffffff;
    border-color: var(--pl2-violet);
}

/* Suite preview — taller, more dominant */
.pl2-mock {
    grid-template-columns: 160px 1fr;
    min-height: 480px;
    border-radius: 24px;
}

/* Alternate suites with LIGHT product mockups for variety */
.pl2-mock.pl2-mock-inventory,
.pl2-mock.pl2-mock-finance {
    background: linear-gradient(170deg, #ffffff 0%, #f5f7fc 100%);
    border-color: rgba(125, 95, 255, 0.18);
    color: var(--pl2-ink);
    box-shadow:
        0 60px 120px -50px rgba(10, 14, 34, 0.18),
        0 0 0 1px rgba(125, 95, 255, 0.05) inset;
}

.pl2-mock-inventory::before,
.pl2-mock-finance::before {
    background: linear-gradient(160deg, rgba(125, 95, 255, 0.32), rgba(85, 136, 255, 0.12) 50%, transparent 80%);
}

.pl2-mock-inventory .pl2-mock-sidebar,
.pl2-mock-finance .pl2-mock-sidebar {
    background: linear-gradient(180deg, rgba(243, 245, 252, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-right-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-brand strong,
.pl2-mock-finance .pl2-mock-brand strong {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-navitem,
.pl2-mock-finance .pl2-mock-navitem {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-navitem i,
.pl2-mock-finance .pl2-mock-navitem i {
    background: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-navitem.is-active,
.pl2-mock-finance .pl2-mock-navitem.is-active {
    background: linear-gradient(135deg, var(--pl2-violet-soft), var(--pl2-blue-soft));
    color: var(--pl2-ink);
    box-shadow: 0 0 0 1px rgba(125, 95, 255, 0.18) inset;
}

.pl2-mock-inventory .pl2-mock-side-foot,
.pl2-mock-finance .pl2-mock-side-foot {
    border-top-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-side-foot b,
.pl2-mock-finance .pl2-mock-side-foot b {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-side-foot small,
.pl2-mock-finance .pl2-mock-side-foot small {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-canvas,
.pl2-mock-finance .pl2-mock-canvas {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-topbar,
.pl2-mock-finance .pl2-mock-topbar {
    border-bottom-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-topbar strong,
.pl2-mock-finance .pl2-mock-topbar strong {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-topbar p,
.pl2-mock-finance .pl2-mock-topbar p {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-tab,
.pl2-mock-finance .pl2-mock-tab {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-tab.is-active,
.pl2-mock-finance .pl2-mock-tab.is-active {
    background: var(--pl2-bg-soft);
    color: var(--pl2-ink);
    border-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-kpis > div,
.pl2-mock-finance .pl2-mock-kpis > div {
    background: #ffffff;
    border: 1px solid var(--pl2-line);
    box-shadow: 0 2px 6px -2px rgba(10, 14, 34, 0.06);
}

.pl2-mock-inventory .pl2-mock-kpis span,
.pl2-mock-finance .pl2-mock-kpis span {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-kpis b,
.pl2-mock-finance .pl2-mock-kpis b {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-chart-wrap,
.pl2-mock-finance .pl2-mock-chart-wrap {
    background: #ffffff;
    border-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-chart-head strong,
.pl2-mock-finance .pl2-mock-chart-head strong {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-chart-head .pl2-mock-legend span,
.pl2-mock-finance .pl2-mock-chart-head .pl2-mock-legend span {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-grid line,
.pl2-mock-finance .pl2-mock-grid line {
    stroke: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-rows,
.pl2-mock-finance .pl2-mock-rows,
.pl2-mock-inventory .pl2-mock-half,
.pl2-mock-finance .pl2-mock-half {
    background: #ffffff;
    border-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-rows header,
.pl2-mock-finance .pl2-mock-rows header,
.pl2-mock-inventory .pl2-mock-half header,
.pl2-mock-finance .pl2-mock-half header {
    color: var(--pl2-muted);
    border-bottom-color: var(--pl2-line);
}

.pl2-mock-inventory .pl2-mock-row,
.pl2-mock-finance .pl2-mock-row {
    background: var(--pl2-bg);
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-row em,
.pl2-mock-finance .pl2-mock-row em {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-half header em,
.pl2-mock-finance .pl2-mock-half header em {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-stack b,
.pl2-mock-finance .pl2-mock-stack b {
    color: var(--pl2-muted);
}

.pl2-mock-inventory .pl2-mock-stack span,
.pl2-mock-finance .pl2-mock-stack span {
    color: var(--pl2-ink);
}

.pl2-mock-inventory .pl2-mock-stack i,
.pl2-mock-finance .pl2-mock-stack i {
    background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-blue));
}

/* ---------- PROOF SECTION ---------- */
.pl2-proof-section {
    padding: 130px 0;
}

.pl2-proof-heading {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 64px;
    margin-bottom: 56px;
}

.pl2-proof-heading h2 {
    font-size: clamp(2.2rem, 3.8vw, 3rem);
    line-height: 1.05;
}

.pl2-proof-heading p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.pl2-proof-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.pl2-proof-card {
    padding: 36px 30px 32px;
    border-radius: 22px;
}

.pl2-proof-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    border-radius: 14px;
}

.pl2-proof-icon svg {
    width: 24px;
    height: 24px;
}

.pl2-proof-card h3 {
    font-size: 1.12rem;
    margin-bottom: 14px;
    line-height: 1.25;
}

.pl2-proof-card p {
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ---------- INDUSTRIES ---------- */
.pl2-industries-section {
    padding: 130px 0;
}

.pl2-industry-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.pl2-industry-card {
    padding: 32px 28px 26px;
    border-radius: 22px;
}

.pl2-industry-card::before {
    height: 4px;
    background: linear-gradient(90deg, var(--pl2-violet), var(--pl2-blue));
}

.pl2-industry-head {
    margin-bottom: 28px;
}

.pl2-industry-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.pl2-industry-icon svg {
    width: 26px;
    height: 26px;
}

.pl2-industry-body h3 {
    font-size: 1.24rem;
    margin-bottom: 10px;
}

.pl2-industry-body p {
    font-size: 0.94rem;
    line-height: 1.6;
}

.pl2-industry-metric strong {
    font-size: 1.34rem;
}

.pl2-industry-chev {
    width: 38px;
    height: 38px;
}

/* ---------- COMPARISON ---------- */
.pl2-compare-section {
    padding: 130px 0;
}

.pl2-compare-shell {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 80px;
}

.pl2-compare-copy h2 {
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
}

.pl2-compare-copy p {
    font-size: 1.16rem;
    line-height: 1.65;
    margin-top: 26px;
}

.pl2-compare-wrap {
    gap: 28px;
}

.pl2-compare-card {
    padding: 40px 36px 36px;
    border-radius: 24px;
    min-height: 360px;
}

.pl2-compare-pill {
    padding: 9px 18px;
    font-size: 0.92rem;
    font-weight: 850;
}

.pl2-compare-pill svg {
    width: 14px;
    height: 14px;
}

.pl2-compare-card ul {
    gap: 16px;
    margin-top: 8px;
}

.pl2-compare-card li {
    font-size: 1.04rem;
    line-height: 1.5;
    gap: 16px;
    grid-template-columns: 26px 1fr;
}

.pl2-compare-card.pl2-compare-with li span {
    width: 24px;
    height: 24px;
}

.pl2-compare-card.pl2-compare-with li span svg {
    width: 14px;
    height: 14px;
}

.pl2-compare-without li span {
    width: 24px;
    height: 24px;
    font-size: 1rem;
}

.pl2-compare-vs {
    width: 80px;
    height: 80px;
    font-size: 1.08rem;
}

/* ---------- FINAL CTA ---------- */
.pl2-final-section {
    padding: 140px 0;
}

.pl2-final-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 80px;
}

.pl2-final-copy h2 {
    font-size: clamp(2.6rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
}

.pl2-final-copy > p {
    font-size: 1.18rem;
    margin-top: 26px;
}

.pl2-final-section .pl2-btn {
    padding: 18px 32px;
    font-size: 1.04rem;
}

.pl2-final-meta {
    margin-top: 36px;
    gap: 28px;
    font-size: 0.94rem;
}

.pl2-final-board {
    padding: 28px 30px 26px;
}

.pl2-final-metric strong {
    font-size: 2.6rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .pl2-hero {
        padding: 108px 0 88px;
    }

    .pl2-hero-shell {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .pl2-cockpit {
        max-width: 560px;
    }

    .pl2-cockpit-pill-tl,
    .pl2-cockpit-pill-br {
        display: none;
    }

    .pl2-section-headline {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pl2-modules-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-perf-shell {
        padding: 56px 48px;
    }

    .pl2-perf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-suite {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pl2-suite:nth-child(even) .pl2-suite-copy { order: 1; }
    .pl2-suite:nth-child(even) .pl2-suite-preview { order: 2; }

    .pl2-suite-copy {
        max-width: none;
    }

    .pl2-proof-heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pl2-proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-industry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pl2-compare-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .pl2-final-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 960px) {
    .pl2-section { padding: 80px 0; }
    .pl2-hero { padding: 92px 0 76px; }

    .pl2-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-perf-shell {
        padding: 44px 32px;
        border-radius: 28px;
    }

    .pl2-perf-grid {
        grid-template-columns: 1fr;
    }

    .pl2-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-compare-wrap {
        grid-template-columns: 1fr;
    }

    .pl2-compare-vs {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }

    .pl2-mock {
        grid-template-columns: 1fr;
        min-height: 420px;
    }
}

@media (max-width: 680px) {
    .pl2-section { padding: 64px 0; }
    .pl2-hero { padding: 72px 0 56px; }

    .pl2-cockpit-card {
        padding: 22px 22px 20px;
    }

    .pl2-cockpit-hero-metric strong {
        font-size: 2.1rem;
    }

    .pl2-cockpit-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pl2-modules-grid,
    .pl2-proof-grid,
    .pl2-industry-grid {
        grid-template-columns: 1fr;
    }

    .pl2-perf-shell {
        padding: 32px 22px;
    }

    .pl2-compare-card {
        padding: 28px 22px;
        min-height: 0;
    }

    .pl2-final-section {
        padding: 80px 0;
    }
}

/* ==========================================================================
   Platform page — footer polish (platform-scoped only, other pages unchanged)
   ========================================================================== */

.platform-premium-page .ordello-public-footer {
    position: relative;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(125, 95, 255, 0.18), transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(77, 212, 226, 0.08), transparent 50%),
        linear-gradient(180deg, #0a0e22 0%, #050816 100%);
    border-top: 0;
    padding: clamp(72px, 8vw, 112px) 0 32px;
    overflow: hidden;
}

/* Top edge gradient bar — connects visually with the CTA above */
.platform-premium-page .ordello-public-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(125, 95, 255, 0.45) 25%, rgba(77, 212, 226, 0.45) 50%, rgba(125, 95, 255, 0.45) 75%, transparent 100%);
}

/* Soft glow ribbon at the top */
.platform-premium-page .ordello-public-footer::after {
    content: "";
    position: absolute;
    top: -240px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(125, 95, 255, 0.18), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.platform-premium-page .ordello-public-shell {
    position: relative;
    z-index: 1;
}

.platform-premium-page .ordello-public-footer-grid {
    grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(140px, 1fr));
    gap: clamp(36px, 5vw, 80px);
    padding-bottom: clamp(48px, 6vw, 72px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand block */
.platform-premium-page .ordello-public-footer-brand-block {
    max-width: 460px;
    gap: 24px;
}

.platform-premium-page .ordello-public-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.platform-premium-page .ordello-public-footer-brand .ordello-public-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #7d5fff 0%, #5588ff 55%, #4dd4e2 100%);
    box-shadow:
        0 12px 28px -10px rgba(125, 95, 255, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.platform-premium-page .ordello-public-footer-brand > span:last-child {
    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 850;
    letter-spacing: -0.005em;
}

.platform-premium-page .ordello-public-footer p {
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.98rem;
    line-height: 1.7;
    max-width: 380px;
}

.platform-premium-page .ordello-public-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5588ff 0%, #7d5fff 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    border: 1px solid transparent;
    box-shadow:
        0 14px 32px -14px rgba(85, 136, 255, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.platform-premium-page .ordello-public-footer-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 48px -16px rgba(125, 95, 255, 0.7);
}

/* Footer columns */
.platform-premium-page .ordello-public-footer-group {
    gap: 16px;
    align-content: start;
}

.platform-premium-page .ordello-public-footer-title {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.platform-premium-page .ordello-public-footer-group a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.94rem;
    font-weight: 700;
    transition: color 0.18s ease, transform 0.18s ease;
}

.platform-premium-page .ordello-public-footer-group a:hover,
.platform-premium-page .ordello-public-footer-group a:focus-visible {
    color: #c7b8ff;
    transform: translateX(3px);
}

/* Footer bottom row */
.platform-premium-page .ordello-public-footer-bottom {
    margin-top: clamp(40px, 5vw, 56px);
    border-top: 0;
    padding-top: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.platform-premium-page .ordello-public-footer-bottom a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    font-weight: 700;
}

.platform-premium-page .ordello-public-footer-bottom a:hover,
.platform-premium-page .ordello-public-footer-bottom a:focus-visible {
    color: #c7b8ff;
}

.platform-premium-page .ordello-public-footer-bottom-links {
    gap: 28px;
}

/* Responsive */
@media (max-width: 980px) {
    .platform-premium-page .ordello-public-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px;
    }

    .platform-premium-page .ordello-public-footer-brand-block {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .platform-premium-page .ordello-public-footer {
        padding: 72px 0 28px;
    }

    .platform-premium-page .ordello-public-footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .platform-premium-page .ordello-public-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}