:root{
            --black:#050505;
            --black-2:#0c0c0d;
            --black-3:#151515;
            --white:#ffffff;
            --soft:#f6f6f6;
            --line:rgba(255,255,255,.12);
            --text:#171717;
            --muted:#747474;
            --accent:#ffffff;
            --danger:#e53935;
            --container:1240px;
            --radius:18px;
            --shadow:0 18px 55px rgba(0,0,0,.12);
        }

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

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:Arial, Helvetica, sans-serif;
            color:var(--text);
            background:#fff;
            overflow-x:hidden;
        }

        img{
            max-width:100%;
            display:block;
        }

        a{
            color:inherit;
        }

        button,
        input{
            font:inherit;
        }

        .container{
            width:min(var(--container), calc(100% - 40px));
            margin-inline:auto;
        }

        /* =========================
           HEADER
        ========================= */
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            background:rgba(5,5,5,.95);
            backdrop-filter:blur(16px);
            border-bottom:1px solid var(--line);
        }

        .navbar{
            min-height:78px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
        }

        .brand{
            display:flex;
            align-items:center;
            min-width:0;
        }

        .brand img{
            height:46px;
            width:auto;
            max-width:340px;
            object-fit:contain;
        }

        .nav-menu{
            display:flex;
            align-items:center;
            gap:30px;
            list-style:none;
        }

        .nav-menu a{
            color:#dcdcdc;
            text-decoration:none;
            font-size:14px;
            font-weight:700;
            letter-spacing:.25px;
            position:relative;
            padding:29px 0 27px;
            transition:.25s ease;
        }

        .nav-menu a::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:19px;
            height:2px;
            background:#fff;
            transform:scaleX(0);
            transform-origin:center;
            transition:.25s ease;
        }

        .nav-menu a:hover,
        .nav-menu a.active{
            color:#fff;
        }

        .nav-menu a:hover::after,
        .nav-menu a.active::after{
            transform:scaleX(1);
        }

        .header-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }

        .login-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 18px;
            border:1px solid rgba(255,255,255,.22);
            border-radius:999px;
            text-decoration:none;
            color:#fff;
            font-weight:800;
            font-size:13px;
            transition:.25s ease;
        }

        .login-btn:hover{
            color:#050505;
            background:#fff;
            border-color:#fff;
        }

        .menu-toggle{
            display:none;
            width:44px;
            height:44px;
            align-items:center;
            justify-content:center;
            border:1px solid rgba(255,255,255,.18);
            border-radius:12px;
            background:transparent;
            color:#fff;
            cursor:pointer;
            font-size:22px;
        }

        /* =========================
           HERO
        ========================= */
        .hero{
            position:relative;
            min-height:calc(100vh - 78px);
            display:flex;
            align-items:center;
            isolation:isolate;
            overflow:hidden;
            background:
                linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.16) 78%),
                url("https://images.unsplash.com/photo-1617137968427-85924c800a22?auto=format&fit=crop&w=1920&q=88")
                center 25% / cover no-repeat;
        }

        .hero::after{
            content:"";
            position:absolute;
            inset:auto 0 0;
            height:140px;
            background:linear-gradient(transparent,#fff);
            z-index:-1;
        }

        .hero-inner{
            padding:80px 0 150px;
            color:#fff;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-size:12px;
            letter-spacing:4px;
            font-weight:900;
            text-transform:uppercase;
            color:#fff;
            margin-bottom:20px;
        }

        .eyebrow::before{
            content:"";
            width:38px;
            height:2px;
            background:#fff;
        }

        .hero h1{
            max-width:760px;
            font-size:clamp(50px,7vw,92px);
            line-height:.94;
            letter-spacing:-3px;
            font-weight:900;
            text-transform:uppercase;
        }

        .hero p{
            max-width:620px;
            margin-top:24px;
            color:#d0d0d0;
            font-size:17px;
            line-height:1.8;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:34px;
        }

        .btn{
            min-height:52px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:0 24px;
            border-radius:999px;
            font-weight:900;
            text-decoration:none;
            border:1px solid transparent;
            transition:.25s ease;
            cursor:pointer;
        }

        .btn-light{
            background:#fff;
            color:#050505;
        }

        .btn-light:hover{
            transform:translateY(-2px);
            box-shadow:0 12px 30px rgba(255,255,255,.18);
        }

        .btn-outline{
            border-color:rgba(255,255,255,.32);
            color:#fff;
            background:rgba(255,255,255,.04);
        }

        .btn-outline:hover{
            background:#fff;
            color:#050505;
        }

        .hero-stat{
            margin-top:54px;
            display:flex;
            flex-wrap:wrap;
            gap:34px;
        }

        .hero-stat-item strong{
            display:block;
            font-size:26px;
        }

        .hero-stat-item span{
            display:block;
            color:#aaa;
            font-size:12px;
            margin-top:3px;
        }

        /* =========================
           FEATURE STRIP
        ========================= */
        .feature-strip{
            position:relative;
            z-index:10;
            margin-top:-70px;
        }

        .features{
            background:#fff;
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            display:grid;
            grid-template-columns:repeat(4,1fr);
            overflow:hidden;
        }

        .feature{
            padding:28px 24px;
            display:flex;
            align-items:center;
            gap:16px;
            border-right:1px solid #eaeaea;
        }

        .feature:last-child{
            border-right:0;
        }

        .feature-icon{
            width:46px;
            height:46px;
            flex:0 0 46px;
            border-radius:50%;
            background:#080808;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:20px;
        }

        .feature h4{
            font-size:14px;
            margin-bottom:5px;
        }

        .feature p{
            color:#8a8a8a;
            font-size:12px;
            line-height:1.45;
        }

        /* =========================
           SECTIONS
        ========================= */
        .section{
            padding:96px 0;
        }

        .section-soft{
            background:#f7f7f7;
        }

        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:30px;
            margin-bottom:36px;
        }

        .section-title span{
            display:block;
            color:#777;
            font-size:11px;
            letter-spacing:3px;
            font-weight:900;
            margin-bottom:10px;
            text-transform:uppercase;
        }

        .section-title h2{
            font-size:clamp(30px,4vw,48px);
            letter-spacing:-1.5px;
        }

        .section-title p{
            margin-top:12px;
            color:#747474;
            line-height:1.75;
            max-width:620px;
        }

        .text-link{
            font-weight:900;
            text-decoration:none;
            border-bottom:2px solid #111;
            padding-bottom:4px;
            white-space:nowrap;
        }

        /* =========================
           PROMO
        ========================= */
        .promo-card{
            min-height:430px;
            display:grid;
            grid-template-columns:1fr 1fr;
            border-radius:26px;
            overflow:hidden;
            background:#070707;
            color:#fff;
            box-shadow:var(--shadow);
        }

        .promo-copy{
            padding:60px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .promo-tag{
            font-size:12px;
            font-weight:900;
            letter-spacing:3px;
            text-transform:uppercase;
            color:#bfbfbf;
        }

        .promo-copy h2{
            font-size:clamp(38px,5vw,64px);
            line-height:.98;
            letter-spacing:-2px;
            margin:15px 0 20px;
        }

        .promo-copy p{
            color:#c1c1c1;
            line-height:1.8;
            max-width:500px;
            margin-bottom:28px;
        }

        .promo-image{
            background:
                linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0)),
                url("https://images.unsplash.com/photo-1551488831-00ddcb6c6bd3?auto=format&fit=crop&w=1200&q=85")
                center/cover no-repeat;
        }

        /* =========================
           PRODUCTS
        ========================= */
        .product-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:22px;
        }

        .product-card{
            background:#fff;
            border:1px solid #ededed;
            border-radius:18px;
            overflow:hidden;
            transition:.28s ease;
        }

        .product-card:hover{
            transform:translateY(-6px);
            box-shadow:0 16px 40px rgba(0,0,0,.10);
        }

        .product-image{
            position:relative;
            aspect-ratio:4/5;
            overflow:hidden;
            background:#eee;
        }

        .product-image img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:.45s ease;
        }

        .product-card:hover .product-image img{
            transform:scale(1.05);
        }

        .product-badge{
            position:absolute;
            top:14px;
            left:14px;
            background:#050505;
            color:#fff;
            border-radius:999px;
            padding:7px 11px;
            font-size:10px;
            font-weight:900;
            letter-spacing:.8px;
        }

        .product-info{
            padding:18px;
        }

        .product-category{
            color:#939393;
            font-size:10px;
            font-weight:900;
            letter-spacing:1.7px;
        }

        .product-info h3{
            margin:8px 0 12px;
            font-size:17px;
        }

        .product-price{
            display:flex;
            align-items:center;
            gap:9px;
        }

        .old-price{
            color:#aaa;
            text-decoration:line-through;
            font-size:12px;
        }

        .new-price{
            font-size:17px;
            font-weight:900;
        }

        .product-action{
            margin-top:16px;
            width:100%;
            min-height:44px;
            border:0;
            border-radius:10px;
            background:#080808;
            color:#fff;
            font-weight:900;
            cursor:pointer;
            transition:.25s ease;
        }

        .product-action:hover{
            background:#292929;
        }

        /* =========================
           CATEGORIES
        ========================= */
        .category-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:18px;
        }

        .category-card{
            position:relative;
            min-height:330px;
            border-radius:18px;
            overflow:hidden;
            color:#fff;
            text-decoration:none;
        }

        .category-card img{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            transition:.45s ease;
        }

        .category-card::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(transparent 35%,rgba(0,0,0,.82));
        }

        .category-card:hover img{
            transform:scale(1.06);
        }

        .category-content{
            position:absolute;
            z-index:2;
            left:22px;
            right:22px;
            bottom:22px;
        }

        .category-content small{
            display:block;
            color:#cacaca;
            font-weight:900;
            letter-spacing:1.5px;
            font-size:10px;
            margin-bottom:7px;
        }

        .category-content h3{
            font-size:25px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }

        /* =========================
           FLASH
        ========================= */
        .flash{
            background:#050505;
            color:#fff;
            border-radius:24px;
            padding:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
        }

        .flash h2{
            font-size:32px;
            margin-bottom:8px;
        }

        .flash p{
            color:#aaa;
        }

        .countdown{
            display:flex;
            gap:10px;
        }

        .time-box{
            min-width:76px;
            padding:14px 12px;
            text-align:center;
            background:#fff;
            color:#050505;
            border-radius:12px;
        }

        .time-box strong{
            display:block;
            font-size:24px;
        }

        .time-box small{
            font-size:9px;
            font-weight:900;
            color:#777;
        }

        /* =========================
           ABOUT
        ========================= */
        .about-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:70px;
            align-items:center;
        }

        .about-image{
            border-radius:24px;
            overflow:hidden;
            min-height:500px;
            background:
                url("https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?auto=format&fit=crop&w=1100&q=85")
                center/cover no-repeat;
        }

        .about-copy h2{
            font-size:clamp(34px,4vw,54px);
            letter-spacing:-1.5px;
            margin:14px 0 20px;
        }

        .about-copy p{
            color:#6f6f6f;
            line-height:1.9;
            margin-bottom:18px;
        }

        .about-points{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
            margin-top:28px;
        }

        .about-point{
            border:1px solid #e7e7e7;
            border-radius:14px;
            padding:18px;
            background:#fff;
        }

        .about-point strong{
            display:block;
            margin-bottom:6px;
        }

        .about-point span{
            color:#777;
            font-size:12px;
            line-height:1.5;
        }

        /* =========================
           NEWSLETTER
        ========================= */
        .newsletter{
            background:#090909;
            color:#fff;
        }

        .newsletter-inner{
            padding:70px 0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:40px;
        }

        .newsletter-copy h2{
            font-size:clamp(32px,4vw,48px);
            margin-bottom:10px;
        }

        .newsletter-copy p{
            color:#aaa;
            line-height:1.7;
        }

        .newsletter-form{
            width:min(500px,100%);
            display:flex;
            background:#fff;
            padding:6px;
            border-radius:999px;
        }

        .newsletter-form input{
            flex:1;
            min-width:0;
            border:0;
            outline:0;
            padding:0 18px;
            background:transparent;
        }

        .newsletter-form button{
            border:0;
            background:#050505;
            color:#fff;
            border-radius:999px;
            padding:13px 20px;
            font-weight:900;
            cursor:pointer;
        }

        /* =========================
           FOOTER
        ========================= */
        .site-footer{
            background:#050505;
            color:#fff;
            border-top:1px solid var(--line);
        }

        .footer-grid{
            padding:60px 0 42px;
            display:grid;
            grid-template-columns:2fr 1fr 1fr 1fr;
            gap:42px;
        }

        .footer-brand img{
            height:44px;
            width:auto;
            max-width:300px;
            object-fit:contain;
            margin-bottom:18px;
        }

        .footer-col h4{
            margin-bottom:18px;
        }

        .footer-col p{
            color:#8f8f8f;
            font-size:13px;
            line-height:1.8;
        }

        .footer-col ul{
            list-style:none;
        }

        .footer-col li{
            margin-bottom:11px;
        }

        .footer-col a{
            color:#8f8f8f;
            text-decoration:none;
            font-size:13px;
        }

        .footer-col a:hover{
            color:#fff;
        }

        .copyright{
            padding:22px 0;
            border-top:1px solid var(--line);
            display:flex;
            justify-content:space-between;
            gap:20px;
            color:#777;
            font-size:12px;
        }

        /* =========================
           MOBILE MENU
        ========================= */
        .mobile-panel{
            display:none;
        }

        /* =========================
           TOAST
        ========================= */
        .toast{
            position:fixed;
            right:20px;
            bottom:20px;
            z-index:2000;
            background:#050505;
            color:#fff;
            padding:14px 18px;
            border-radius:12px;
            box-shadow:0 16px 40px rgba(0,0,0,.25);
            transform:translateY(30px);
            opacity:0;
            pointer-events:none;
            transition:.25s ease;
            font-size:13px;
            font-weight:700;
        }

        .toast.show{
            transform:translateY(0);
            opacity:1;
        }

        /* =========================
           RESPONSIVE
        ========================= */
        @media (max-width: 1024px){
            .nav-menu{
                display:none;
            }

            .menu-toggle{
                display:inline-flex;
            }

            .mobile-panel{
                display:block;
                position:fixed;
                inset:78px 0 auto;
                z-index:999;
                background:#080808;
                border-top:1px solid var(--line);
                transform:translateY(-140%);
                transition:.3s ease;
                box-shadow:0 20px 35px rgba(0,0,0,.25);
            }

            .mobile-panel.open{
                transform:translateY(0);
            }

            .mobile-panel a{
                display:block;
                padding:17px 22px;
                color:#fff;
                text-decoration:none;
                border-bottom:1px solid rgba(255,255,255,.08);
                font-weight:800;
            }

            .features{
                grid-template-columns:repeat(2,1fr);
            }

            .feature:nth-child(2){
                border-right:0;
            }

            .feature:nth-child(-n+2){
                border-bottom:1px solid #eaeaea;
            }

            .product-grid,
            .category-grid{
                grid-template-columns:repeat(2,1fr);
            }

            .promo-card,
            .about-grid{
                grid-template-columns:1fr;
            }

            .promo-image{
                min-height:360px;
                order:-1;
            }

            .about-grid{
                gap:40px;
            }

            .newsletter-inner{
                flex-direction:column;
                align-items:flex-start;
            }

            .footer-grid{
                grid-template-columns:2fr 1fr 1fr;
            }
        }

        @media (max-width: 700px){
            .container{
                width:min(100% - 28px,var(--container));
            }

            .site-header{
                position:sticky;
            }

            .navbar{
                min-height:68px;
            }

            .brand img{
                height:32px;
                max-width:220px;
            }

            .mobile-panel{
                inset:68px 0 auto;
            }

            .login-btn{
                min-height:40px;
                padding:0 14px;
            }

            .hero{
                min-height:700px;
                background:
                    linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.88) 64%,rgba(0,0,0,.96) 100%),
                    url("https://images.unsplash.com/photo-1617137968427-85924c800a22?auto=format&fit=crop&w=1000&q=84")
                    67% center / cover no-repeat;
            }

            .hero-inner{
                padding:240px 0 120px;
            }

            .hero h1{
                letter-spacing:-2px;
            }

            .hero p{
                font-size:15px;
            }

            .hero-stat{
                gap:20px;
            }

            .feature-strip{
                margin-top:-50px;
            }

            .features{
                grid-template-columns:1fr;
            }

            .feature{
                border-right:0;
                border-bottom:1px solid #eaeaea;
            }

            .feature:last-child{
                border-bottom:0;
            }

            .section{
                padding:72px 0;
            }

            .section-head{
                align-items:flex-start;
                flex-direction:column;
                gap:18px;
            }

            .promo-copy{
                padding:36px 24px;
            }

            .product-grid,
            .category-grid{
                grid-template-columns:1fr;
            }

            .product-image{
                aspect-ratio:5/5.8;
            }

            .category-card{
                min-height:410px;
            }

            .flash{
                align-items:flex-start;
                flex-direction:column;
                padding:28px 20px;
            }

            .countdown{
                width:100%;
                display:grid;
                grid-template-columns:repeat(4,1fr);
            }

            .time-box{
                min-width:0;
                padding:12px 5px;
            }

            .about-image{
                min-height:420px;
            }

            .about-points{
                grid-template-columns:1fr;
            }

            .newsletter-form{
                flex-direction:column;
                border-radius:16px;
                gap:6px;
            }

            .newsletter-form input{
                min-height:48px;
            }

            .newsletter-form button{
                min-height:46px;
                border-radius:12px;
            }

            .footer-grid{
                grid-template-columns:1fr 1fr;
            }

            .footer-brand{
                grid-column:1/-1;
            }

            .copyright{
                flex-direction:column;
                text-align:center;
            }
        }

        @media (max-width: 420px){
            .header-actions{
                gap:6px;
            }

            .login-btn{
                padding:0 11px;
                font-size:12px;
            }

            .brand img{
                height:27px;
                max-width:180px;
            }

            .footer-grid{
                grid-template-columns:1fr;
            }

            .footer-brand{
                grid-column:auto;
            }
        }