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

*{box-sizing:border-box;}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,
"Segoe UI","Noto Sans TC",sans-serif;
background:#f4f6f8;
color:#1c2b36;
}

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


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

.site-header{
background:#0f2533;
position:sticky;
top:0;
z-index:999;
transition:all .3s ease;
}

.navwrap{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
}

.logo img{height:48px;}

nav{
display:flex;
gap:24px;
}

nav a{
color:#d8e3ea;
text-decoration:none;
font-weight:600;
}

nav a:hover{color:#4db3ff;}

.hamburger{
display:none;
font-size:26px;
color:white;
cursor:pointer;
}

.site-header.shrink{
padding:2px 0;
box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.site-header.shrink .logo img{
height:36px;
}

.site-header.shrink nav a{
font-size:14px;
}


/* ================= SLIDER ================= */

.hero{
position:relative;
width:100%;
overflow:hidden;
}

.hero::after{
content:"";
display:block;
padding-top:32%;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
animation:fade 25s infinite;
}

.slide img{
width:100%;
height:100%;
object-fit:contain;
}

.slide:nth-child(1){animation-delay:0s}
.slide:nth-child(2){animation-delay:5s}
.slide:nth-child(3){animation-delay:10s}
.slide:nth-child(4){animation-delay:15s}
.slide:nth-child(5){animation-delay:20s}

@keyframes fade{
0%{opacity:0}
5%{opacity:1}
20%{opacity:1}
25%{opacity:0}
100%{opacity:0}
}


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

.products{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.products h2{
text-align:center;
margin-bottom:30px;
font-size:28px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:28px;
}

/* ===== Card ===== */

.card{
    background:white;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:.3s;
    text-align:center;
    position:relative;
    cursor:pointer;
}
    

.card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}
    

.card a{
text-decoration:none;
color:inherit;
display:block;
}

/* ===== Card Image Flex Center ===== */

.card-img{
height:240px;
display:flex;
align-items:center;
justify-content:center;
background:white;
padding:15px;
}

.card-img img{
    max-height:250px;     /* ⭐ 放大 */
    max-width:90%;        /* ⭐ 避免貼邊 */
    object-fit:contain;
    transition:transform .4s ease;
}
    

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

.card h3{
padding:15px;
margin:0;
color:#0f2533;
transition:.3s;
}

.card:hover h3{
color:#1976d2;
}


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

.footer{
background:#0f2533;
color:#c7d3db;
text-align:center;
padding:30px 10px;
}


/* ================= LINE ================= */

.line-float{
position:fixed;
right:25px;
bottom:25px;
background:#06C755;
color:white;
padding:14px 22px;
border-radius:40px;
font-weight:600;
letter-spacing:1px;
box-shadow:0 10px 22px rgba(0,0,0,.25);
z-index:9999;
text-decoration:none;
transition:.25s;
}

.line-float:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(0,0,0,.35);
}


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

@media(max-width:768px){

nav{
position:absolute;
right:0;
top:60px;
background:#0f2533;
flex-direction:column;
width:220px;
display:none;
padding:20px;
}

nav.show{display:flex;}

.hamburger{display:block;}

.hero::after{
padding-top:60%;
}

}

/* ================= BRAND INTRO ================= */

.brand-intro{
    padding:40px 20px 30px;
    margin-top:-20px;
    display:flex;
    justify-content:center;   /* ⭐ 真正水平置中 */
    }
    
    .brand-wrap{
    max-width:1100px;
    width:100%;
    text-align:center;        /* ⭐ 文字置中 */
    }
    
    .brand-intro h1{
    font-size:34px;
    font-weight:700;
    margin:0 0 20px 0;        /* ⭐ 移除奇怪偏移 */
    color:#0f2533;
    }
    
    .brand-intro p{
    font-size:18px;
    line-height:1.8;
    color:#556;
    margin:0 auto;
    }
    
    @media(min-width:1024px){
    .brand-intro p{
    white-space:nowrap;
    }
    }