/* =========================================================
   TECNO STUDIO MARKET
   CSS PRINCIPAL
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --primary: #0077ff;
    --primary-dark: #005dcc;

    --secondary: #00e6a0;

    --background: #f4f7fb;
    --surface: #ffffff;
    --surface-alt: #eef3f8;

    --text: #151a21;
    --text-soft: #667085;

    --border: #e3e8ef;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --radius: 16px;

}


/* =========================================================
   DARK MODE
========================================================= */

body.dark {

    --background: #0d1117;
    --surface: #161b22;
    --surface-alt: #1d2430;

    --text: #f4f7fb;
    --text-soft: #aab4c3;

    --border: #2a3442;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.6;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


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

.market-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(12px);

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

}


body.dark .market-header {

    background:
        rgba(13, 17, 23, 0.92);

}


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

.market-navbar {

    max-width: 1200px;

    margin: auto;

    padding:
        16px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.market-brand {

    font-size: 1.4rem;

    font-weight: 900;

    letter-spacing: -0.5px;

    color: var(--text);

}


.market-brand span {

    color: var(--primary);

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.market-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


.market-nav a {

    color: var(--text-soft);

    font-size: 0.95rem;

    font-weight: 600;

    transition:
        color 0.2s ease;

}


.market-nav a:hover {

    color: var(--primary);

}


/* =========================================================
   ACTIONS
========================================================= */

.market-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.market-theme,
.market-menu {

    border: none;

    cursor: pointer;

    border-radius: 10px;

    background: var(--surface-alt);

    color: var(--text);

    padding: 9px 12px;

    font-size: 1rem;

}


.market-theme:hover,
.market-menu:hover {

    background: var(--border);

}


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

.market-menu {

    display: none;

}


.mobile-menu {

    display: none;

}


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

.market-hero {

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        80px 20px;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(0, 119, 255, 0.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(0, 230, 160, 0.12),
            transparent 35%
        );

}


.market-hero-content {

    max-width: 850px;

}


.market-tag {

    display: inline-block;

    padding:
        7px 14px;

    border-radius: 30px;

    background:
        rgba(0, 119, 255, 0.1);

    color: var(--primary);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 20px;

}


.market-hero h1 {

    font-size:
        clamp(2.5rem, 6vw, 5rem);

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 25px;

}


.market-hero h1 span {

    display: block;

    color: var(--primary);

}


.market-hero p {

    max-width: 650px;

    margin:
        0 auto 35px;

    color: var(--text-soft);

    font-size: 1.15rem;

}


/* =========================================================
   BUTTONS
========================================================= */

.market-hero-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


.market-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 22px;

    border-radius: 10px;

    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.market-btn:hover {

    transform:
        translateY(-2px);

}


.market-btn-primary {

    background:
        var(--primary);

    color: white;

    box-shadow:
        0 8px 20px
        rgba(0, 119, 255, 0.25);

}


.market-btn-primary:hover {

    background:
        var(--primary-dark);

}


.market-btn-secondary {

    background:
        var(--surface);

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

}


.market-btn-light {

    background:
        white;

    color:
        var(--primary);

}


/* =========================================================
   BENEFITS
========================================================= */

.market-benefits {

    max-width: 1100px;

    margin:
        -40px auto 80px;

    padding:
        25px;

    display: grid;

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

    gap: 20px;

    position: relative;

}


.benefit {

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    padding:
        22px;

    box-shadow:
        var(--shadow);

}


.benefit strong {

    display: block;

    margin-bottom: 5px;

}


.benefit span {

    color:
        var(--text-soft);

    font-size:
        0.9rem;

}


/* =========================================================
   SECTIONS
========================================================= */

.market-section {

    max-width:
        1150px;

    margin:
        0 auto;

    padding:
        90px 25px;

}


.market-heading {

    margin-bottom:
        40px;

}


.market-section-tag {

    color:
        var(--primary);

    font-size:
        0.75rem;

    font-weight:
        900;

    letter-spacing:
        1.5px;

}


.market-heading h2 {

    font-size:
        clamp(2rem, 4vw, 3rem);

    margin:
        8px 0;

}


.market-heading p {

    color:
        var(--text-soft);

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-grid {

    display:
        grid;

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

    gap:
        25px;

}


.product-card {

    overflow:
        hidden;

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.product-card:hover {

    transform:
        translateY(-6px);

}


.product-image {

    height:
        230px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--surface-alt);

}


.product-placeholder {

    font-size:
        5rem;

}


.product-badge {

    position:
        absolute;

    top:
        15px;

    left:
        15px;

    background:
        var(--primary);

    color:
        white;

    padding:
        5px 10px;

    border-radius:
        20px;

    font-size:
        0.7rem;

    font-weight:
        900;

}


.product-info {

    padding:
        22px;

}


.product-category {

    color:
        var(--primary);

    font-size:
        0.75rem;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.product-info h3 {

    margin:
        7px 0;

    font-size:
        1.2rem;

}


.product-info p {

    color:
        var(--text-soft);

    font-size:
        0.9rem;

    margin-bottom:
        15px;

}


.product-price {

    margin-bottom:
        15px;

}


.price {

    font-size:
        1.1rem;

    font-weight:
        900;

}


.product-btn {

    display:
        block;

    text-align:
        center;

    padding:
        10px;

    border-radius:
        8px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        700;

}


.product-btn:hover {

    background:
        var(--primary-dark);

}


/* =========================================================
   CATEGORIES
========================================================= */

.categories-section {

    background:
        var(--surface);

    border-radius:
        25px;

    margin-bottom:
        40px;

}


.categories-grid {

    display:
        grid;

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

    gap:
        18px;

}


.category-card {

    padding:
        25px;

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

    border-radius:
        14px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;

}


.category-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--primary);

}


.category-icon {

    font-size:
        2.2rem;

    margin-bottom:
        10px;

}


.category-card h3 {

    margin-bottom:
        5px;

}


.category-card span {

    color:
        var(--text-soft);

    font-size:
        0.85rem;

}


/* =========================================================
   RECOMMENDATIONS
========================================================= */

.recommendation-box {

    padding:
        50px 30px;

    text-align:
        center;

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


.recommendation-icon {

    font-size:
        3rem;

    margin-bottom:
        15px;

}


.recommendation-box h3 {

    font-size:
        1.5rem;

    margin-bottom:
        10px;

}


.recommendation-box p {

    max-width:
        650px;

    margin:
        auto;

    color:
        var(--text-soft);

}


/* =========================================================
   REPAIR BANNER
========================================================= */

.repair-banner {

    margin-top:
        60px;

    padding:
        100px 25px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #0048a8
        );

    color:
        white;

}


.repair-banner-content {

    max-width:
        700px;

    margin:
        auto;

}


.repair-banner span {

    font-size:
        0.8rem;

    font-weight:
        900;

    letter-spacing:
        1px;

    opacity:
        0.85;

}


.repair-banner h2 {

    font-size:
        clamp(2rem, 5vw, 3.5rem);

    margin:
        10px 0;

}


.repair-banner p {

    margin:
        0 auto 30px;

    max-width:
        600px;

    opacity:
        0.9;

}


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

.market-footer {

    background:
        #080b10;

    color:
        white;

    padding:
        50px 25px 20px;

}


.market-footer-content {

    max-width:
        1100px;

    margin:
        auto;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

}


.market-footer strong {

    font-size:
        1.3rem;

}


.market-footer p {

    color:
        #9aa4b2;

    margin-top:
        8px;

}


.footer-links {

    display:
        flex;

    gap:
        20px;

}


.footer-links a {

    color:
        #d5dbe3;

}


.footer-links a:hover {

    color:
        var(--secondary);

}


.market-footer-bottom {

    max-width:
        1100px;

    margin:
        40px auto 0;

    padding-top:
        20px;

    border-top:
        1px solid #242b35;

    color:
        #7f8997;

    font-size:
        0.85rem;

}


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

@media (max-width: 900px) {

    .market-nav {

        display:
            none;

    }


    .market-menu {

        display:
            block;

    }


    .mobile-menu {

        position:
            absolute;

        top:
            100%;

        left:
            0;

        width:
            100%;

        background:
            var(--surface);

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

        padding:
            15px 25px;

        flex-direction:
            column;

        gap:
            5px;

        box-shadow:
            var(--shadow);

    }


    .mobile-menu.active {

        display:
            flex;

    }


    .mobile-menu a {

        padding:
            13px 5px;

        color:
            var(--text);

        font-weight:
            600;

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

    }


    .products-grid {

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

    }


    .categories-grid {

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

    }


    .market-benefits {

        grid-template-columns:
            1fr;

        margin:
            0 auto 50px;

    }

}


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

@media (max-width: 600px) {

    .market-navbar {

        padding:
            14px 18px;

    }


    .market-brand {

        font-size:
            1.15rem;

    }


    .market-hero {

        min-height:
            600px;

        padding:
            70px 20px;

    }


    .market-hero h1 {

        font-size:
            2.5rem;

        letter-spacing:
            -1px;

    }


    .market-hero p {

        font-size:
            1rem;

    }


    .market-hero-buttons {

        flex-direction:
            column;

    }


    .market-btn {

        width:
            100%;

    }


    .market-section {

        padding:
            60px 18px;

    }


    .products-grid {

        grid-template-columns:
            1fr;

    }


    .categories-grid {

        grid-template-columns:
            1fr;

    }


    .categories-section {

        border-radius:
            18px;

    }


    .market-footer-content {

        flex-direction:
            column;

    }


    .footer-links {

        flex-direction:
            column;

        gap:
            10px;

    }


    .repair-banner {

        padding:
            75px 20px;

    }

}