/* ══════════════════════════════════════════════════════════════════════════════
   JOURNEY PAGE — page-scoped tokens
   global.css only defines the brand-red family + neutral/success/warning.
   This page's design needs extra accents (orange / magenta / purple / blue)
   for stat icons, the platform stack, and stakeholder cards. Scoped locally
   here rather than added to global.css — flag to design team if these should
   be promoted to shared tokens.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --jrn-orange: #ff7a1a;
    --jrn-amber: #f5a524;
    --jrn-magenta: #e0308a;
    --jrn-purple: #7c3aed;
    --jrn-blue: #2f8fe0;
    --jrn-navy-900: #0b1120;
    --jrn-navy-800: #121a2e;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════════ */

.landing-page-hero-image {
    height: 619px;
    border-radius: 40px;
}

/*═══════════════════════════════════════
 HERO
═══════════════════════════════════════*/

#landing-page-hero {
    padding: calc(var(--space-xl) + 50px) 0 var(--space-xl);
    background: var(--white);
}

.comparison-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

.comparison-section-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
}

.comparison-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    /* letter-spacing: 0.12em; */
    /* text-transform: uppercase; */
    /* color: black; */
    border: 1px solid var(--neutral-200);
    /* background: rgba(232, 52, 26, 0.05); */
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin-bottom: var(--space-sm);
}

.comparison-section-label svg {
    width: 12px;
    height: 12px;
}

.heroSwiper {
    width: 100%;
}

.heroSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation */

.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev {
    color: #ffffff;
}

/* Pagination */

.heroSwiper .swiper-pagination {
    position: static;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.heroSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--neutral-400);
    opacity: .5;
    transition: .3s;
}

.heroSwiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 999px;
    background: var(--brand-red);
    opacity: 1;
}

/* Pagination */

.stakeholder-swiper .swiper-pagination {
    position: static;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.stakeholder-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--neutral-400);
    opacity: .5;
    transition: .3s;
}

.stakeholder-swiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 999px;
    background: var(--brand-red);
    opacity: 1;
}


/* Sacle */

/* .heroSwiper .swiper-slide img{
    transform:scale(1);
    transition:transform 2s ease;
}

.heroSwiper .swiper-slide-active img{
    transform:scale(1.01);
} */

/* Blurry  */

/* .swiper-slide{
    filter: blur(8px);
    transition: filter .8s;
}

.swiper-slide-active{
    filter: blur(0);
} */

.l-hero-content {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.l-hero-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
}

.jh-panels {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 640px) 1fr;
    align-items: stretch;
    min-height: 460px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.jh-panel {
    position: relative;
    isolation: isolate;
}

.jh-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jh-panel-building {
    background: linear-gradient(160deg, #0d1424 0%, #060a14 100%);
}

.jh-panel-built {
    background: linear-gradient(200deg, #1c3a52 0%, #d97a3f 100%);
}

.jh-panel-label {
    position: absolute;
    top: var(--space-md);
    z-index: 2;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.jh-panel-building .jh-panel-label {
    left: var(--space-md);
}

.jh-panel-built .jh-panel-label {
    right: var(--space-md);
}

.jh-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: linear-gradient(180deg,
            rgba(11, 17, 32, 0.2) 0%,
            rgba(11, 17, 32, 0.75) 100%);
}

.jh-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red-light);
    margin-bottom: var(--space-sm);
}

.jh-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: var(--space-md);
}

.jh-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.jh-btn-ghost {
    color: var(--white);
}

.jh-personas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-md) 0 var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0;
}

.jh-persona {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.jh-persona-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jh-persona-icon img {
    width: 16px;
    height: 16px;
}

@media (max-width: 992px) {
    .jh-panels {
        grid-template-columns: 1fr;
        grid-template-rows: 220px auto 220px;
        min-height: 0;
    }
}

@media (max-width: 576px) {
    .jh-personas {
        gap: var(--space-md);
    }

    .jh-persona span:not(.jh-persona-icon) {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   IMPACT STATS
   ══════════════════════════════════════════════════════════════════════════════ */
#impact-stats {
    padding: var(--space-xl) 0;
    background: var(--white);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.impact-card {
    position: relative;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: var(--transition);
}

.impact-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.impact-card .impact-card-image {
    position: absolute;
    bottom: 10px;
    right: 40px;
    width: 170px;
    height: 140px;
}

.impact-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.impact-icon img {
    width: 24px;
    height: 24px;
}

.impact-icon-orange {
    background: var(--jrn-orange);
}

.impact-icon-amber {
    background: var(--jrn-amber);
}

.impact-icon-magenta {
    background: var(--jrn-magenta);
}

.impact-icon-purple {
    background: var(--jrn-purple);
}

.impact-value {
    position: relative;
    z-index: 999;
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.impact-card:nth-child(1) .impact-value {
    color: var(--jrn-orange);
}

.impact-card:nth-child(2) .impact-value {
    color: var(--jrn-amber);
}

.impact-card:nth-child(3) .impact-value {
    color: var(--jrn-magenta);
}

.impact-card:nth-child(4) .impact-value {
    color: var(--jrn-purple);
}

.impact-label {
    position: relative;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--neutral-600);
    line-height: 1.4;
    max-width: 100px;
    z-index: 999;
}

@media (max-width: 768px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLATFORM STACK
   ══════════════════════════════════════════════════════════════════════════════ */
#platform-stack {
    padding: var(--space-xl) 0;
    /* background: var(--neutral-50); */
}

#platform-stack-heading {
    margin-bottom: var(--space-lg);
}

.stack-layout {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 380px) 1fr;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.stack-callouts {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.stack-callouts-right {
    text-align: right;
}

.stack-callout-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.4rem;
}

.stack-callout-desc {
    font-size: 0.875rem;
    color: var(--neutral-600);
    line-height: 1.6;
}

.stack-visual img {
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .stack-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .stack-callouts-right {
        text-align: center;
    }

    .stack-visual {
        order: -1;
        max-width: 320px;
        margin: 0 auto var(--space-md);
    }
}

.stack-outcomes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--neutral-200);
}

.stack-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.stack-outcome-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(232, 52, 26, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack-outcome-icon img {
    width: 20px;
    height: 20px;
}

.stack-outcome-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.25rem;
}

.stack-outcome-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--neutral-400);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .stack-outcomes {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .stack-outcomes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════════════════ */
#comparison {
    padding: var(--space-xl) 0;
    background: var(--white);
}

.comparison-table-wrap {
    margin-top: var(--space-xl);
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

.comparison-table thead th {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--white);
    background: var(--neutral-800);
    text-align: center;
    padding: var(--space-md);
}

.comparison-table thead th:first-child {
    background: #3d4453eb;
}

.comparison-table thead th.comparison-col-featured {
    background: linear-gradient(120deg, var(--brand-red), var(--jrn-magenta));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.comparison-table thead th.comparison-col-traditional {
    background: #3d4453;
}


.comparison-table thead th.comparison-col-lowcode {
    background: #353b49;
}

.comparison-table thead th.comparison-col-featured img {
    filter: brightness(0) invert(1);
    height: 30px;
}

.comparison-table tbody th[scope="row"] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--neutral-900);
    padding: var(--space-md);
    white-space: nowrap;
}

.comparison-table tbody th[scope="row"] svg {
    margin-right: 0.5rem;
}

.comparison-table tbody th[scope="row"] img {
    width: 18px;
    height: 18px;
}

.comparison-table tbody td {
    padding: var(--space-md);
    font-size: 0.875rem;
    color: var(--neutral-600);
    border-top: 1px solid var(--neutral-200);
    vertical-align: top;
}

.comparison-table tbody td img {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin-right: 0.7rem;
}

.comparison-table tbody tr:first-child td {
    border-top: none;
}

.comparison-table tbody td.comparison-col-featured {
    background: rgba(232, 52, 26, 0.04);
    font-weight: 600;
    color: var(--neutral-900);
}

.comparison-table tbody td.comparison-col-featured span {
    display: inline-flex;
    flex-direction: column;
}

.comparison-table tbody td.comparison-col-featured small {
    font-weight: 500;
    color: var(--neutral-400);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.td-content {
    display: flex;
    justify-content: start;
    align-items: center;
}

@media (max-width: 640px) {

    .comparison-table thead th,
    .comparison-table tbody th,
    .comparison-table tbody td {
        padding: var(--space-sm);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   INDUSTRIES
   ══════════════════════════════════════════════════════════════════════════════ */
#industries {
    padding: var(--space-xl) 0;
}

.industries-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    align-items: start;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
}

.industry-item {
    display: flex;
    align-items: flex-start;
    /* gap: var(--space-sm); */
    /* flex-direction: column; */
    gap: 0.6rem;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.industry-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-2xl);
    background: var(--white);
    border: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.industry-icon img {
    width: 22px;
    height: 22px;
}

.industry-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.2rem;
}

.industry-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--neutral-400);
    line-height: 1.5;
}

.industry-item-summary {
    flex-direction: column;
    gap: 0.6rem;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.industry-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--neutral-600);
    font-weight: 500;
    padding: 0.2rem 0;
}

.industry-checklist img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* .featured-industry { */
/* position: relative; */
/* background: linear-gradient(165deg, #f7ecff 0%, #fdeef1 100%); */
/* border: 1px solid rgba(124, 58, 237, 0.15); */
/* border-radius: var(--radius-lg); */
/* padding: var(--space-lg); */
/* overflow: hidden; */
/* } */

.featured-industry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--jrn-purple);
    background: var(--white);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    margin-bottom: var(--space-md);
}

.featured-industry-badge img {
    width: 12px;
    height: 12px;
}

.featured-industry-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.featured-industry-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.featured-industry-icon img {
    width: 26px;
    height: 26px;
}

.featured-industry-heading h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--neutral-900);
    margin-bottom: 0.15rem;
}

.featured-industry-heading p {
    font-size: 0.8125rem;
    color: var(--neutral-600);
}

.featured-industry-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.featured-industry-stats li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.featured-industry-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.featured-industry-stat-icon img {
    width: 18px;
    height: 18px;
}

.featured-industry-stat-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.15rem;
}

.featured-industry-stat-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--neutral-600);
    line-height: 1.5;
}

.featured-industry-cta {
    background: linear-gradient(120deg, var(--jrn-purple), var(--jrn-magenta));
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
}

.featured-industry-illustration {
    width: 100%;
    height: auto;
    margin-top: var(--space-lg);
}

@media (max-width: 992px) {
    .industries-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .industries-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STAKEHOLDERS
   ══════════════════════════════════════════════════════════════════════════════ */
#stakeholders {
    /* padding: var(--space-xl) 0; */
    background: var(--white);
}

.stakeholder-grid {
    margin-top: var(--space-lg);
    list-style: none;
    padding: 0;
}

.stakeholder-card {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    box-sizing: border-box;
    height: 100%;
}

.stakeholder-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    padding: 6px 8px
}

.stakeholder-card:hover {
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.stakeholder-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stakeholder-icon img {
    width: 22px;
    height: 22px;
}

.stakeholder-icon-purple {
    background: #faf7fe;
}

.stakeholder-icon-orange {
    background: #fef8f4;
}

.stakeholder-icon-blue {
    background: #f7f6fd;
}

.stakeholder-icon-grey {
    background: #f8f9fb;
}

.stakeholder-tag {
    font-size: 0.75rem;
    font-weight: 600;
}

.stakeholder-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--neutral-900);
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

.stakeholder-name span {
    font-weight: 600;
    color: var(--neutral-400);
    font-size: 0.8125rem;
}

.stakeholder-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.stakeholder-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--neutral-600);
}

.stakeholder-features img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.stakeholder-illustration {
    margin-top: auto;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

@media (max-width: 992px) {
    .stakeholder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stakeholder-grid {
        grid-template-columns: 1fr;
    }
}

.stakeholder-swiper {
    margin-top: var(--space-lg);
    overflow: hidden;
    padding-bottom: 4rem;
}

.stakeholder-swiper .swiper-wrapper {
    align-items: stretch;
}

.stakeholder-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.stakeholder-swiper .swiper-slide>.stakeholder-card {
    width: 100%;
}