:root {
            --brand-blue: #003366;
            --brand-gold: #ffcc00;
            --text-main: #111;
            --text-sub: #888;
            --line: #e0e0e0;
            --bg-soft: #fbfbfb;
        }
        .hero {
            height: 90vh; background: #000; position: relative;
            display: flex; align-items: flex-end; padding-bottom: 100px;
            background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/495522/4646/03baace117346ab6cd89e8aac887a642/P1_BANNER.JPG') center/cover;
        }
        .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }
        .hero-content { position: relative; z-index: 2; width: 100%; }
        .hero h1 {font-size: clamp(26px, 3.35vw, 64px);font-weight: 100;color: #fff;margin: 0;line-height: 1.2;}
        .hero span {font-size: clamp(10px, 1.4vw, 26px);letter-spacing: 6px;text-transform: uppercase;color: var(--color-primary);margin-bottom: 20px;font-weight: bold;font-family: var(--title-font-family);text-shadow: 0px 0px 5px #fff;}
        .hero p.desc{color: #fff;font-size: clamp(14px, 1.15vw, 22px);line-height: 1.6;padding: 30px 0;}



        @media(max-width:767px){
            .hero {height: auto;padding-bottom: 0px;padding-top: 40px;}
            .hero span {letter-spacing: 3px;}
            .hero p {padding: 10px 0 30px 0;}
            
        }