body{
padding-top:60px;
margin:0;
font-family:Arial, sans-serif;
background:#0b1116;
color:#fff;
}

*{
    box-sizing:border-box;
}
/* NAV */
.nav{
position:fixed;
width:100%;
top:0;
padding:20px ;
background:rgba(0,0,0,0.5);
backdrop-filter:blur(8px);
display:flex;
justify-content:space-between;
z-index:100;
}

.nav a{
color:#fff;
margin-left:20px;
text-decoration:none;
}

/* HERO */

.hero{
height:100vh;
background:url('https://images.unsplash.com/photo-1516900557549-41557d405adf') center/cover;
display:flex;
align-items:center;
padding:0 8%;
}

.hero h1{
font-size:60px;
animation:fadeUp 1s ease;
}

.btn{
display:inline-block;
padding:12px 24px;
background:#1abc9c;
margin-top:20px;
text-decoration:none;
color:#fff;
}


/* PARALLAX */
.parallax{

    height:400px;
    background:url('images/seal.jpg') center / cover;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* PRODUCTS */
/*
.products{
padding:120px 8%;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.product{
background:#141c22;
padding:20px;
border-radius:10px;
text-align:center;
}

.product img{ width:100%; border-radius:8px; }
*/


button{
background:#1abc9c;
border:none;
padding:10px 20px;
color:white;
cursor:pointer;
}

/* CART */
.cart{
position:fixed;
right:-320px;
top:0;
width:320px;
height:100%;
background:#111;
padding:20px;
transition:0.4s;
}
.cart.open{ right:0; }

@keyframes fadeUp{
from{opacity:0; transform:translateY(40px);}
to{opacity:1; transform:translateY(0);}
}

/* VIDEO HERO */
.hero-video{
    position:relative;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:0 8%;
    }
    
    .bg-video{
    position:absolute;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    transform:translate(-50%,-50%);
    object-fit:cover;
    z-index:-2;
    }
    
    /* 暗化层（让文字更清晰+更高级） */
    .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:-1;
    }
    
    .hero-content{
    max-width:600px;
    animation:fadeUp 1.2s ease;
    }
    
    .hero-content h1{
    font-size:64px;
    }
    
    /* 手机端优化（自动裁剪视频） */
    @media(max-width:768px){
    .hero-content h1{
    font-size:40px;
    }
    }
    