/*==========================================================
    HERO RIGHT
==========================================================*/

.hero-right{
    flex:0 0 45%;
    display:flex;
    justify-content:flex-end;
    align-items:stretch;
    min-width:0;
    position:relative;
    padding-top:35px;
}


/*==========================================================
    TLOAD PANEL
==========================================================*/

.tload-panel{

    width:100%;
    min-height:720px;
    height:auto;

    position:relative;

    display:flex;
    flex-direction:column;

    padding:45px;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(18,32,54,.48),
            rgba(9,20,38,.55)
        );

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.10);

    box-shadow:
        0 25px 60px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.08);

}

.tload-panel::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(37,99,235,.16),
            transparent 42%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,122,0,.08),
            transparent 60%
        );

    pointer-events:none;

}


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

.tload-header{

    text-align:center;

    margin-bottom:14px;

}

.workflow-tag{

    display:inline-flex;

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

    padding:8px 20px;

    border-radius:999px;

    background:rgba(255,122,0,.12);

    border:1px solid rgba(255,122,0,.30);

    color:#ff7a00;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.tload-header h2{

    margin:16px 0 10px;

    color:#fff;

    font-size:2rem;

    font-weight:700;

    line-height:1.15;

}

.tload-header p{

    width:90%;

    margin:0 auto;

    color:#8fa7c3;

    line-height:1.55;

    font-size:.95rem;

}

.tload-main{

    display:grid;

    grid-template-columns:58% 42%;

    gap:24px;

    align-items:center;

    margin:28px 0;

}

/* Left Side */

.tload-image{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

/* Right Side */

.tload-features{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/*==========================================================
DEVICE ROW
==========================================================*/

.device-row{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:10px;

    margin-top:16px;

}


/*==========================================================
DEVICE CARD
==========================================================*/

.device-card{

    display:flex;
    flex-direction:column;

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

    border:1px solid rgba(255,255,255,.06);

    border-radius:16px;

    overflow:hidden;

    transition:.3s ease;

}

.device-card:hover{

    transform:translateY(-5px);

    border-color:#ff7a00;

    box-shadow:0 10px 25px rgba(255,122,0,.15);

}

.device-card img{

    width:100%;

    height:72px;

    display:block;

    object-fit:cover;

    background:#1b2a44;   /* placeholder until images exist */

}

.device-card h4{

    margin:12px 8px 4px;

    text-align:center;

    color:#fff;

    font-size:.82rem;

    font-weight:600;

    line-height:1.3;

}

.device-card span{

    margin:0 8px 12px;

    text-align:center;

    color:#8ea5bf;

    font-size:.68rem;

    line-height:1.35;

}



/*==========================================================
HMI
==========================================================*/

.tload-image{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.tload-brand img{

    width:80px;     
    height:auto;

    display:block;
    margin:0 auto 12px;

}

.tload-image::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(
        rgba(47,140,255,.25),
        transparent
    );

    filter:blur(20px);

}

.tload-image img{

    position:relative;

    max-width:95%;

    max-height:300px;

    object-fit:contain;

    z-index:2;

}


/*==========================================================
FEATURES
==========================================================*/

.tload-features{

    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:repeat(4,1fr);

    gap:10px;

    height:100%;

}

.feature-card{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

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

    border:1px solid rgba(255,255,255,.06);

    border-radius:14px;

    min-height:72px;

    transition:.3s;

}

.feature-card:hover{

    transform:translateX(6px);

    border-color:#2f8cff;

    box-shadow:0 12px 28px rgba(47,140,255,.15);

}

.feature-card img{

    width:70px;

    height:70px;

    padding:8px;

    border-radius:12px;

    background:rgba(37,99,235,.15);

}

.feature-card span{

    color:white;

    font-size:.88rem;

    line-height:1.4;

}

/*==========================================================
POSTING FLOW
==========================================================*/

.posting-flow{

    position:relative;

    width:100%;

    height:40px;

    display:flex;

    justify-content:center;

}

.posting-line{

    width:2px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #ff7a00,
        rgba(255,122,0,.15)
    );

    position:relative;

}

.posting-line::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:50%;

    transform:translateX(-50%);

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff7a00;

    box-shadow:
        0 0 14px rgba(255,122,0,.75);

}


/*==========================================================
POSTING BAR
==========================================================*/

.posting-section{

    margin-bottom:22px;

}

.posting-bar{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:16px 20px;

    border-radius:18px;

    background:linear-gradient(
        90deg,
        rgba(255,122,0,.08),
        rgba(255,122,0,.16)
    );

    border:1px solid rgba(255,122,0,.25);

    position:relative;

    overflow:hidden;

}

.posting-bar img{

    width:22px;

    height:22px;

}

.posting-bar span{

    color:white;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.3px;

}

.posting-bar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform:translateX(-100%);

}


/*==========================================================
ERP ROW
==========================================================*/

.erp-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.erp-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:20px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.06);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.erp-card:hover{

    transform:translateY(-4px);

    border-color:rgba(47,140,255,.35);

}

.erp-card img{

    max-height:42px;

    width:auto;

    object-fit:contain;

}

.erp-card span{

    color:#b7c8db;

    font-size:.82rem;

    text-align:center;

}

.erp-placeholder{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #2563eb,
        #0f2a4a
    );

    color:white;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.5px;

}


/*==========================================================
DIVIDERS
==========================================================*/

.tload-header{

    padding-bottom:20px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.posting-section{

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.05);

}

/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes flowPulse{

    0%{
        background-position:-300px;
    }

    100%{
        background-position:300px;
    }

}

@keyframes pulseNode{

    0%,100%{
        transform:translateX(-50%) scale(1);
        box-shadow:0 0 12px rgba(255,122,0,.4);
    }

    50%{
        transform:translateX(-50%) scale(1.3);
        box-shadow:0 0 24px rgba(255,122,0,.9);
    }

}

@keyframes breathe{

    0%,100%{
        opacity:.35;
        transform:scale(.95);
    }

    50%{
        opacity:.85;
        transform:scale(1.05);
    }

}

@keyframes float{

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

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

}

@keyframes shimmer{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(16px);
    }

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

}

/*==========================================================
FLOW
==========================================================*/

.flow-line{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,122,0,.2),
        #ff7a00,
        rgba(255,122,0,.2),
        transparent
    );

    background-size:300px 100%;

    animation:flowPulse 2.5s linear infinite;

}

.flow-node{

    animation:pulseNode 2s infinite;

}

.posting-line{

    background:linear-gradient(
        to bottom,
        #ff7a00,
        rgba(255,122,0,.15)
    );

}

/*==========================================================
DEVICE CARDS
==========================================================*/

.device-card{

    animation:float 6s ease-in-out infinite;

}

.device-card:nth-child(2){

    animation-delay:.4s;

}

.device-card:nth-child(3){

    animation-delay:.8s;

}

.device-card:nth-child(4){

    animation-delay:1.2s;

}

/*==========================================================
HMI
==========================================================*/

.tload-image::before{

    animation:breathe 4s ease-in-out infinite;

}

.tload-image img{

    transition:
        transform .35s ease,
        filter .35s ease;
            max-width:90%;
    max-height:420px;

}

.tload-image:hover img{

    transform:scale(1.04);

    filter:
        brightness(1.05)
        drop-shadow(0 15px 30px rgba(47,140,255,.35));

}

/*==========================================================
FEATURES
==========================================================*/

.feature-card{

    animation:fadeUp .6s ease forwards;

    opacity:0;

}

.feature-card:nth-child(1){

    animation-delay:.2s;

}

.feature-card:nth-child(2){

    animation-delay:.35s;

}

.feature-card:nth-child(3){

    animation-delay:.5s;

}

.feature-card:nth-child(4){

    animation-delay:.65s;

}

.feature-card:hover{

    transform:translateX(6px);

    box-shadow:0 12px 24px rgba(255,122,0,.08);

}

/*==========================================================
POSTING BAR
==========================================================*/

.posting-bar::before{

    animation:shimmer 3.5s linear infinite;

}

/*==========================================================
ERP
==========================================================*/

.erp-card{

    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s;

}

.erp-card:hover{

    box-shadow:0 15px 30px rgba(37,99,235,.12);

}