/* ========================================
   Platform Page Styles - Salary.B2B
   ======================================== */

/* Typography and Global Elements
   ======================================== */
main {
    overflow: hidden;
}

:root {
    --sa-max-width: 1440px;

    --sa-border-radius-s: 8px;
    --sa-border-radius-m: 16px;
    --sa-border-radius-l: 24px;
}

.platform-hero-eyebrow,
.platform-features-eyebrow,
.platform-data-eyebrow,
.platform-intelligence-eyebrow,
.platform-recognition-eyebrow,
.platform-cta-eyebrow {
    color: var(--sa-text-tertiary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 18px;
    margin: 0 0 var(--sa-space-l) 0;
    text-transform: uppercase;
}

.platform-testimonial .platform-hero-eyebrow,
.platform-max .platform-max-eyebrow,
.platform-recognition .platform-recognition-eyebrow,
.platform-cta .platform-cta-eyebrow {
    color: var(--sa-text-tertiary-inverse);
}

/* Brand Gradient Text */
.brand-gradient-text {
    background: var(--sa-gradient-text-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.platform-hero {
    background-color: var(--sa-background-primary);
    padding: var(--sa-space-3xl) 0;
}

.platform-hero-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
}

.platform-hero-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-3xl);
}

.platform-hero-text {
    flex: 1 1 353px;
    max-width: 688px;
    min-width: 353px;
}

.platform-hero-title {
    color: var(--sa-text-primary);
    font-size: 64px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 72px;
    margin: 0 0 var(--sa-space-l) 0;
}

.platform-hero-description {
    color: var(--sa-text-secondary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0 0 var(--sa-space-2xl) 0;
}

.platform-hero-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-m);
}

.platform-hero-image {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-hero-img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

/* ========================================
   FEATURE CARDS SECTION
   ======================================== */

.platform-features {
    background: var(--sa-gradient-neu-right);
    padding: var(--sa-space-3xl) var(--sa-space-l);
    position: relative;
}

.platform-features-container {
    max-width: var(--sa-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-6xl);
    padding: var(--sa-space-2xl) var(--sa-space-l);
    overflow: clip;
}

.platform-features-bg-image {
    display: flex;
    width: 1516.258px;
    height: 1516.258px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc(50% + 750px);
    top: calc(50% + 318px);
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 0;
}

.platform-features-header {
    max-width: 660px;
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-l);
}

.platform-features-title {
    color: var(--sa-text-primary);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0;
}

.platform-features-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-2xl);
    justify-content: center;
    inline-size: fit-content;
    margin: 0 auto;
}

.platform-feature-card {
    flex: 1;
    border: 1px solid var(--sa-border-default);
    border-radius: var(--sa-border-radius-s);
    display: flex;
    flex-direction: column;
    z-index: 1;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.platform-feature-card-ai {
    background-color: var(--sa-background-inverse-secondary);
    color: var(--sa-text-primary-inverse);
    border-color: transparent;
}

.platform-feature-card-ai .platform-feature-title,
.platform-feature-card-ai .platform-feature-description {
    color: var(--sa-text-primary-inverse);
}

.platform-feature-card-ai .platform-feature-icon i {
    color: var(--sa-text-link-inverse);
}

.platform-feature-card-ai .btn-sal-text {
    color: var(--sa-text-link-inverse);
}

a.platform-feature-card-ai.glass-effect:hover {
    background: var(--sa-background-inverse-secondary);
    border: 1px solid var(--sa-border-bold);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

a.platform-feature-card-ai.glass-effect:active {
    background: var(--sa-background-inverse-secondary);
    box-shadow: none;
}

.platform-feature-card-icon-container {
    padding: var(--sa-space-xl);
    display: flex;
    width: 100%;
}

.platform-feature-card-content-container {
    padding: var(--sa-space-xl);
    display: flex;
    width: 100%;
    flex: 1;
}

.platform-feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-feature-icon i {
    font-size: 48px;
    color: var(--sa-icon-brand-secondary);
    line-height: 1;
}

.platform-feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-2xl);
    flex: 1;
    width: 100%;
}

.platform-feature-content .btn-sal {
    justify-content: start;
    padding-right: var(--sa-space-l);
}

.platform-feature-content .btn-sal i {
    margin-left: var(--sa-space-s);
}

.platform-feature-text {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: var(--sa-space-l);
    min-height: 162px;
}

.platform-feature-title {
    color: var(--sa-text-primary);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 32px;
    margin: 0;
}

.platform-feature-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--sa-text-secondary);
}

/* ========================================
   DATA SECTION (Media + Text)
   ======================================== */

.platform-data {
    background-color: var(--sa-background-primary);
    padding: var(--sa-space-3xl) 0;
}

.platform-data-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
}

.platform-data-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-6xl);
}

.platform-data-image {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-data-img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transform: scaleY(-1) rotate(180deg);
    width: 100%;
}

.platform-data-text {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-data-title {
    color: var(--sa-text-primary);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0 0 var(--sa-space-l) 0;
}

.platform-data-description {
    color: var(--sa-text-secondary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0 0 var(--sa-space-2xl) 0;
}

/* ========================================
   MAX SECTION — Introducing Max (Figma node-id: 6012:2578)
   Dark background, text-only, single column
   ======================================== */

.platform-max {
    background-color: var(--sa-background-inverse-primary);
    padding: var(--sa-space-3xl) 0;
    position: relative;
    z-index: 1;
}

.platform-max-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
}

/* Single-column flex; gap: 16px between items */
.platform-max-content {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-l);
    width: 100%;
}

.platform-max-eyebrow {
    color: var(--sa-text-tertiary-inverse);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 18px;
    margin: 0;
    text-transform: uppercase;
}

.platform-max-title {
    color: var(--sa-text-primary-inverse);

    margin: 0;
}

.platform-max-description {
    color: var(--sa-text-secondary-inverse);
}

.platform-max-description p {
    margin: 0;
}

.platform-max-btn-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-m);
    padding-top: var(--sa-space-l);
}

/* ========================================
   INTELLIGENCE SECTION (Media + Text)
   ======================================== */

.platform-intelligence {
    background-color: var(--sa-background-primary);
    padding: var(--sa-space-3xl) 0;
}

.platform-intelligence-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
}

.platform-intelligence-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-6xl);
}

.platform-intelligence-text {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-intelligence-title {
    color: var(--sa-text-primary);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0 0 var(--sa-space-l) 0;
}

.platform-intelligence-description {
    color: var(--sa-text-secondary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0 0 var(--sa-space-2xl) 0;
}

.platform-intelligence-image {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-intelligence-img {
    aspect-ratio: 696 / 410;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

/* ========================================
   TESTIMONIAL SECTION
   ======================================== */

.platform-testimonial {
    background-color: var(--sa-background-inverse-primary);
    overflow: hidden;
    padding: var(--sa-space-3xl) 0;
    position: relative;
}

.platform-testimonial-bg-image {
    width: 1300px;
    height: 1300px;
    position: absolute;
    right: calc(50%);
    bottom: calc(50%);
    opacity: 1;
    transform: rotate(200deg);
    z-index: 1;
}

.platform-testimonial-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
    position: relative;
    z-index: 2;
}

.platform-testimonial-container .text-eyebrow {
    color: var(--sa-text-secondary-inverse);
}

.platform-testimonial-header {
    margin-bottom: var(--sa-space-6xl);
    max-width: 660px;
}

.platform-testimonial-heading {
    color: var(--sa-text-primary-inverse);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0;
}

.platform-testimonial-card {
    align-items: flex-start;
    background-color: var(--sa-background-inverse-secondary);
    border: 1px solid var(--sa-border-inverse);
    border-radius: var(--sa-border-radius-s);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-3xl);
    padding: var(--sa-space-xl) var(--sa-space-4xl) var(--sa-space-l);
}

.platform-testimonial-content {
    display: flex;
    flex: 1 1 266px;
    flex-direction: column;
    gap: var(--sa-space-3xl);
    min-width: 266px;
}

.platform-testimonial-quote {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-l);
}

.platform-testimonial-text {
    border-left: none;
    color: var(--sa-text-primary-inverse);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

.platform-testimonial-attribution {
    color: var(--sa-text-secondary-inverse);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0;
}

.platform-testimonial-pagination {
    align-items: center;
    display: flex;
    gap: var(--sa-space-s);
}

.pagination-dot {
    background-color: var(--sa-background-link-inverse);
    border-radius: 999px;
    display: inline-block;
    height: var(--sa-space-s);
    opacity: 0.3;
    width: var(--sa-space-s);
}

.pagination-dot.active {
    opacity: 1;
    width: var(--sa-space-xl);
}

.platform-testimonial-controls {
    display: flex;
    flex: 1 1 266px;
    gap: var(--sa-space-l);
    justify-content: flex-end;
    min-width: 266px;
}

/* ========================================
   RECOGNITION SECTION
   ======================================== */

.platform-recognition {
    background-color: var(--sa-background-inverse-primary);
    padding: var(--sa-space-3xl) 0;
}

.platform-recognition-container {
    margin: 0 auto;
    max-width: var(--sa-max-width);
    padding: var(--sa-space-2xl) var(--sa-space-l);
}

.platform-recognition-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-6xl);
}

.platform-recognition-image {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-recognition-img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.platform-recognition-text {
    flex: 1 1 353px;
    min-width: 353px;
}

.platform-recognition-title {
    color: var(--sa-text-primary-inverse);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0 0 var(--sa-space-l) 0;
}

.platform-recognition-description {
    color: var(--sa-text-secondary-inverse);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
}

    .platform-recognition-description p {
        margin: 0 0 var(--sa-space-l) 0;
    }

        .platform-recognition-description p:last-child {
            margin-bottom: 0;
        }

/* ========================================
   CTA SECTION
   ======================================== */

.platform-cta {
    background-color: var(--sa-background-inverse-primary);
    padding: var(--sa-space-8xl) 0;
}

.platform-cta-container {
    margin: 0 auto;
    max-width: 1300px;
    padding: 0 var(--sa-space-l);
}

.platform-cta-content {
    align-items: center;
    background-color: var(--sa-background-brand);
    border-radius: var(--sa-border-radius-m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-2xl);
    min-width: 244px;
    overflow: hidden;
    padding: var(--sa-space-8xl) var(--sa-space-3xl);
    position: relative;
}

.platform-cta-bg-image {
    width: 823px;
    height: 823px;
    opacity: 1;
    position: absolute;
    right: -192px;
    bottom: -518px;
    z-index: 0;
}

.platform-cta-content .btn-sal {
    inline-size: fit-content;
}

.platform-cta-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--sa-space-l);
    max-width: 600px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.platform-cta-title {
    color: var(--sa-text-primary-inverse);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 56px;
    margin: 0;
}

.platform-cta-description {
    color: var(--sa-text-secondary-inverse);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    margin: 0 0 var(--sa-space-l) 0;
}

/* ========================================
   RESPONSIVE STYLES - MOBILE FIRST
   ======================================== */

/* Tablet and up (1024px) */
@media (min-width: 1024px) {
    .platform-features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .platform-features-grid .platform-feature-card {
        max-width: 366px;
    }
}

.custom-slider-container {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: var(--sa-text-primary-inverse) !important;
    border: 1px solid var(--sa-border-inverse) !important;
    border-radius: var(--sa-border-radius-s);
    position: relative;
    z-index: 3;
    touch-action: pan-y;
}

.custom-pagination button {
    background: var(--sa-text-primary-inverse) !important;
}

.custom-navigation .btn-sal-secondary {
    color: var(--sa-text-primary-inverse) !important;
    background: var(--sa-background-inverse-secondary) !important;
    border-color: var(--sa-text-primary-inverse) !important;
}