/*==========================================================
    ABS WEBSITE
    Main Stylesheet
    Version 2.0
==========================================================*/


/*==========================================================
RESET
==========================================================*/

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

html{

    scroll-behavior:smooth;

    font-size:16px;

}

body{

    font-family:var(--font-primary);

    background:#07131F;

    color:#FFFFFF;

    overflow-x:hidden;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}

ul{

    list-style:none;

}


/*==========================================================
GLOBAL
==========================================================*/

.container{
    max-width:1750px;
    width:96%;
    margin:0 auto;
}

section{
    position:relative;
    padding:120px 0;
}

h1{

    font-size:clamp(58px,5vw,88px);

    font-weight:800;

    line-height:.95;

    letter-spacing:-2px;

}

h2{

    font-size:48px;

    font-weight:700;

}

h3{

    font-size:28px;

    font-weight:700;

}

p{

    font-size:18px;

    color:#D7DFEA;

}


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

.site-header{

    position:absolute;
    top:30px;
    left:0;
    width:100%;
    z-index:999;

}

.header-inner{
    width:min(1700px,96%);
    height:88px;

    margin:28px auto 0;

    display:grid;
    grid-template-columns:360px 1fr 260px;

    align-items:center;

    padding:0 28px;

    border-radius:26px;

    background:rgba(8,18,34,.55);

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

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

    transition:.35s ease;
}

.site-header.scrolled .header-inner{

    background:rgba(6,15,27,.88);

    border-color:rgba(255,255,255,.06);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}


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

.header-branding{
    justify-self:start;
}

.brand-link{
    display:flex;
    align-items:center;
}

.brand-logo{
    width:300px;
    height:auto;
    display:block;
}

/*==========================================================
NAVIGATION
==========================================================*/

.site-nav{
    justify-self:center;

    display:flex;
    align-items:center;

    gap:56px;
}

.site-nav__link{

    position:relative;

    font-size:17px;

    font-weight:500;

    color:#ffffff;

    transition:.3s;

}

.site-nav__link:hover{

    color:#FF7A00;

}

.site-nav__link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    background:#FF7A00;

    transform:translateX(-50%);

    transition:.35s;

}

.site-nav__link:hover::after{

    width:100%;

}

/*==========================================================
Right Side
0==========================================================*/
.header-actions{
    justify-self:end;

    display:flex;
    align-items:center;

    gap:18px;
}

/*==========================================================
Request a Demo Button
==========================================================*/
.header-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:46px;
    padding:0 22px;

    white-space:nowrap;

    border-radius:12px;

    font-size:16px;
    font-weight:600;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);

    color:#fff;
}
  

.header-cta:hover{
    background:#ff7a00;
    border-color:#ff7a00;
}

/*==========================================================
SAP LOGO
==========================================================*/

.partner-logo{

    height:64px;

}

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

.hero-section{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}

/* Background */

.hero-background{

    position:absolute;
    inset:0;

    background:url("../assets/images/hero/refinery.jpg") center center/cover no-repeat;

    filter:
        brightness(1.25)
        contrast(1.08)
        saturate(1.05);

    z-index:0;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,18,36,.40) 0%,
            rgba(8,18,36,.28) 45%,
            rgba(8,18,36,.18) 100%
        );

    z-index:1;

}

.hero-vignette{
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at left,
        rgba(0,0,0,.18),
        transparent 60%);

    z-index:2;
}

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    opacity:.25;
    z-index:1;
}

.hero-glow-left{
    width:700px;
    height:700px;
    background:#1b63ff;
    top:-180px;
    left:-220px;
}

.hero-glow-right{
    width:550px;
    height:550px;
    background:#ff7a00;
    right:-180px;
    bottom:-120px;
}

/* ==========================================
   HERO LAYOUT
========================================== */

.hero-container{

    position: relative;
    z-index: 5;

    width: min(1700px, 94%);
    height: 100%;

    margin: 0 auto;

    display: grid;

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

    gap: 70px;

    align-items: start;   /* <-- change this */

    padding-top: 40px;    /* was 60px */
}
/* ==========================================
   LEFT CONTENT
========================================== */

.hero-left{

    width:100%;
    max-width:720px;
    padding-top:60px;
}

/* Eyebrow */

.hero-eyebrow{

    font-size:18px;

    font-weight:900;

    letter-spacing:1px;

    line-height:1.6;

    text-transform:uppercase;

    color:#ff7a00;

    margin-bottom:45px;

}

/* Title */

.hero-left h1{

    color:#fff;

    font-size:clamp(72px,5vw,88px);

    font-weight:800;

    line-height:.95;

    letter-spacing:-3px;

    margin:0 0 34px;
}

.hero-left h1 span{

    color:#3e82ff;
}

/* Description */

.hero-description{

    max-width:660px;

    color:rgba(255,255,255,.88);

    font-size:24px;

    line-height:1.75;

    margin-bottom:45px;
}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:22px;

    align-items:center;
}

.hero-buttons a{

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.btn-primary{

    padding:18px 42px;

    border-radius:60px;

    background:#ff7a00;

    color:#fff;
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(255,122,0,.35);
}

.btn-secondary{

    padding:18px 42px;

    border-radius:60px;

    color:#fff;

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

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

    backdrop-filter:blur(12px);
}

.btn-secondary:hover{

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

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


.hero-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    min-width:0;

}

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

.solutions-section{

    position:relative;

    padding:100px 0;

    background:
        linear-gradient(
            180deg,
            #08111f 0%,
            #091426 55%,
            #08111f 100%
        );

    overflow:hidden;

}

.solutions-container{

    width:min(1700px,92%);

    margin:0 auto;

}


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

.section-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    margin-bottom:22px;

    border-radius:999px;

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

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

    color:#ff7a00;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-header h2{

    margin:0 0 20px;

    color:#fff;

    font-size:58px;

    line-height:1.1;

}

.section-header h2 span{

    color:#2f8cff;

}

.section-header p{

    max-width:760px;

    margin:0 auto;

    color:#9bb3d8;

    font-size:20px;

    line-height:1.8;

}


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

.solutions-grid{

    display:grid;

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

    gap:36px;

    align-items:start;

}


/*==============================================================
                        PRODUCT CARD
==============================================================*/

.solution-card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:40px;

    height:100%;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(36,50,79,.95),
            rgba(19,29,49,.98)
        );

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

    overflow:hidden;

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

}


/*==============================================================
                        CARD HIGHLIGHT
==============================================================*/

.solution-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            transparent 35%
        );

    pointer-events:none;

}


/*==============================================================
                        CARD BORDERS
==============================================================*/

.tload-card{

    border-color:rgba(255,122,0,.30);

}

.tmw-card{

    border-color:rgba(47,140,255,.30);
    
    display:flex;

    flex-direction:column;

    height:100%;

    

}


/*==============================================================
                        CARD HOVER
==============================================================*/

.solution-card:hover{

    transform:translateY(-8px);

}

.tload-card:hover{

    box-shadow:

        0 0 35px rgba(255,122,0,.12),

        0 24px 60px rgba(0,0,0,.28);

}

.tmw-card:hover{

    box-shadow:

        0 0 35px rgba(47,140,255,.12),

        0 24px 60px rgba(0,0,0,.28);

}


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

.solution-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:26px;
    
    justify-content:center;

}

.solution-logo{

    width:100px;

    height:auto;

    object-fit:contain;

}

.tmw-card .solution-logo{

    width:290px;

}

.solution-header h3{

    margin:0 0 6px;

    color:#fff;

    font-size:38px;

    font-weight:700;

}

.solution-header span{

    display:block;

    color:#8ea7ce;

    font-size:18px;

}


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

.solution-description{

    margin-bottom:28px;

    color:#c8d5ea;

    font-size:18px;

    line-height:1.8;

}

/*==============================================================
                    TLOAD MEDIA
==============================================================*/

.solution-media{

    margin:30px 0 36px;

}


/*==============================================================
                    VIDEO FRAME
==============================================================*/

.solution-video{

    position:relative;

    width:100%;

    overflow:hidden;

    border-radius:24px;

    background:#101b31;

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

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

}


/*==============================================================
                GLASS REFLECTION
==============================================================*/

.solution-video::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 38%
        );

    pointer-events:none;

    z-index:2;

}


/*==============================================================
                    VIDEO
==============================================================*/

.solution-video video{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

}


/*==============================================================
                    VIDEO HOVER
==============================================================*/

.tload-card:hover .solution-video{

    transform:scale(1.015);

    border-color:rgba(255,122,0,.45);

    box-shadow:

        0 0 24px rgba(255,122,0,.18),

        0 24px 55px rgba(0,0,0,.32);

}

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

.solution-features{

    display:grid;

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

    gap:18px 22px;

    margin-bottom:36px;

}

.solution-features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-size:16px;

    line-height:1.5;

}

.solution-features div::before{

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:50%;

    color:#fff;

    font-size:12px;

    background:#ff7a00;

    box-shadow:

        0 0 12px rgba(255,122,0,.35);

}

.tmw-card .solution-features{

    margin-top:60px;

}

/*==============================================================
                    DOWNLOAD BUTTON
==============================================================*/

.download-btn{

    margin-top:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:60px;

    border-radius:16px;

    text-decoration:none;

    color:#fff;

    font-size:17px;

    font-weight:600;

    background:

        linear-gradient(
            180deg,
            rgba(255,122,0,.16),
            rgba(255,122,0,.08)
        );

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

    transition:.35s;

}

.download-btn::before{

    content:"⬇";

    font-size:18px;

}

.download-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 22px rgba(255, 123, 0, 0.796);

}

/*==========================================================
TMW PLATFORM
==========================================================*/

.tmw-platform{

    display:grid;
    grid-template-columns:.95fr 1.2fr .95fr;

    gap:30px;

    align-items:center;

    margin:40px 0;

     position:relative;
    left:-30px;

}


/*==========================================================
LEFT / RIGHT COLUMNS
==========================================================*/

.tmw-inputs,
.tmw-outputs{

    display:flex;
    flex-direction:column;

    gap:18px;

}


/*==========================================================
SOURCE / OUTPUT CARD
==========================================================*/

.tmw-source,
.tmw-output{

    position:relative;

    display:flex;
    align-items:center;

    gap:10px;

    padding:5px;

    border-radius:18px;

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

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

    transition:.35s;

}

.tmw-source:hover,
.tmw-output:hover{

    transform:translateX(6px);

    border-color:#2563eb;

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

}

.tmw-source img,
.tmw-output img{

    width:52px;

    height:52px;

    object-fit:contain;

}

.tmw-source span,
.tmw-output span{

    color:#fff;

    font-size:.95rem;

    font-weight:500;

    line-height:1.4;

}


/*==========================================================
CENTER PLATFORM
==========================================================*/

.tmw-cloud{

    position:relative;

    min-height:500px;

    width: 250px;

    padding:35px 28px;

    border-radius:26px;

    text-align:center;

    background:linear-gradient(
        180deg,
        rgba(37,99,235,.18),
        rgba(15,23,42,.70)
    );

    border:1px solid rgba(59,130,246,.35);

    box-shadow:
        0 0 50px rgba(37,99,235,.18);

}

.tmw-cloud::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:26px;

    background:linear-gradient(
        180deg,
        rgba(59,130,246,.35),
        transparent
    );

    z-index:-1;

}


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

.tmw-cloud img{

    width:170px;

    margin-bottom:20px;

}


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

.tmw-cloud h4{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:10px;

}

.tmw-cloud p{

    color:#9fb5d3;

    margin-bottom:26px;

    line-height:1.6;

}


/*==========================================================
PROCESS LIST
==========================================================*/

.tmw-cloud ul{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    padding:0;

    margin:0;

    list-style:none;

}

.tmw-cloud li{

    padding:10px 16px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:.82rem;

    font-weight:600;

}


/*==========================================================
LEFT CONNECTORS
==========================================================*/

.tmw-source{
    position:relative;
      width:180px;
}

.tmw-source::after{

    content:"";

    position:absolute;

    top:50%;
    right:-30px;

    width:30px;
    height:2px;

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

}

.tmw-source::before{

    content:"";

    position:absolute;

    top:50%;
    right:-8px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ff7a00;

    transform:translateY(-50%);

    box-shadow:
        0 0 8px #ff7a00,
        0 0 18px rgba(255,122,0,.8);

    animation:flowLeft 2s linear infinite;

}

@keyframes flowLeft{

    from{
        right:-8px;
    }

    to{
        right:-30px;
    }

}

/*==========================================================
RIGHT CONNECTORS
==========================================================*/

.tmw-output{

    position:relative;
    width:160px;

}

.tmw-output::before{

    content:"";

    position:absolute;

    top:50%;
    left:-30px;

    width:30px;
    height:2px;

    background:linear-gradient(
        to right,
        rgba(59,130,246,.20),
        rgba(59,130,246,.90)
    );

    transform:translateY(-50%);

}

.tmw-output::after{

    content:"";

    position:absolute;

    top:50%;
    left:-8px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#3b82f6;

    transform:translateY(-50%);

    box-shadow:
        0 0 8px #3b82f6,
        0 0 18px rgba(59,130,246,.8);

    animation:flowRight 2s linear infinite;

}

@keyframes flowRight{

    from{

        left:-30px;

    }

    to{

        left:-8px;

    }

}

/*=========================================
TMW ACCESS
=========================================*/

.tmw-access{

    margin-top:38px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

/* Vertical line */

.tmw-access-line{

    position:relative;

    width:2px;
    height:28px;

    background:#3b82f6;

    box-shadow:0 0 10px rgba(59,130,246,.7);

}

/* Horizontal line */

.tmw-access-line::after{

    content:"";

    position:absolute;

    top:100%;
    left:50%;

    width:110px;          
    height:2px;

    background:#3b82f6;

    transform:translateX(-50%);

    box-shadow:0 0 10px rgba(59,130,246,.6);

}

/* Two downward branches */

.tmw-access-items{

    position:relative;

    margin-top:20px;

    width:170px;

    display:flex;
    justify-content:space-between;

}

.tmw-access-items::before,
.tmw-access-items::after{

    content:"";

    position:absolute;

    top:-20px;

    width:2px;
    height:20px;

    background:#3b82f6;

    box-shadow:0 0 10px rgba(59,130,246,.7);

}

.tmw-access-items::before{

    left:28px;

}

.tmw-access-items::after{

    right:28px;

}

.tmw-access-item{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

}

.tmw-access-item img{

    width:58px;
    height:58px;

}

.tmw-access-item span{

    color:#fff;
    font-size:.9rem;
    font-weight:500;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

    .tmw-platform{

        grid-template-columns:1fr;

    }

    .tmw-inputs,
    .tmw-outputs{

        flex-direction:row;

        flex-wrap:wrap;

    }

    .tmw-source::after,
    .tmw-output::before{

        display:none;

    }

}
/*==============================================================
                    INDUSTRIES SECTION
==============================================================*/

.industries-section{

    position:relative;

    padding:140px 0;

    background:
        linear-gradient(
            180deg,
            #081221 0%,
            #0d182d 100%
        );

    overflow:hidden;

}

.industries-container{

    width:min(1500px,92%);

    margin:0 auto;

}

/*==============================================================
                    INDUSTRY GRID
==============================================================*/

.industry-grid{

    display:grid;

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

    gap:34px;

    margin-top:80px;

}

/*==============================================================
                    INDUSTRY CARD
==============================================================*/

.industry-card{

    position:relative;

    opacity:0;

    transform:translateY(40px);

}


.industry-card:hover{

    transform:translateY(-10px);

    border-color:#2f8cff;

    box-shadow:
        0 0 35px rgba(47,140,255,.16),
        0 28px 70px rgba(0,0,0,.35);

}

/*==============================================================
                    INDUSTRY IMAGE
==============================================================*/

.industry-image{

    position:relative;

    height:240px;

    overflow:hidden;

}

.industry-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease;

}

.industry-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(6,14,28,.05) 0%,
            rgba(6,14,28,.35) 40%,
            rgba(6,14,28,.75) 100%
        );

}

.industry-image::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#ff7a00;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .45s ease;

    z-index:2;

}

.industry-card:hover .industry-image::before{

    transform:scaleX(1);

}

.industry-card:hover img{

    transform:scale(1.08);

}

.industry-card:hover img{

    transform:scale(1.08);

}

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

.industry-content{

    padding:32px 30px 34px;

}

.industry-content h3{

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;

    transition:color .35s ease;

}

.industry-content p{

    color:#9fb2d2;

    font-size:17px;

    line-height:1.8;

}

.industry-card:hover h3{

    color:#2f8cff;

}

/*==============================================================
                GLASS HIGHLIGHT
==============================================================*/

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            transparent 35%

        );

    pointer-events:none;

}