/* ==========================================================================
   SOLUTION HERO SECTION (Real Estate CRM & Solutions)
   ========================================================================== */
.solution-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: 80vh;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    background-color: #FFF9F6;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    /*padding: 100px 20px 60px 20px;*/
    padding: 150px 20px 60px 20px;
    box-sizing: border-box;
    overflow: hidden;
    align-items: flex-start;
}

/* Background gradient overlay to ensure perfect contrast & seamless warm aesthetic */
.solution-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 248, 243, 0.15) 60%, rgba(255, 255, 255, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

.solution-hero-section.real-estate-hero-section {
    background-color: #F7F7F5;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Real-Estate-CRM-Hero-Bg-scaled.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-section-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.solution-hero-section.it-saas-hero-section {
    background-color: #FF7A331F;
}

.solution-hero-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.solution-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.solution-hero-badge {
    display: block;
    font-size: clamp(20px, 2.3vw, 30px);
    font-weight: 500;
    color: #262930;
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    font-family: inherit;
}

.solution-hero-title {
    font-size: clamp(26px, 4.2vw, 46px);
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
    margin: 0 0 18px 0;
    letter-spacing: -0.025em;
    max-width: 950px;
}

.solution-hero-desc {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.65;
    color: #555E68;
    /*max-width: 820px;*/
    margin: 0 auto 34px auto;
}

.solution-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.solution-hero-section.real-estate-hero-section::after,
.solution-hero-section.it-saas-hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            #ffffff 100%);
    pointer-events: none;
}

/* Solution Hero Responsive */
@media (max-width: 991px) {
    .solution-hero-section {
        height: auto;
        min-height: 75vh;
        padding: 90px 20px 60px 20px;
    }
}

@media (max-width: 768px) {
    .solution-hero-section {
        min-height: 70vh;
        padding: 85px 16px 50px 16px;
    }

    .solution-hero-desc {
        margin-bottom: 28px;
    }
}

@media (max-width: 480px) {
    .solution-hero-section {
        min-height: auto;
        padding: 100px 14px 45px 14px;
    }

    .solution-hero-actions {
        width: 100%;
        gap: 12px;
    }
}

.solution-hero-section-inner {
    margin: 0 auto;
    max-width: 1600px;
    padding: 10px;
    padding-top: 100px;
}

@media (max-width: 768px) {
    /* .solution-hero-section-inner {
        padding-top: 70px;
    } */
}

.section-divider {
    border-top: 1px solid #FFD6D6;
    width: 100%;
}

/* ==========================================================================
   PROBLEM SECTION & MANAGE LEAD GRID
   ========================================================================== */
.problem-section {
    padding: 70px 0 90px;
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.problem-section .section-header {
    text-align: center;
    /*max-width: 950px;*/
    max-width: 100%;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.problem-section .section-heading {
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    color: #1E2229;
    line-height: 1.22;
    margin: 0 0 12px 0;
    letter-spacing: 0%;
}

.problem-section .section-heading-highlight {
    color: #FF4000;
    font-weight: 800;
}

.problem-section .section-subheading {
    font-size: 16px;
    color: #555E68;
    line-height: 1.5;
    margin: 0;
}

.manage-lead-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.manage-lead-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #FFF6F6;
    border-left: 1px solid #FFD6D6;
    border-right: 1px solid #FFD6D6;
    box-sizing: border-box;
}

.manage-lead-card {
    padding: 38px 26px;
    border-right: 1px solid #FFD6D6;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Frame-2055246730-1.svg);
    background-position: bottom center;
}

.manage-lead-card:last-child {
    border-right: none;
}

.manage-lead-card:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

.lead-card-title {
    font-size: 22px;
    font-weight: 600;
    color: #E25858;
    line-height: 1.35;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
}

.lead-card-desc {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
    .problem-section {
        padding: 55px 0 70px;
    }

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

    .manage-lead-card:nth-child(2) {
        border-right: none;
    }

    .manage-lead-card:nth-child(-n+2) {
        border-bottom: 1px solid #FFD6D6;
    }
}

@media (max-width: 640px) {
    .problem-section {
        padding: 40px 0 50px;
    }

    .manage-lead-container {
        padding: 0 16px;
    }

    .manage-lead-grid {
        grid-template-columns: 1fr;
    }

    .manage-lead-card {
        border-right: none;
        border-bottom: 1px solid #FFD6D6;
        padding: 26px 20px;
    }

    .manage-lead-card:last-child {
        border-bottom: none;
    }

    .lead-card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .lead-card-desc {
        font-size: 13.5px;
    }
}

.product-preview-content {
    padding-top: 70px;
}

@media (max-width: 768px) {
    .product-preview-content {
        padding-top: 0px;
    }
}

.wsr *,
.wsr *::before,
.wsr *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wsr {
    --pr: #FF4000;
    --tdark: #222;
    --thead: #333;
    --tmut: #6B6B6B;
    --ttag: #A4A4A4;
    --bg: #ffffff;
    --bgf: #f5f5f5;
    --bdr: #C2C2C2;
    --font: 'Plus Jakarta Sans';
    --site-header-h: 120px;
    /* ← change this to match your site header height */
    width: 100%;
    background: var(--bg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── STICKY: only the nav row ── */
.wsr-tabs-sticky {
    position: sticky;
    top: var(--site-header-h);
    z-index: 99;
    background: var(--bg);
    isolation: isolate;
}

.wsr-tabs-sticky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    /*height: var(--site-header-h);*/
    height: 50px;
    background: var(--bg);
    pointer-events: none;
    z-index: -1;
}

.wsr-tabs {
    display: flex;
    border: 1px solid #CFCFCF;
    margin: 0 auto;
    padding: 5px;
    background: var(--bg);
    border-radius: 16px;
}

.wsr-tab {
    flex: 1;
    background: var(--bg);
    border: none;
    padding: 14px 10px;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700;
    color: var(--tdark);
    cursor: pointer;
    outline: none;
    transition: background 0.25s, color 0.25s;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.wsr-tab:focus {
    color: var(--tdark);
    background: var(--bgf);
    border-radius: 14px;
}

.wsr-tab.active {
    color: var(--pr);
    background: var(--bgf);
    border-radius: 14px;
}

.wsr-tab:not(.active):hover {
    color: var(--pr);
    background: none;
}

/* ── SECTIONS & CARDS ── */
.wsr-sections {
    padding: 10px;
    padding-top: 30px;
    // padding-bottom:calc(100vh - 220px);
}

.wsr-section {
    margin: 0 auto 0px auto;
    display: flex;
    min-height: 560px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 20.8px 0px #00000026;
    border: 1px solid #CFCFCF;
    border-radius: 40px;
}

.wsr-section:last-child {
    margin-bottom: 0;
}

/* ── LEFT CONTAINER ── */
.wsr-left {
    width: 55%;
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
}

.wsr-label {
    color: var(--pr);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}

.wsr-title {
    color: var(--thead);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.wsr-desc {
    color: var(--tmut);
    font-size: 14px;
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 32px;
}

.wsr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pr);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 36px;
    width: fit-content;
    transition: gap .2s;
    line-height: 1.4;
}

.wsr-link:hover {
    gap: 14px;
}

.wsr-link svg {
    flex-shrink: 0;
    transition: transform .2s;
}

.wsr-link:hover svg {
    transform: translateX(3px);
}

.wsr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.wsr-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--ttag);
    padding: 2px 0;
    line-height: 1.6;
    cursor: pointer;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.wsr-tag.active {
    color: var(--pr) !important;
    font-weight: 700;
}

.wsr-tag:not(:last-child)::after {
    content: " ";
    margin: 0 10px;
    color: var(--bdr);
    font-weight: 400;
}

.wsr-tag:hover {
    color: #363332;
}

/* ── RIGHT CONTAINER ── */
.wsr-right {
    width: 45%;
    position: relative;
    padding: 40px;
    background-color: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.wsr-right img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 40px;
    border: 1px solid #CFCFCF;
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1300px) {
    .wsr-tab {
        font-size: 18px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 34px;
    }

    .wsr-left {
        padding: 48px 36px;
    }
}

@media (max-width: 1024px) {
    .wsr-tab {
        font-size: 16px;
        padding: 12px 8px;
    }

    .wsr-section {
        min-height: 480px;
    }

    .wsr-left {
        padding: 32px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 28px;
    }

    .wsr-desc {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .wsr-link {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .wsr-tag {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .wsr-tabs-sticky {
        display: none;
    }

    .wsr {
        --site-header-h: 56px;
    }

    .wsr-tabs-sticky {
        padding: 0 16px;
        top: var(--site-header-h);
    }

    .wsr-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        display: flex;
    }

    .wsr-tabs::-webkit-scrollbar {
        display: none;
    }

    .wsr-tab {
        flex: 0 0 auto;
        min-width: 140px;
        font-size: 14px;
        padding: 12px 16px;
        border-right: 1px solid var(--bdr);
    }

    .wsr-tab:last-child {
        border-right: none;
    }

    .wsr-section {
        flex-direction: column;
        min-height: auto;
        margin-bottom: 24px;
    }

    .wsr-left {
        width: 100%;
        padding: 24px 20px;
        justify-content: flex-start;
    }

    .wsr-label,
    .wsr-title {
        font-size: 24px;
    }

    .wsr-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .wsr-right {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        min-height: 280px;
    }

    .wsr-frame {
        top: 100px !important;
    }
}

@media (max-width: 480px) {
    .wsr-tabs-sticky {
        padding: 0 8px;
    }

    .wsr-left {
        padding: 20px 14px;
    }

    .wsr-label,
    .wsr-title {
        font-size: 22px;
    }

    .wsr-right {
        min-height: 220px;
    }

    .wsr-tag {
        font-size: 13px;
    }

    .wsr-tag:not(:last-child)::after {
        margin: 0 6px;
    }

    .wsr-frame {
        top: 100px !important;
    }
}

.wsr-frame {
    background-color: rgb(236, 235, 232);
    padding: 16px;
    border-radius: 48px;
    margin-bottom: 32px;
}

.wsr-frame {
    position: sticky;
    top: 200px;
    margin-bottom: 120px;
    border-radius: 48px;
    z-index: 1;
    overflow: visible;
}

.wsr-section {
    transform-origin: center top;
    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;
}

/* Invisible, non-sticky markers used purely for accurate scroll
   position measurement — position:sticky elements can have
   unreliable getBoundingClientRect()/offsetTop values, so we never
   measure the sticky frames directly for navigation logic. */
.wsr-anchor {
    position: static;
    height: 0;
    margin: 0;
    padding: 0;
}

.wsr-link:hover,
.wsr-link:focus,
.wsr-link:active {
    color: #FF4000 !important;
}















/* Parent Section Wrap */
.home-features {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 24px 0px 24px;
}

/* Two-Column Layout Grid */
.features-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

/* Left Sidebar Sticky Styling */
.features-sidebar {
    position: sticky;
    top: 130px;
    /* Keeps menu pinned 40px from top of viewpoint while scrolling */
    // max-height: calc(100vh - 80px);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-item {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    transition: color 0.2s ease;
    display: block;
    cursor: pointer;
}

.menu-item:hover {
    color: #1a1a1a;
}

/* Active Highlight Color from Mockup Frame */
.menu-item.active {
    color: #FF4000;
    /* Coral/Orange highlight accent */
    font-weight: 600;
}

/* Right Content Area Settings */
.features-content {
    display: flex;
    flex-direction: column;
    gap: 100px;
    /* Distinct visual spacing between blocks */
}

.feature-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #333333;
    max-width: 600px;
    margin-bottom: 0px;
}

.feature-description {
    font-size: 16px;
    color: #6B6B6B;
    max-width: 650px;
    margin-bottom: 8px;
}

/* Image Showcase Containers */
.feature-image-wrapper {
    background-color: #F7F7F5;
    /* Emulates light platform backgrounds */
    /*border-radius: 12px;*/
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #eaeaea;
}

.feature-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive Handling for Mobile & Tablets */
@media (max-width: 991px) {
    .home-features {
        padding: 0px 16px;
    }

    .features-container {
        grid-template-columns: 1fr;
        /* Switch to stacked layout */
        gap: 40px;
    }

    .features-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 20px;
    }

    .sidebar-menu {
        flex-direction: row;
        overflow-x: auto;
        /* Allows horizontal scrolling choice labels on mobile devices */
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .features-content {
        gap: 60px;
    }

    .feature-title {
        font-size: 26px;
        margin-bottom: 0px;
    }

    .features-sidebar {
        display: none;
    }
}

/* ==========================================================================
   BUSINESS IMPACT SECTION (And That's Not All)
   ========================================================================== */
.business-impact-section {
    padding: 70px 0 100px 0;
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.business-impact-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.business-impact-section .section-header {
    text-align: center;
    /*max-width: 800px;*/
    max-width: 100%;
    margin: 0 auto 50px auto;
}

.business-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.business-impact-card {
    background-color: #F8F8F8;
    border-radius: 28px;
    padding: 36px 28px 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 440px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    border: 1px solid #ECECEC;
    box-sizing: border-box;
}

/* Gradient Overlay sitting ON TOP of the image */
.business-impact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(241, 101, 51, 1) 0%, rgba(241, 101, 51, 0.65) 30%, rgba(241, 101, 51, 0.15) 60%, rgba(255, 255, 255, 0) 90%) !important;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
    /* Above image (z-index: 1), below text (z-index: 3) */
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: multiply;
}

.business-impact-card:hover::before {
    opacity: 1;
}

.impact-card-content {
    margin-bottom: 24px;
    position: relative;
    z-index: 3;
}

.impact-card-title {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    line-height: 1.25;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.impact-card-desc {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 1.55;
    margin: 0;
}

.impact-card-media {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: auto;
    min-height: 160px;
    position: relative;
    z-index: 1;
}

.impact-card-media img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    display: block;
    transition: transform 0.35s ease;
    mix-blend-mode: multiply;
}

.business-impact-card:hover .impact-card-media img {
    transform: scale(1.04);
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
    .business-impact-section {
        padding: 55px 0 80px 0;
    }

    .business-impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .business-impact-card {
        min-height: 400px;
        padding: 30px 24px 20px;
    }
}

@media (max-width: 640px) {
    .business-impact-section {
        padding: 40px 0 60px 0;
    }

    .business-impact-container {
        padding: 0 16px;
    }

    .business-impact-section .section-header {
        margin-bottom: 30px;
    }

    .business-impact-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .business-impact-card {
        border-radius: 20px;
        padding: 24px 20px;
        min-height: auto;
    }

    .impact-card-title {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .impact-card-desc {
        font-size: 13.5px;
    }

    .impact-card-media {
        min-height: 130px;
    }
}

/* ==========================================================================
   APP FEATURE SECTION (Wcaller & BizKart)
   ========================================================================== */
.app-feature-section {
    padding: 80px 0 110px 0;
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.app-feature-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.app-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    justify-items: center;
}

.app-feature-column {
    display: flex;
    flex-direction: column;
    max-width: 520px;
}

/* Brand Header (Icon + Name) */
.app-brand-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.app-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.app-brand-name {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    color: #1E2229;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}

/* Card Container with ambient warm bottom gradient */
.app-feature-card {
    background: radial-gradient(circle at 18% 100%, rgba(249, 154, 90, .95) 0%, rgba(249, 154, 90, .45) 22%, rgba(249, 154, 90, .12) 42%, rgba(249, 154, 90, 0) 62%), linear-gradient(180deg, #F7F7F5 0%, #F6F3F1 100%);
    border-radius: 36px;
    padding: 48px 40px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-height: 600px;
}


.app-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.app-card-title {
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    color: #1E2229;
    line-height: 1.25;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
    max-width: 480px;
}

.app-card-desc {
    font-size: 15.5px;
    font-weight: 400;
    color: #555E68;
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 480px;
}

.app-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #FF4000;
    text-decoration: none;
    margin-bottom: 36px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.app-card-link:hover {
    gap: 12px;
    color: #E03800;
}

.app-link-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.app-card-link:hover .app-link-arrow {
    transform: translateX(3px);
}

/* Mobile Mockup (sticks cleanly to the bottom) */
.app-card-mockup {
    width: 100%;
    max-width: 380px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: auto;
}

.app-card-mockup img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    transition: transform 0.4s ease;
}


/* Responsive Media Queries */
@media (max-width: 1024px) {
    .app-feature-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .app-feature-card {
        padding: 40px 28px 0 28px;
        border-radius: 28px;
        min-height: auto;
    }

    .app-brand-header {
        margin-bottom: 20px;
    }

    .app-card-title {
        font-size: 24px;
    }

    .app-card-desc {
        font-size: 14.5px;
    }
}

@media (max-width: 640px) {
    .app-feature-section {
        padding: 50px 0 70px 0;
    }

    .app-feature-container {
        padding: 0 16px;
    }

    .app-feature-card {
        padding: 32px 18px 0 18px;
        border-radius: 24px;
    }

    .app-brand-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .app-brand-name {
        font-size: 28px;
    }

    .app-card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .app-card-desc {
        font-size: 13.5px;
        margin-bottom: 18px;
    }

    .app-card-link {
        font-size: 14.5px;
        margin-bottom: 24px;
    }

    .app-card-mockup {
        max-width: 300px;
    }

    .app-card-mockup img {
        max-height: 280px;
    }
}


/* Scoped CSS - No global styles */
.ai-features-section {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 20px 80px;
}

/* Header Section */
.ai-features-header {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeInDown 0.8s ease-out;
}

.ai-features-header h3 {
    font-size: 46px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.ai-features-header h3 .ai-accent {
    position: relative;
    color: #000000;
}

.ai-features-header h3 .ai-accent::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: url("https://wortal.co/wp-content/uploads/2026/05/Frame.svg") no-repeat center;
    background-size: contain;
    animation: twinkle 2.5s ease-in-out infinite;
}

.ai-features-header p {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Cards Grid */
.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    max-width: 1200px;
    margin-bottom: 100px;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.ai-feature-card {
    background: #202020;
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 400px;
}

/* Gradient Border */
.ai-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: 14px;
    background: linear-gradient(180.05deg,
            #868687 0.04%,
            rgba(240, 240, 242, 0.275962) 82.75%,
            rgba(78, 78, 82, 0) 114.27%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.ai-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -120%;
    width: 60%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .08),
            transparent);
    transform: skewX(-25deg);
    pointer-events: none;
}

/* Hover & Autoplay Effect Trigger */
.ai-feature-card:hover::before,
.ai-feature-card.scroll-hover::before {
    animation: shine .8s linear forwards;
}

@keyframes shine {
    from {
        left: -120%;
    }

    to {
        left: 170%;
    }
}

/* Card Icon */
.ai-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 28px;
    transform: scale(1) rotate(0deg);
    transition: transform .4s ease, border-color .4s ease, background .4s ease;
}

.ai-feature-card:hover .ai-card-icon,
.ai-feature-card.scroll-hover .ai-card-icon {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.1) rotate(5deg);
}

/* Card Content */
.ai-card-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 130%;
    letter-spacing: -3%;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(255, 255, 255, 0) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-card-description {
    font-size: 14px;
    font-weight: 400;
    color: #C7C7C7;
    margin: 0 0 28px 0;
    line-height: 130%;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ai-features-section {
        padding: 50px 20px 60px;
    }

    .ai-features-header {
        margin-bottom: 60px;
    }

    .ai-features-header h3 {
        font-size: 44px;
    }

    .ai-features-header p {
        font-size: 16px;
    }

    .ai-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 80px;
    }

    .ai-feature-card {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .ai-features-section {
        padding: 40px 16px 50px;
    }

    .ai-features-header {
        margin-bottom: 48px;
    }

    .ai-features-header h3 {
        font-size: 36px;
    }

    .ai-features-header h3 .ai-accent::after {
        width: 15px;
        height: 15px;
        right: -5px;
        top: -10px;
    }

    .ai-features-header p {
        font-size: 15px;
    }

    .ai-features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 60px;
    }

    .ai-feature-card {
        padding: 28px;
    }

    .ai-card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .ai-card-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .ai-card-description {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .ai-features-section {
        padding: 50px 0px 40px;
    }

    .ai-features-header {
        margin-bottom: 40px;
    }

    .ai-features-header h3 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .ai-features-header p {
        font-size: 14px;
    }

    .ai-features-grid {
        margin-bottom: 50px;
    }

    .ai-feature-card {
        padding: 24px;
        border-radius: 16px;
    }
}

.ai-feature-card:hover,
.ai-feature-card.scroll-hover {
    transform: translateY(-12px);
    background: #252525;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}


.noise-bg {
    position: relative;
    overflow: hidden;
    /*background: linear-gradient(338.4deg, rgba(255, 241, 232, 0) 23.33%, #FFB27A 47.83%, #FF8A3D 64.85%, #FF6B1A 74%, #FF4D00 86.06%, #FF4000 100.54%);*/

}

.noise-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: #fff;
    opacity: .08;

    filter: url(#wft-grain);

}

.noise-bg .e-con-inner {
    position: relative;
    z-index: 2;
}

.ai-features-container {
    background-image: url(https://wortal.co/wp-content/uploads/2026/06/Group-1261156934.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 20% auto;
    padding: 0 15px;
}

.ai-features {
    background-image: url(https://wortal.co/wp-content/uploads/2026/07/Frame-2055247271-scaled.png);
    background-position: center center;
    background-repeat: no-repeat;
}


/* ─── Reset & Base ─── */
.wi-root * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wi-root {
    font-family: Plus Jakarta Sans, sans-serif;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ─── Scroll container ─── */
.wi-scroll-track {
    position: relative;
    /* 4 sections × 100vh each */
    /*height: 400vh;*/
}

/* ─── Sticky wrapper ─── */
.wi-sticky {
    position: sticky;
    top: 0;
    /*height: 100vh;*/
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* ─── Card shell ─── */
.wi-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    // border-radius: 18px;
    overflow: hidden;
    width: 100%;
    // box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    min-height: 60vh;
}

/* ─── LEFT PANEL ─── */
.wi-left {
    flex: 0 0 50%;
    background: #fafafa;
    border-right: 1.5px solid #e8e8e8;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}


.wi-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(-32deg,
            transparent 0,
            transparent 180px,
            #4A3D40 180px,
            #4A3D40 181px);
    opacity: 0.2;
    pointer-events: none;
}

.wi-illus-slot {
    z-index: 1;
}

.wi-hint {
    z-index: 2;
    display: none;
}

/* Illustration slots — all stacked, toggled by JS */
.wi-illus-slot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 32px 32px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.wi-illus-slot.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wi-industry-label {
    font-size: 40px;
    font-weight: 700;
    color: #FF4000;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-bottom: 20px;
}

.wi-illus-slot img {
    width: 60%;
    height: auto;
    margin: auto;
}

/* ─── RIGHT PANEL ─── */
.wi-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wi-item {
    padding: 22px 30px;
    border-bottom: 1.5px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.wi-item:last-child {
    border-bottom: none;
}

.wi-item:hover {
    background: #fff7f5;
}

/* orange left bar */
.wi-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #FF4000;
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.wi-item.active::before {
    transform: scaleY(1);
}

.wi-item.active {
    background: #fff7f5;
}

.wi-item-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px;
    letter-spacing: -0.1px;
    transition: color 0.25s ease;
}

.wi-item.active .wi-item-title {
    color: #FF4000;
}

.wi-item-desc {
    display: block;
    font-size: 16px;
    color: #6B6B6B;
    line-height: 1.6;
    font-weight: 400;
    margin-top: 6px;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
}

.wi-item.active .wi-item-desc {
    max-height: 120px;
    // opacity: 1;
}

/* ─── Progress dots ─── */
.wi-dots {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s ease, transform 0.3s ease;
}

.wi-dot.active {
    background: #FF4000;
    transform: scale(1.4);
}

/* ─── Scroll hint ─── */
.wi-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: wi-bounce 2s infinite;
    display: none;
}

@keyframes wi-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

.wi-hint img {
    width: 14px;
    height: 14px;
    display: none;
}

/* ─── Mobile ─── */
@media (max-width: 640px) {

    /*.wi-scroll-track { height: 500vh; }*/
    .wi-card {
        flex-direction: column;
        min-height: unset;
    }

    .wi-left {
        flex: none;
        height: 200px;
        border-right: none;
        border-bottom: 1.5px solid #e8e8e8;
    }

    .wi-illus-slot {
        padding: 20px;
    }

    .wi-industry-label {
        font-size: 40px;
    }

    .wi-illus-slot img {
        max-width: 120px;
    }

    .wi-item {
        padding: 16px 20px;
    }

    .wi-dots {
        right: -20px;
    }
}

.who-will-benefit {
    padding-top: 100px;
}

@media (max-width: 768px) {
    .who-will-benefit {
        padding: 20px;
    }
}




/* ============================================================
   BASE WRAPPER
   ============================================================ */
.figma-stat-section {
    --primary-orange: #FF4000;
    --bg-dark: #202020;
    --font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --wtl-scale drives uniform shrink of the whole card (desktop -> tablet).
     Below the mobile breakpoint we stop using it and switch to a
     stacked layout with its own hand-tuned sizes instead — pure
     scaling stops being readable once text drops under ~10px. */
    --wtl-scale: 1;

    width: 100%;
    padding: 60px 20px 120px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.figma-stat-section *,
.figma-stat-section *::before,
.figma-stat-section *::after {
    box-sizing: border-box;
}

.figma-card-container {
    width: 1120px;
    /* fixed design width — --wtl-scale is now the ONLY thing that resizes it */
    flex: none;
    height: 404px;
    background: var(--bg-dark);
    border-radius: 27px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0 80px 45px 80px;
    box-shadow: -6px 6px 19px 0px #00000063,
        -23px 26px 35px 0px #00000057,
        -52px 58px 47px 0px #00000033,
        -145px 161px 61px 0px #00000003;

    transform: scale(var(--wtl-scale));
    transform-origin: top center;
    /* transform doesn't reflow layout, so without this the section would
     keep reserving the full 404px of vertical space even when the card
     visually shrinks. This pulls the empty space back in. */
    margin-bottom: calc(404px * (var(--wtl-scale) - 1));
}

.figma-card-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0.18;
    background: repeating-linear-gradient(90deg, #ffffff, #ffffff 1px, transparent 1px, transparent 7px);
    mask-image: linear-gradient(180deg, black, transparent);
    -webkit-mask-image: linear-gradient(180deg, black, transparent);
    pointer-events: none;
    z-index: 10;
}

/* --- LEFT COLUMN NUMBERS LAYOUT --- */
.figma-left-col {
    flex: 0 0 50%;
    width: 357px;
    height: 314px;
    position: relative;
}

/* --- RIGHT SIDE CONTENT --- */
.figma-right-col {
    flex: 0 0 50%;
    height: 179px;
    position: relative;
    overflow: hidden;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 22px;
}

.scroll-window {
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
}

.top-window {
    height: 107px;
    top: 0px;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 85%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 85%);
}

.mid-window {
    height: 143px;
    top: 64px;
    z-index: 3;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.15) 90%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.15) 90%);
}

.main-window {
    height: 179px;
    top: 135px;
    z-index: 5;
}

.layer-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.track-fade-2 {
    animation: cascadeFade2Down 22s cubic-bezier(0.50, 0.05, 0.15, 1) infinite;
}

.track-fade-1 {
    animation: cascadeFade1Down 22s cubic-bezier(0.62, 0.03, 0.18, 1) infinite;
}

.track-main {
    animation: cascadeMainDown 22s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.content-carousel-track {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 40px;
    top: 0;
    width: 100%;
    animation: cascadeContentDown 22s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.layer-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

.font-f2 {
    height: 107px;
    font-size: 89.79px;
    line-height: 107px;
    opacity: 0.82;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(121, 121, 121, 0.519231) 56.61%, rgba(32, 32, 32, 0.2) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-f1 {
    height: 143px;
    font-size: 120px;
    line-height: 143px;
    background: linear-gradient(180deg, #FFFFFF 26.67%, rgba(121, 121, 121, 0.519231) 56.61%, rgba(32, 32, 32, 0.2) 195%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-main {
    height: 179px;
    font-size: 150px;
    line-height: 179px;
    color: #FF4000;
}

.content-slide {
    height: 160px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: var(--font-family);
}

.slide-title {
    margin: 0 0 6px 0;
    font-size: 39.93px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-orange) !important;
}

.slide-desc {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color: #C0C0C0;
    padding-right: 50px;
}

/* --- DESKTOP KEYFRAMES (unchanged) --- */
/* --- UPDATED DESKTOP KEYFRAMES (5 steps) --- */
@keyframes cascadeFade2Down {

    0%,
    16% {
        transform: translateY(-428px);
    }

    20%,
    36% {
        transform: translateY(-321px);
    }

    40%,
    56% {
        transform: translateY(-214px);
    }

    60%,
    76% {
        transform: translateY(-107px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-428px);
    }
}

@keyframes cascadeFade1Down {

    0%,
    16% {
        transform: translateY(-572px);
    }

    20%,
    36% {
        transform: translateY(-429px);
    }

    40%,
    56% {
        transform: translateY(-286px);
    }

    60%,
    76% {
        transform: translateY(-143px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-572px);
    }
}

@keyframes cascadeMainDown {

    0%,
    16% {
        transform: translateY(-716px);
    }

    20%,
    36% {
        transform: translateY(-537px);
    }

    40%,
    56% {
        transform: translateY(-358px);
    }

    60%,
    76% {
        transform: translateY(-179px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-716px);
    }
}

@keyframes cascadeContentDown {

    0%,
    16% {
        transform: translateY(-640px);
    }

    20%,
    36% {
        transform: translateY(-480px);
    }

    40%,
    56% {
        transform: translateY(-320px);
    }

    60%,
    76% {
        transform: translateY(-160px);
    }

    80%,
    96% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-640px);
    }
}

/* --- UPDATED MOBILE KEYFRAMES (5 steps) --- */
@media (max-width: 576px) {
    @keyframes cascadeFade2Down {

        0%,
        16% {
            transform: translateY(-236px);
        }

        20%,
        36% {
            transform: translateY(-177px);
        }

        40%,
        56% {
            transform: translateY(-118px);
        }

        60%,
        76% {
            transform: translateY(-59px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-236px);
        }
    }

    @keyframes cascadeFade1Down {

        0%,
        16% {
            transform: translateY(-312px);
        }

        20%,
        36% {
            transform: translateY(-234px);
        }

        40%,
        56% {
            transform: translateY(-156px);
        }

        60%,
        76% {
            transform: translateY(-78px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-312px);
        }
    }

    @keyframes cascadeMainDown {

        0%,
        16% {
            transform: translateY(-392px);
        }

        20%,
        36% {
            transform: translateY(-294px);
        }

        40%,
        56% {
            transform: translateY(-196px);
        }

        60%,
        76% {
            transform: translateY(-98px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-392px);
        }
    }

    @keyframes cascadeContentDown {

        0%,
        16% {
            transform: translateY(-528px);
        }

        20%,
        36% {
            transform: translateY(-396px);
        }

        40%,
        56% {
            transform: translateY(-264px);
        }

        60%,
        76% {
            transform: translateY(-132px);
        }

        80%,
        96% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-528px);
        }
    }
}

/* ============================================================
   TABLET / LAPTOP — uniform scale-down, layout untouched
   ============================================================ */
@media (max-width: 1199px) {
    .figma-stat-section {
        --wtl-scale: 0.86;
        padding: 50px 20px;
    }
}

@media (max-width: 991px) {
    .figma-stat-section {
        --wtl-scale: 0.64;
        padding: 40px 20px;
    }
}

@media (max-width: 767px) {
    .figma-stat-section {
        --wtl-scale: 0.50;
        padding: 32px 16px;
    }
}

@media (max-width: 576px) {

    /* Below this, uniform scaling would push slide-desc under ~10px —
     no longer readable, so we stop scaling and switch to a stacked
     layout below instead. */
    .figma-stat-section {
        --wtl-scale: 1;
    }

    /* transform is disabled for this tier, see below */
}

/* ============================================================
   MOBILE (<=576px) — stacked layout, custom sizes
   Left-column numbers keep the same proportions as desktop
   (scale factor ~0.548, i.e. main-window 179px -> 98px) so the
   overlap/fade masking still looks correct — just smaller.
   Content column gets its own readable sizes since it holds
   paragraph text, not just a number.
   ============================================================ */
@media (max-width: 576px) {
    .figma-stat-section {
        overflow: visible;
        align-items: center;
    }

    .figma-card-container {
        width: 100%;
        max-width: 400px;
        height: 400px;
        flex-direction: column;
        align-items: center;
        transform: none;
        margin-bottom: 0;
        padding: 36px 24px 30px;
        box-shadow: -30px 40px 40px rgba(0, 0, 0, 0.25);
    }

    .figma-card-container::before {
        height: 60px;
    }

    .figma-left-col {
        width: 100%;
        height: 172px;
        /* 74px (main-window top) + 98px (main-window height) */
    }

    .slide-desc {
        padding-right: 10px;
    }

    .top-window {
        height: 59px;
        top: 0;
    }

    .mid-window {
        height: 78px;
        top: 35px;
    }

    .main-window {
        height: 98px;
        top: 74px;
    }

    .font-f2 {
        height: 59px;
        font-size: 49px;
        line-height: 59px;
    }

    .font-f1 {
        height: 78px;
        font-size: 66px;
        line-height: 78px;
    }

    .font-main {
        height: 98px;
        font-size: 82px;
        line-height: 98px;
    }

    .figma-right-col {
        width: 100%;
        flex: none;
        height: 132px;
        padding: 0;
        margin-top: 22px;
        justify-content: flex-start;
    }

    .content-carousel-track {
        left: 0;
    }

    .content-slide {
        height: 132px;
        justify-content: flex-start;
    }

    .slide-title {
        font-size: 22px;
    }

    .slide-desc {
        font-size: 14px;
        line-height: 1.4;
    }

    @keyframes cascadeFade2Down {

        0%,
        14% {
            transform: translateY(-295px);
        }

        18%,
        32% {
            transform: translateY(-236px);
        }

        36%,
        50% {
            transform: translateY(-177px);
        }

        54%,
        68% {
            transform: translateY(-118px);
        }

        72%,
        86% {
            transform: translateY(-59px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-295px);
        }
    }

    @keyframes cascadeFade1Down {

        0%,
        14% {
            transform: translateY(-390px);
        }

        18%,
        32% {
            transform: translateY(-312px);
        }

        36%,
        50% {
            transform: translateY(-234px);
        }

        54%,
        68% {
            transform: translateY(-156px);
        }

        72%,
        86% {
            transform: translateY(-78px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-390px);
        }
    }

    @keyframes cascadeMainDown {

        0%,
        14% {
            transform: translateY(-490px);
        }

        18%,
        32% {
            transform: translateY(-392px);
        }

        36%,
        50% {
            transform: translateY(-294px);
        }

        54%,
        68% {
            transform: translateY(-196px);
        }

        72%,
        86% {
            transform: translateY(-98px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-490px);
        }
    }

    @keyframes cascadeContentDown {

        0%,
        14% {
            transform: translateY(-660px);
        }

        18%,
        32% {
            transform: translateY(-528px);
        }

        36%,
        50% {
            transform: translateY(-396px);
        }

        54%,
        68% {
            transform: translateY(-264px);
        }

        72%,
        86% {
            transform: translateY(-132px);
        }

        90%,
        98% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-660px);
        }
    }
}



.integrate-section {
    padding: 100px;

}

@media (max-width: 768px) {
    .integrate-section {
        padding: 0 20px;
    }
}


/* Viewport Wrapper Isolation Layer */
.elm-carousel-viewport {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
    padding: 0px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.elm-carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    padding: 0px 0px 30px 0px;
}

/* 3D Context Scene Canvas */
.elm-cards-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 480px;
    perspective: 2500px;
}

/* Outer Stage: Smooth Premium Positional Translation Vector Coordinates */
.elm-card-stage {
    position: absolute;
    width: 320px;
    height: 440px;
    user-select: none;
    transform-style: preserve-3d;
    will-change: transform, opacity;

    /* 1.3s Quintic Horizontal Glide Timing Profile */
    transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1),
        opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Inner Flipper: Handles 3D Y-Axis Architectural Rotations */
.elm-card-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;

    /* 0.9s Mid-Air Structural Rotation Timing */
    transition: transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Card Sides Surface Specs */
.elm-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #F7C79B 0%, #EEA76E 25%, #D97A3A 60%, #A95A2C 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backface-visibility: hidden;
    /*-webkit-backface-visibility: hidden;*/
    outline: 1px solid transparent;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.elm-card-stage.center .elm-card-face {
    overflow: hidden;
    box-shadow: -6px 6px 19px 0px rgba(0, 0, 0, 0.39),
        -23px 26px 35px 0px rgba(0, 0, 0, 0.34),
        -52px 58px 47px 0px rgba(0, 0, 0, 0.2),
        -145px 161px 61px 0px rgba(0, 0, 0, 0.01);
}

.elm-card-stage.center .elm-card-face::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: .08;
    mix-blend-mode: soft-light;
    z-index: 1;
}

/* FRONT FACE STYLE (Numeric Layout) */
.elm-card-face.front {
    justify-content: center !important;
    align-items: center !important;
    transform: rotateY(0deg) translateZ(2px);
}

.elm-card-id {
    font-size: 9rem;
    font-weight: 900;
    letter-spacing: -5px;
    line-height: 1;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* BACK FACE STYLE (Details Content Layout) */
.elm-card-face.back {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    transform: rotateY(180deg) translateZ(2px);
}

.elm-card-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

.elm-card-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* --- ANTI-OVERLAP ARCHITECTURAL MATRIX LAYER CORES --- */

/* CENTER DECK POSITION */
.elm-card-stage.center {
    transform: translate3d(0, 0, 150px) scale(1);
    opacity: 1;
    z-index: 10;
}

.elm-card-stage.center .elm-card-flipper {
    transform: rotateY(180deg);
}

/* LEFT QUEUE POSITION */
.elm-card-stage.left {
    transform: translate3d(-280px, 0, -50px) scale(0.85);
    opacity: 0.8;
    z-index: 5;
}

.elm-card-stage.left .elm-card-flipper {
    transform: rotateY(0deg);
}

/* RIGHT EXIT POSITION */
.elm-card-stage.right {
    transform: translate3d(280px, 0, -50px) scale(0.85);
    opacity: 0.8;
    z-index: 4;
    /* Fixed layout index depth overlap clash */
    transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1), z-index 1.3s step-start;
}

.elm-card-stage.right .elm-card-flipper {
    transform: rotateY(0deg);
    /* Left card showing 02 numeric means Right card should show 05 numeric layout */
}

/* HIDDEN CACHE STACK */
.elm-card-stage.hidden {
    transform: translate3d(0, 0, -250px) scale(0.6);
    opacity: 0;
    z-index: 0;
    transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1), z-index 1.3s step-end;
}

.elm-card-stage.hidden .elm-card-flipper {
    transform: rotateY(0deg);
}

/* Progression Indicators */
.elm-indicators {
    display: flex;
    gap: 12px;
    margin-top: 55px;
}

.elm-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.elm-dot.active {
    background-color: #e29053;
    transform: scale(1.4);
    box-shadow: 0 0 15px rgba(226, 144, 83, 0.6);
}

/* FRONT FACE STYLE (Numeric Layout) */
.elm-card-face.front {
    justify-content: space-between !important;
    /* Force top-to-bottom separation */
    align-items: flex-start !important;
    /* Align items to the left edge */
    transform: rotateY(0deg) translateZ(2px);
}

/* BACK FACE STYLE (Details Content Layout) */
.elm-card-face.back {
    justify-content: space-between !important;
    /* Forces items to separate to edges */
    align-items: flex-start !important;
    transform: rotateY(180deg) translateZ(2px);
}


.form-lead {
    z-index: 9;
}

.form-lead {
    border: 2px solid transparent;
    background: linear-gradient(#333333, #333333) padding-box, linear-gradient(180deg, #FFA473 0%, #FF4000 100%) border-box;
    border-radius: 24px;
}

.ads-template-f .solution-hero-container {
    margin: unset;
    width: 70%;
}

.ads-template-f .solution-hero-container .solution-hero-content {
    align-items: start;
    text-align: start;
}

.ads-template-f .solution-hero-container .solution-hero-desc {
    margin: unset;
}


@media (max-width: 768px) {
    .ads-template-f .solution-hero-section {
        flex-direction: column;
        gap: 24px;
    }

    .ads-template-f .solution-hero-container {

        width: 90%;
    }

    .ads-template-f .solution-hero-container .solution-hero-content {
        align-items: center;
        text-align: center;
    }
}


.ads-template-f .ai-features-grid {
    grid-template-columns: repeat(2, 1fr);
}