﻿*{

margin:0;

padding:0;

box-sizing:border-box;

}


body{

background:#050505;

color:white;

font-family:

Arial,Helvetica,sans-serif;

}



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


/* ==============================
   Hero区域
============================== */

.hero{

height:90vh;

min-height:650px;

position:relative;

display:flex;

align-items:center;

padding-left:8%;

overflow:hidden;

}



/* 图片容器 */

.hero picture{

position:absolute;

inset:0;

}



.hero picture img{

width:100%;

height:100%;

object-fit:cover;

}



.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.75),

rgba(0,0,0,.25)

);

}



.content{

position:relative;

z-index:2;

max-width:650px;

}



.logo{

font-size:42px;

letter-spacing:18px;

color:#d4af37;

margin-bottom:35px;

}



.hero h1{

font-size:65px;

font-weight:300;

letter-spacing:5px;

line-height:1.2;

}



.desc{

margin-top:25px;

font-size:20px;

line-height:1.6;

color:#ddd;

}


/* ==============================
   WhatsApp按钮
============================== */

.btn{


display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;


margin-top:35px;


padding:18px 42px;


border-radius:50px;


background:


linear-gradient(

135deg,

#f4d35e,

#b8860b

);


color:#111;


font-size:15px;


font-weight:600;


letter-spacing:3px;


text-decoration:none;


box-shadow:

0 10px 30px rgba(212,175,55,.35);


transition:.3s;


}



.btn:hover{


transform:translateY(-3px);


box-shadow:

0 15px 40px rgba(212,175,55,.55);


}



.wa-mini{


width:22px;

height:22px;


background:#25D366;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


}



.wa-mini svg{


width:14px;

height:14px;


}


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

/* ==============================
   产品展示区域
============================== */


.featured{

padding:80px 6%;

text-align:center;

}



.featured h2{

font-size:42px;

font-weight:300;

letter-spacing:6px;

color:#d4af37;

}



.section-desc{

margin-top:15px;

color:#999;

}



.grid{

margin-top:40px;

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}



.card{

background:#111;

border-radius:18px;

overflow:hidden;

}



.card img{

width:100%;

height:330px;

object-fit:cover;

}



.card h3{

font-size:25px;

color:#d4af37;

padding:20px;

}



.card p{

color:#aaa;

padding:0 20px 25px;

}



/* =====================
WHY
===================== */


.why{

padding:90px 25px;

background:#0b0b0b;

text-align:center;

}



.why h2{

font-size:42px;

font-weight:300;

letter-spacing:6px;

color:#d4af37;

}



.why .section-desc{

margin-top:30px;

font-size:18px;

line-height:2;

color:#ddd;

}




/* =====================
FLOATING WHATSAPP
===================== */

.floating-wa{

position:fixed;

right:22px;

bottom:22px;

width:64px;

height:64px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:

0 8px 25px rgba(37,211,102,.45);

z-index:9999;

animation:

waPulse 2s infinite;

}


.floating-wa svg{

width:34px;

height:34px;

}



@keyframes waPulse{


0%{

box-shadow:

0 0 0 0 rgba(37,211,102,.6);

}


70%{

box-shadow:

0 0 0 18px rgba(37,211,102,0);

}


100%{

box-shadow:

0 0 0 0 rgba(37,211,102,0);

}


}

@media(max-width:768px){


/* =====================
手机端产品一行一个
===================== */


.grid{

grid-template-columns:1fr;

gap:25px;

margin-top:35px;

}



.card{

border-radius:16px;

}



.card img{

height:300px;

object-fit:cover;

}



.featured{

padding:60px 20px;

}



.featured h2{

font-size:32px;

letter-spacing:3px;

}



.card h3{

font-size:22px;

padding:18px;

}



.card p{

font-size:15px;

padding:0 18px 22px;

}



/* HERO */

.hero{

height:90vh;

padding:0 28px;

align-items:center;

}


.content{

max-width:100%;

margin-top:80px;

}


.logo{

font-size:26px;

letter-spacing:8px;

margin-bottom:25px;

}


.hero h1{

font-size:38px;

line-height:1.15;

letter-spacing:2px;

max-width:330px;

}


.desc{

font-size:15px;

line-height:1.5;

margin-top:20px;

max-width:320px;

}


.btn{

margin-top:25px;

width:100%;

padding:18px 15px;

font-size:14px;

letter-spacing:2px;

}


}

