/* =====================================================
   TINTA
   SHARED CSS
===================================================== */


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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;

    overflow-x: hidden;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 85px;

    background: rgba(0, 0, 0, 0.94);

    display: flex;

    align-items: center;

    padding: 0 5%;

    z-index: 1000;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


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

.logo {

    width: 30%;

    color: white;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 28px;

    font-weight: bold;

}


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

.nav-links {

    width: 40%;

    display: flex;

    justify-content: center;

    gap: 40px;

}


.nav-links a {

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s;

}


.nav-links a:hover {

    color: #3b82f6;

}


/* =====================================================
   LOGIN
===================================================== */

.login-btn {

    width: 30%;

    display: flex;

    justify-content: flex-end;

}


.login-btn a {

    background: white;

    color: black;

    text-decoration: none;

    padding: 12px 35px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s;

}


.login-btn a:hover {

    background: #3b82f6;

    color: white;

}


/* =====================================================
   PROGRESS BAR
===================================================== */

.progress-container {

    position: fixed;

    top: 84px;
    left: 0;

    width: 100%;

    height: 3px;

    background:
        rgba(255, 255, 255, 0.15);

    z-index: 1001;

}


.progress-bar {

    width: 0%;

    height: 100%;

    background: white;

}


/* =====================================================
   HOME PAGE
===================================================== */

.home-page {

    background: #000;

    color: white;

}


/* =====================================================
   HOME HERO
===================================================== */

.home-hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding:
        120px
        5%
        70px;

    background: #000;

}


/* =====================================================
   HOME HERO LEFT
===================================================== */

.home-content {

    width: 55%;

    z-index: 2;

}


.home-title {

    font-size:
        clamp(
            45px,
            6vw,
            85px
        );

    line-height: 0.95;

    margin-bottom: 15px;

}


.home-subtitle {

    font-size:
        clamp(
            25px,
            3vw,
            42px
        );

    color: #999;

    margin-bottom: 20px;

}


.home-text {

    max-width: 520px;

    color: #aaa;

    line-height: 1.6;

    margin-bottom: 30px;

}


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

.home-btn {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 16px 24px;

    background: #f5f0e8;

    color: #000;

    text-decoration: none;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;

}


.home-btn:hover {

    background: #3b82f6;

    color: white;

    transform:
        translateY(-3px);

}


/* =====================================================
   HOME HERO CARD AREA
===================================================== */

.home-card-area {

    width: 45%;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}


/* BACK CARD */

.home-card-back {

    position: absolute;

    width: 300px;

    height: 190px;

    background: #171717;

    border:
        1px solid
        #333;

    border-radius: 15px;

    transform:
        rotate(10deg)
        translate(40px, 40px);

}


/* FRONT CARD */

.home-card {

    width: 300px;

    height: 190px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #eeeeee,
            #ffffff,
            #cccccc
        );

    color: #555;

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: bold;

    box-shadow:
        0 20px 60px
        rgba(
            255,
            255,
            255,
            0.15
        );

    transform:
        rotate(-18deg);

    position: relative;

    z-index: 2;

    overflow: hidden;

}


/* HERO CARD IMAGE */

.home-card img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}


/* =====================================================
   HOME CARD SHOWCASE
===================================================== */

.home-cards {

    min-height: 100vh;

    background: #eeeeee;

    color: #000;

    padding:
        120px
        5%
        80px;

    overflow: hidden;

}


.home-cards-title {

    text-align: center;

    font-size:
        clamp(
            40px,
            5vw,
            70px
        );

    line-height: 1.05;

    max-width: 800px;

    margin:
        0
        auto
        20px;

}


.home-cards-text {

    text-align: center;

    color: #666;

    margin-bottom: 50px;

}


/* =====================================================
   HORIZONTAL CARD SLIDER
===================================================== */

.home-card-slider {

    width: 100%;

    overflow: hidden;

    cursor: grab;

    user-select: none;

}


.home-card-slider:active {

    cursor: grabbing;

}


.home-card-track {

    display: flex;

    gap: 30px;

    width: max-content;

    padding: 40px 0;

    transform:
        translateX(0);

}


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

.home-product-card {

    width: 280px;

    height: 420px;

    flex-shrink: 0;

    border-radius: 15px;

    overflow: hidden;

    background: white;

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

    transition: 0.3s;

}


.home-product-card:hover {

    transform:
        translateY(-15px);

}


/* CARD IMAGE */

.home-product-card img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;

}


/* =====================================================
   HOW IT WORKS
===================================================== */

.home-how {

    min-height: 70vh;

    background: #000;

    color: white;

    padding:
        100px
        5%;

}


.home-how-title {

    text-align: center;

    font-size: 50px;

    margin-bottom: 70px;

}


.home-steps {

    max-width: 1100px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.home-step {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 20px;

}


.home-step-number {

    width: 80px;

    height: 80px;

    flex-shrink: 0;

    border-radius: 10px;

    background: #f5f0e8;

    color: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.home-step-title {

    margin-bottom: 8px;

}


.home-step-text {

    color: #aaa;

    font-size: 14px;

    line-height: 1.5;

}


.home-step-arrow {

    font-size: 35px;

}


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

.home-features {

    min-height: 70vh;

    background: #eeeeee;

    color: #000;

    padding:
        100px
        5%;

    display: flex;

    gap: 80px;

    align-items: center;

}


.home-features-content {

    flex: 1;

}


.home-features-label {

    color: #777;

    font-size: 13px;

    font-weight: bold;

    margin-bottom: 20px;

}


.home-features-title {

    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    line-height: 1.05;

    margin-bottom: 25px;

}


.home-features-description {

    max-width: 500px;

    color: #555;

    line-height: 1.6;

}


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

.home-feature-grid {

    flex: 1;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

}


.home-feature {

    padding: 30px;

    border:
        1px solid
        #aaa;

}


.home-feature-icon {

    width: 45px;

    height: 45px;

    background: #000;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}


.home-feature-title {

    margin-bottom: 8px;

}


.home-feature-text {

    color: #666;

    font-size: 14px;

    line-height: 1.5;

}


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

@media (max-width: 800px) {


    /* NAVBAR */

    .navbar {

        height: 70px;

        padding: 0 20px;

    }


    .logo {

        width: auto;

        font-size: 23px;

    }


    .nav-links {

        gap: 15px;

        margin-left: auto;

        margin-right: 15px;

    }


    .nav-links a {

        font-size: 11px;

    }


    .login-btn {

        display: none;

    }


    .progress-container {

        top: 69px;

    }


    /* HERO */

    .home-hero {

        flex-direction: column;

        justify-content: center;

        text-align: center;

        padding-top: 130px;

    }


    .home-content {

        width: 100%;

    }


    .home-text {

        margin-left: auto;

        margin-right: auto;

    }


    .home-card-area {

        width: 100%;

        margin-top: 70px;

    }


    .home-card,
    .home-card-back {

        width: 240px;

        height: 150px;

    }


    /* HOW IT WORKS */

    .home-steps {

        flex-direction: column;

        align-items: stretch;

    }


    .home-step-arrow {

        display: none;

    }


    /* FEATURES */

    .home-features {

        flex-direction: column;

        gap: 50px;

    }


    .home-feature-grid {

        width: 100%;

    }

}