/* ============================================================
   YAIDEL HOME — PLATFORM

   Global Design System:
   main.css

   Design Direction:
   - Very subtle cool blue/cyan section atmosphere
   - Yaidel teal + dark remain the central brand identity
   - Connected ERP modules use semantic colors
   - Sales       = Green
   - Stock       = Blue
   - Purchases   = Amber
   - Finance     = Purple
============================================================ */


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

.yaidel-platform-section {
    position: relative;

    width: 100%;

    padding:
        120px
        24px;

    overflow: hidden;

    color:
        var(--yaidel-dark);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fcfd 35%,
            #f5fafc 70%,
            #f4f9fb 100%
        );
}


/* ============================================================
   BACKGROUND ATMOSPHERE
============================================================ */

.yaidel-platform-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -370px;
    right: -290px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .055) 0%,
            rgba(37, 99, 235, .018) 42%,
            rgba(37, 99, 235, 0) 72%
        );

    pointer-events: none;
}


.yaidel-platform-section::after {
    content: "";

    position: absolute;

    width: 540px;
    height: 540px;

    left: -300px;
    bottom: -320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24, 197, 203, .055) 0%,
            rgba(24, 197, 203, .018) 40%,
            rgba(24, 197, 203, 0) 72%
        );

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.yaidel-platform-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1220px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 90px;
}


/* ============================================================
   CONTENT
============================================================ */

.yaidel-platform-content {
    width: 100%;
    max-width: 600px;
}


/* ============================================================
   EYEBROW
============================================================ */

.yaidel-platform-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    padding:
        7px
        13px
        7px
        8px;

    border:
        1px solid
        rgba(24, 197, 203, .17);

    border-radius: 999px;

    background:
        rgba(24, 197, 203, .05);

    color:
        #177f83;

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .045em;

    text-transform: uppercase;
}


/* ============================================================
   EYEBROW ICON
============================================================ */

.yaidel-platform-eyebrow > span {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--yaidel-primary);

    color:
        var(--yaidel-white);

    font-size: 10px;

    box-shadow:
        0 5px 12px
        rgba(24, 197, 203, .14);
}


/* ============================================================
   TITLE
============================================================ */

.yaidel-platform-title {
    max-width: 600px;

    margin: 0;

    color:
        var(--yaidel-dark);

    font-size:
        clamp(
            40px,
            4vw,
            56px
        );

    line-height: 1.07;

    font-weight: 400;

    letter-spacing: -.045em;
}


/* ============================================================
   TITLE ACCENT
============================================================ */

.yaidel-platform-title span {
    display: block;

    margin-top: 3px;

    background:
        linear-gradient(
            100deg,
            var(--yaidel-primary) 0%,
            var(--yaidel-accent) 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.yaidel-platform-description {
    max-width: 590px;

    margin:
        26px
        0
        0;

    color:
        var(--yaidel-muted);

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;
}


/* ============================================================
   POINTS
============================================================ */

.yaidel-platform-points {
    margin-top: 38px;

    display: flex;

    flex-direction: column;

    gap: 0;
}


/* ============================================================
   POINT
============================================================ */

.yaidel-platform-point {
    position: relative;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr);

    gap: 15px;

    padding:
        19px
        0;

    border-bottom:
        1px solid
        rgba(32, 32, 32, .09);
}


.yaidel-platform-point:first-child {
    border-top:
        1px solid
        rgba(32, 32, 32, .09);
}


/* ============================================================
   POINT CHECK — BASE
============================================================ */

.yaidel-platform-check {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 10px;
}


/* ============================================================
   POINT 01 — YAIDEL
============================================================ */

.yaidel-platform-point:nth-child(1)
.yaidel-platform-check {
    background:
        rgba(24, 197, 203, .09);

    color:
        var(--yaidel-primary);
}


/* ============================================================
   POINT 02 — BLUE
============================================================ */

.yaidel-platform-point:nth-child(2)
.yaidel-platform-check {
    background:
        var(--yaidel-inventory-soft);

    color:
        var(--yaidel-inventory);
}


/* ============================================================
   POINT 03 — INDIGO
============================================================ */

.yaidel-platform-point:nth-child(3)
.yaidel-platform-check {
    background:
        var(--yaidel-reports-soft);

    color:
        var(--yaidel-reports);
}


/* ============================================================
   POINT 04 — GREEN
============================================================ */

.yaidel-platform-point:nth-child(4)
.yaidel-platform-check {
    background:
        var(--yaidel-sales-soft);

    color:
        var(--yaidel-sales);
}


/* ============================================================
   POINT TITLE
============================================================ */

.yaidel-platform-point h3 {
    margin:
        0
        0
        6px;

    color:
        var(--yaidel-dark);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   POINT DESCRIPTION
============================================================ */

.yaidel-platform-point p {
    margin: 0;

    color:
        var(--yaidel-muted);

    font-size: 13px;

    line-height: 1.65;
}


/* ============================================================
   LINK
============================================================ */

.yaidel-platform-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    color:
        var(--yaidel-dark);

    text-decoration: none;

    font-size: 13px;

    font-weight: 550;
}


/* ============================================================
   LINK ICON
============================================================ */

.yaidel-platform-link span {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--yaidel-dark);

    color:
        var(--yaidel-white);

    font-size: 10px;

    transition:
        transform var(--yaidel-transition),
        background-color var(--yaidel-transition),
        box-shadow var(--yaidel-transition);
}


/* ============================================================
   LINK HOVER
============================================================ */

.yaidel-platform-link:hover span {
    transform:
        translateX(3px);

    background:
        var(--yaidel-primary);

    box-shadow:
        0 6px 14px
        rgba(24, 197, 203, .16);
}


/* ============================================================
   VISUAL
============================================================ */

.yaidel-platform-visual {
    position: relative;

    width: 100%;
}


/* ============================================================
   VISUAL BACKDROP
============================================================ */

.yaidel-platform-visual::before {
    content: "";

    position: absolute;

    width: 88%;
    height: 88%;

    top: 6%;
    right: -5%;

    z-index: -1;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 197, 203, .04),
            rgba(37, 99, 235, .035),
            rgba(79, 70, 229, .025)
        );

    transform:
        rotate(2deg);
}


/* ============================================================
   VISUAL SHELL
============================================================ */

.yaidel-platform-visual-shell {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(51, 65, 85, .10);

    border-radius:
        var(--yaidel-radius-xl);

    background:
        var(--yaidel-white);

    box-shadow:
        0 30px 70px
        rgba(31, 52, 59, .09),
        0 8px 22px
        rgba(37, 99, 235, .025);
}


/* ============================================================
   SHELL TOP ACCENT
============================================================ */

.yaidel-platform-visual-shell::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 5;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--yaidel-primary) 0%,
            var(--yaidel-inventory) 35%,
            var(--yaidel-reports) 68%,
            var(--yaidel-purchasing) 100%
        );

    opacity: .75;
}


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

.yaidel-platform-visual-header {
    min-height: 78px;

    padding:
        0
        24px;

    display: flex;

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

    gap: 15px;

    border-bottom:
        1px solid
        #e8ecee;

    background:
        rgba(255, 255, 255, .98);
}


/* ============================================================
   VISUAL BRAND
============================================================ */

.yaidel-platform-visual-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}


/* ============================================================
   BRAND MARK
============================================================ */

.yaidel-platform-brand-mark {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius:
        var(--yaidel-radius-md);

    background:
        var(--yaidel-dark);

    color:
        var(--yaidel-primary);

    font-size: 18px;

    font-weight: 600;

    box-shadow:
        0 6px 14px
        rgba(32, 32, 32, .09);
}


/* ============================================================
   BRAND TEXT
============================================================ */

.yaidel-platform-visual-brand div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.yaidel-platform-visual-brand strong {
    color:
        var(--yaidel-dark);

    font-size: 13px;

    font-weight: 600;
}


.yaidel-platform-visual-brand small {
    color:
        #8b9194;

    font-size: 10px;
}


/* ============================================================
   STATUS
============================================================ */

.yaidel-platform-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(22, 163, 74, .10);

    border-radius: 999px;

    background:
        var(--yaidel-success-soft);

    color:
        var(--yaidel-success);

    font-size: 9px;

    font-weight: 600;
}


.yaidel-platform-status i {
    color:
        var(--yaidel-success);

    font-size: 6px;
}


/* ============================================================
   PLATFORM MAP
============================================================ */

.yaidel-platform-map {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(24, 197, 203, .055) 0%,
            rgba(37, 99, 235, .018) 28%,
            #ffffff 52%,
            #fafcfd 100%
        );
}


/* ============================================================
   PLATFORM GRID
============================================================ */

.yaidel-platform-map::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .48;

    background-image:
        linear-gradient(
            rgba(51, 65, 85, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(51, 65, 85, .07) 1px,
            transparent 1px
        );

    background-size:
        38px
        38px;

    mask-image:
        radial-gradient(
            circle,
            #000 15%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            #000 15%,
            transparent 72%
        );
}


/* ============================================================
   CORE HALO
============================================================ */

.yaidel-platform-map::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: 50%;
    left: 50%;

    z-index: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(24, 197, 203, .08);

    box-shadow:
        0 0 0 35px
        rgba(24, 197, 203, .018),
        0 0 0 70px
        rgba(37, 99, 235, .012);

    pointer-events: none;
}


/* ============================================================
   CORE
============================================================ */

.yaidel-platform-core {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 4;

    width: 150px;
    height: 150px;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(24, 197, 203, .17);

    border-radius: 50%;

    background:
        var(--yaidel-white);

    box-shadow:
        0 20px 50px
        rgba(31, 52, 59, .09),
        0 0 0 8px
        rgba(24, 197, 203, .025);
}


/* ============================================================
   CORE LOGO
============================================================ */

.yaidel-platform-core-logo {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius:
        var(--yaidel-radius-md);

    background:
        rgba(24, 197, 203, .09);

    color:
        var(--yaidel-primary);

    font-size: 15px;

    box-shadow:
        inset 0 0 0 1px
        rgba(24, 197, 203, .07);
}


/* ============================================================
   CORE TEXT
============================================================ */

.yaidel-platform-core strong {
    color:
        var(--yaidel-dark);

    font-size: 16px;

    font-weight: 600;
}


.yaidel-platform-core > span {
    margin-top: 3px;

    color:
        #8b9194;

    font-size: 10px;
}


/* ============================================================
   MODULE — BASE
============================================================ */

.yaidel-platform-module {
    position: absolute;

    z-index: 3;

    min-width: 165px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 11px;

    overflow: hidden;

    border:
        1px solid
        #e1e6e8;

    border-radius:
        var(--yaidel-radius-md);

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

    box-shadow:
        0 12px 30px
        rgba(31, 52, 59, .05);

    transition:
        transform var(--yaidel-transition),
        border-color var(--yaidel-transition),
        box-shadow var(--yaidel-transition);
}


/* ============================================================
   MODULE TOP ACCENT
============================================================ */

.yaidel-platform-module::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    opacity: .7;
}


/* ============================================================
   MODULE ICON — BASE
============================================================ */

.yaidel-platform-module > span {
    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius:
        var(--yaidel-radius-sm);

    font-size: 12px;
}


/* ============================================================
   MODULE TEXT
============================================================ */

.yaidel-platform-module div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.yaidel-platform-module strong {
    color:
        #303537;

    font-size: 12px;

    font-weight: 600;
}


.yaidel-platform-module small {
    color:
        #92989a;

    font-size: 9px;
}


/* ============================================================
   SALES MODULE — GREEN
============================================================ */

.module-sales {
    top: 70px;
    left: 42px;
}


.module-sales::before {
    background:
        var(--yaidel-sales);
}


.module-sales > span {
    background:
        var(--yaidel-sales-soft);

    color:
        var(--yaidel-sales);
}


.module-sales:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(22, 163, 74, .20);

    box-shadow:
        0 16px 34px
        rgba(22, 163, 74, .065);
}


/* ============================================================
   STOCK MODULE — BLUE
============================================================ */

.module-stock {
    top: 70px;
    right: 42px;
}


.module-stock::before {
    background:
        var(--yaidel-inventory);
}


.module-stock > span {
    background:
        var(--yaidel-inventory-soft);

    color:
        var(--yaidel-inventory);
}


.module-stock:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(37, 99, 235, .20);

    box-shadow:
        0 16px 34px
        rgba(37, 99, 235, .065);
}


/* ============================================================
   PURCHASES MODULE — AMBER
============================================================ */

.module-purchases {
    bottom: 70px;
    left: 42px;
}


.module-purchases::before {
    background:
        var(--yaidel-purchasing);
}


.module-purchases > span {
    background:
        var(--yaidel-purchasing-soft);

    color:
        var(--yaidel-purchasing);
}


.module-purchases:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(245, 158, 11, .22);

    box-shadow:
        0 16px 34px
        rgba(245, 158, 11, .065);
}


/* ============================================================
   FINANCE MODULE — PURPLE
============================================================ */

.module-finance {
    right: 42px;
    bottom: 70px;
}


.module-finance::before {
    background:
        var(--yaidel-invoices);
}


.module-finance > span {
    background:
        var(--yaidel-invoices-soft);

    color:
        var(--yaidel-invoices);
}


.module-finance:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(124, 58, 237, .20);

    box-shadow:
        0 16px 34px
        rgba(124, 58, 237, .065);
}


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

.yaidel-platform-visual-footer {
    min-height: 58px;

    padding:
        0
        24px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-top:
        1px solid
        #e8ecee;

    background:
        var(--yaidel-white);

    color:
        #858c8f;

    font-size: 11px;
}


.yaidel-platform-visual-footer span {
    display: flex;

    align-items: center;

    gap: 8px;
}


.yaidel-platform-visual-footer i {
    color:
        var(--yaidel-primary);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .yaidel-platform-section {
        padding:
            95px
            24px;
    }


    .yaidel-platform-container {
        max-width: 760px;

        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .yaidel-platform-content {
        max-width: 680px;

        margin:
            0
            auto;

        text-align: center;
    }


    .yaidel-platform-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .yaidel-platform-title {
        max-width: 650px;

        margin:
            0
            auto;
    }


    .yaidel-platform-description {
        margin-left: auto;
        margin-right: auto;
    }


    .yaidel-platform-points {
        max-width: 580px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    .yaidel-platform-link {
        justify-content: center;
    }


    .yaidel-platform-visual {
        max-width: 700px;

        margin:
            0
            auto;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .yaidel-platform-section {
        padding:
            76px
            16px;

        background:
            linear-gradient(
                155deg,
                #ffffff 0%,
                #f7fbfc 100%
            );
    }


    .yaidel-platform-section::before {
        width: 400px;
        height: 400px;

        top: -250px;
        right: -230px;
    }


    .yaidel-platform-section::after {
        display: none;
    }


    /* --------------------------------------------------------
       CONTENT
    -------------------------------------------------------- */

    .yaidel-platform-content {
        text-align: left;
    }


    /* --------------------------------------------------------
       EYEBROW
    -------------------------------------------------------- */

    .yaidel-platform-eyebrow {
        margin-left: 0;
        margin-right: 0;

        margin-bottom: 18px;

        padding:
            6px
            12px
            6px
            6px;

        font-size: 9px;
    }


    .yaidel-platform-eyebrow > span {
        width: 26px;
        height: 26px;

        font-size: 9px;
    }


    /* --------------------------------------------------------
       TITLE
    -------------------------------------------------------- */

    .yaidel-platform-title {
        margin: 0;

        font-size: 35px;

        line-height: 1.08;

        letter-spacing: -.035em;
    }


    /* --------------------------------------------------------
       DESCRIPTION
    -------------------------------------------------------- */

    .yaidel-platform-description {
        margin:
            20px
            0
            0;

        font-size: 15px;

        line-height: 1.7;
    }


    /* --------------------------------------------------------
       POINTS
    -------------------------------------------------------- */

    .yaidel-platform-points {
        margin:
            30px
            0
            0;
    }


    .yaidel-platform-point {
        padding:
            16px
            0;
    }


    /* --------------------------------------------------------
       LINK
    -------------------------------------------------------- */

    .yaidel-platform-link {
        justify-content: flex-start;
    }


    /* --------------------------------------------------------
       VISUAL
    -------------------------------------------------------- */

    .yaidel-platform-visual::before {
        display: none;
    }


    .yaidel-platform-visual-shell {
        border-radius:
            var(--yaidel-radius-lg);

        box-shadow:
            0 20px 45px
            rgba(31, 52, 59, .07);
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .yaidel-platform-visual-header {
        min-height: 68px;

        padding:
            0
            16px;
    }


    .yaidel-platform-brand-mark {
        width: 34px;
        height: 34px;

        font-size: 15px;
    }


    /* --------------------------------------------------------
       MAP
    -------------------------------------------------------- */

    .yaidel-platform-map {
        min-height: 460px;
    }


    /* --------------------------------------------------------
       CORE
    -------------------------------------------------------- */

    .yaidel-platform-core {
        width: 125px;
        height: 125px;
    }


    .yaidel-platform-core-logo {
        width: 38px;
        height: 38px;
    }


    .yaidel-platform-core strong {
        font-size: 14px;
    }


    /* --------------------------------------------------------
       MODULES
    -------------------------------------------------------- */

    .yaidel-platform-module {
        min-width: 135px;

        padding: 11px;

        gap: 9px;
    }


    .yaidel-platform-module > span {
        width: 32px;
        height: 32px;

        font-size: 10px;
    }


    .module-sales,
    .module-purchases {
        left: 15px;
    }


    .module-stock,
    .module-finance {
        right: 15px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .yaidel-platform-section {
        padding-left: 14px;
        padding-right: 14px;
    }


    .yaidel-platform-title {
        font-size: 32px;
    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .yaidel-platform-visual-header {
        padding:
            0
            13px;
    }


    .yaidel-platform-status {
        padding:
            5px
            7px;

        font-size: 7px;
    }


    /* --------------------------------------------------------
       MAP
    -------------------------------------------------------- */

    .yaidel-platform-map {
        min-height: 420px;
    }


    /* --------------------------------------------------------
       MODULES
    -------------------------------------------------------- */

    .yaidel-platform-module {
        min-width: 120px;

        padding: 9px;
    }


    .yaidel-platform-module > span {
        width: 29px;
        height: 29px;
    }


    .yaidel-platform-module strong {
        font-size: 10px;
    }


    .yaidel-platform-module small {
        font-size: 8px;
    }


    .module-sales,
    .module-purchases {
        left: 8px;
    }


    .module-stock,
    .module-finance {
        right: 8px;
    }


    .module-sales,
    .module-stock {
        top: 55px;
    }


    .module-purchases,
    .module-finance {
        bottom: 55px;
    }


    /* --------------------------------------------------------
       CORE
    -------------------------------------------------------- */

    .yaidel-platform-core {
        width: 112px;
        height: 112px;
    }


    .yaidel-platform-core-logo {
        width: 34px;
        height: 34px;

        margin-bottom: 7px;
    }


    .yaidel-platform-core strong {
        font-size: 13px;
    }


    .yaidel-platform-core > span {
        font-size: 8px;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .yaidel-platform-visual-footer {
        min-height: 52px;

        padding:
            0
            14px;

        font-size: 9px;

        text-align: center;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .yaidel-platform-module,
    .yaidel-platform-link span {
        transition: none;
    }


    .yaidel-platform-module:hover,
    .yaidel-platform-link:hover span {
        transform: none;
    }

}