/* ========================================
   TYD Cloud Portal
   Version 1.0
   ======================================== */

:root{

    --bg:#081120;
    --bg2:#0F172A;
    --bg3:#111827;

    --card:rgba(20,31,58,.72);

    --border:rgba(255,255,255,.08);

    --primary:#3B82F6;
    --primary2:#60A5FA;
    --primary3:#2563EB;

    --text:#FFFFFF;
    --text2:#CBD5E1;
    --text3:#94A3B8;

    --radius:24px;

    --shadow:
        0 20px 50px rgba(0,0,0,.35);

    --transition:.35s;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;

    background:
        linear-gradient(
            135deg,
            var(--bg),
            var(--bg2),
            var(--bg3)
        );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

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

.background{

    position:fixed;

    inset:0;

    background:
        url("../assets/background.svg")
        center center /
        cover
        no-repeat;

    pointer-events:none;

    z-index:-100;

}

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

.container{

    position:relative;

    z-index:2;

    width:min(1180px,92%);

    margin:auto;

    padding:60px 0;

}

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

header{

    text-align:center;

    margin-bottom:70px;

}

.logo{

    width:120px;

    height:120px;

    margin:auto;

    margin-bottom:20px;

}

.logo img{

    width:100%;

    display:block;

}

header h1{

    font-size:58px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:10px;

}

.tagline{

    color:var(--primary2);

    font-size:20px;

    font-weight:500;

}

.tagline span{

    color:#64748B;

    margin:0 12px;

}

header p{

    max-width:700px;

    margin:24px auto 0;

    color:var(--text2);

    font-size:18px;

    line-height:1.8;

}

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

.applications{

    display:grid;

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

    gap:24px;

}

/* ===============================
              CARD
================================ */
.card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    text-decoration:none;

    color:var(--text);

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:36px;

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow);

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

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.10),

            transparent 55%

        );

    opacity:0;

    transition:opacity .35s;

    z-index:-1;

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:

        0 25px 60px rgba(37,99,235,.25);

}

.card:hover::before{

    opacity:1;

}

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

.icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

}

.icon img{

    width:72px;

    height:72px;

    display:block;

    transition:

        transform .35s ease;

}

.card:hover .icon img{

    transform:scale(1.08);

}

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

.card h2{

    font-size:30px;

    font-weight:600;

    margin-bottom:14px;

}

.card p{

    color:var(--text2);

    font-size:16px;

    line-height:1.7;

    min-height:60px;

}

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

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:28px;

    padding:14px 26px;

    border-radius:14px;

    background:

        linear-gradient(

            90deg,

            var(--primary3),

            #4F46E5

        );

    color:#fff;

    font-weight:600;

    transition:

        background .35s,

        transform .35s,

        box-shadow .35s;

}

.card:hover .button{

    transform:translateY(-2px);

    background:

        linear-gradient(

            90deg,

            var(--primary),

            #6366F1

        );

    box-shadow:

        0 12px 25px rgba(59,130,246,.30);

}

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

footer{

    margin-top:80px;

    color:var(--text3);

    font-size:15px;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-left{

    text-align:left;

}

.footer-right{

    text-align:right;

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

@media (max-width:980px){

    .container{

        width:94%;

        padding:50px 0;

    }

    header{

        margin-bottom:55px;

    }

    header h1{

        font-size:46px;

    }

    .tagline{

        font-size:18px;

    }

    header p{

        font-size:17px;

    }

    .applications{

        grid-template-columns:1fr;

        gap:24px;

    }

}

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

@media (max-width:640px){

    .container{

        width:92%;

        padding:40px 0;

    }

    .logo{

        width:90px;

        height:90px;

    }

    header{

        margin-bottom:40px;

    }

    header h1{

        font-size:36px;

    }

    .tagline{

        font-size:16px;

    }

    .tagline span{

        margin:0 8px;

    }

    header p{

        font-size:15px;

        line-height:1.7;

    }

    .card{

        padding:26px;

    }

    .icon{

        width:64px;

        height:64px;

        margin-bottom:22px;

    }

    .icon img{

        width:64px;

        height:64px;

    }

    .card h2{

        font-size:24px;

    }

    .card p{

        font-size:15px;

        min-height:auto;

    }

    .button{

        width:100%;

        justify-content:center;

    }

    .footer-content{

        flex-direction:column;

        text-align:center;

        gap:10px;

    }

    .footer-left,

    .footer-right{

        text-align:center;

    }

}

/* ===============================
          SCROLLBAR
================================ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0B1220;

}

::-webkit-scrollbar-thumb{

    background:#2563EB;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3B82F6;

}

/* ===============================
          SELECTION
================================ */

::selection{

    background:#2563EB;

    color:#FFFFFF;

}

/* ===============================
        FOCUS ACCESSIBILITY
================================ */

a:focus-visible{

    outline:2px solid var(--primary2);

    outline-offset:4px;

    border-radius:10px;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

header{

    animation:fadeUp .8s ease;

}

.card{

    animation:fadeUp .8s ease;

}

/* ===============================
        PERFORMANCE
================================ */

img{

    user-select:none;

    -webkit-user-drag:none;

    max-width:100%;

}

a{

    -webkit-tap-highlight-color:transparent;

}

/* ===============================
          VERSION 1.0
================================ */