/* ===============================
   YUNHWE - Full Site CSS
   Kozime-inspired clean industrial style
   =============================== */

/* ----- CSS VARIABLES ----- */
:root{
    /* Colors */
    --color-primary:#0F2744;
    --color-secondary:#1a3a5c;
    --gold-400:#e6a952;
    --gold-500:#D5953B;
    --gold-600:#b87e2a;
    --warm-white:#FAF8F5;
    --warm-gray-100:#f5f4f1;
    --warm-gray-200:#EDEBE6;
    --warm-gray-500:#999;
    --warm-gray-700:#555;
    --color-text:#333;
    --color-text-light:#888;
    --color-bg-alt:#fafafa;
    --color-border:#e5e5e5;
    --color-accent:#D5953B;
    --color-bg:#fff;

    /* Typography */
    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    --font-serif:"Georgia","Times New Roman",serif;
    --fs-xs:12px;
    --fs-sm:14px;
    --fs-md:16px;
    --fs-lg:18px;
    --fs-xl:24px;
    --fs-2xl:32px;
    --fs-3xl:40px;
    --fs-4xl:56px;
    --fs-5xl:72px;
    --fs-6xl:96px;

    /* Spacing */
    --sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;
    --sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;
    --sp-96:96px;--sp-128:128px;

    /* Layout */
    --container-width:1240px;
    --header-height:110px;
    --radius-sm:4px;
    --radius-md:8px;
    --radius-lg:12px;
    --t-base:.25s ease;
}

/* ----- RESET ----- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-sans);font-size:var(--fs-md);color:var(--color-text);
    line-height:1.7;background:#fff;-webkit-font-smoothing:antialiased;padding-top:var(--header-height);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit}
input,button{font-family:inherit}

/* ----- TYPOGRAPHY ----- */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--color-primary)}
h1{font-size:clamp(28px,5vw,var(--fs-4xl))}
h2{font-size:clamp(22px,3.5vw,var(--fs-3xl))}
h3{font-size:clamp(18px,2.5vw,var(--fs-xl))}
p{margin-bottom:var(--sp-16)}

/* ----- CONTAINER ----- */
.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--sp-32)}

/* ----- HEADER (Kozime style - always white) ----- */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:1000;height:110px;
    background:#ffffff;border-bottom:1px solid #eee;transition:background .3s ease, box-shadow .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.site-header.scrolled{
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    border-bottom:1px solid #eee;
}

.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:100%;max-width:var(--container-width);margin:0 auto;padding:0 var(--sp-32);
}

/* Logo */
.site-header .logo a{display:flex;align-items:center}

/* Nav list */
.nav-list{display:flex;align-items:center;gap:var(--sp-4)}
.site-header .nav-link{
    color:#333;font-weight:500;font-size:19px;text-decoration:none;
    padding:8px 16px;border-radius:0;transition:color .2s ease;
}
.site-header .nav-link:hover{color:#D5953B;background:transparent}
.site-header .nav-link.active{color:#D5953B}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:var(--sp-16)}

/* Search box - kozime style */
.site-header .search-box{
    display:flex;align-items:center;background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.3);overflow:hidden;height:36px;
    transition:all .2s ease;
}
.site-header .search-box:focus-within{border-color:rgba(213,149,59,.8);background:rgba(255,255,255,.25)}
.site-header .search-box input{
    background:transparent;border:none;padding:0 14px;font-size:14px;
    color:#fff;width:150px;outline:none;height:100%;
}
.site-header .search-box input::placeholder{color:rgba(255,255,255,.6)}
.site-header .search-box button{
    width:40px;height:100%;background:#D5953B;color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;cursor-pointer;
    font-size:15px;transition:background .2s ease;
}
.site-header .scrolled .search-box{background:#fff;border-color:#ddd}
.site-header.scrolled .search-box input{color:#333}
.site-header.scrolled .search-box input::placeholder{color:#999}
.site-header .search-box button:hover{background:#b87e2a}

/* Lang switcher */
.site-header .lang-switcher{display:flex;align-items:center;background:#f5f5f5;border:1px solid #eee;border-radius:4px;overflow:hidden}
.site-header .btn-lang{
    padding:6px 12px;font-size:13px;color:#666;text-decoration:none;
    transition:all .2s ease;
}
.site-header .btn-lang.active{background:#D5953B;color:#fff}
.site-header .btn-lang:hover:not(.active){color:#D5953B}

/* Hamburger */
.hamburger{display:none;background:none;border:none;padding:8px;flex-direction:column;gap:4px}
.hamburger span{display:block;width:22px;height:2px;background:#333;transition:transform .2s}

/* ----- HERO SECTION ----- */
.hero{
    position:relative;overflow:hidden;min-height:100vh;display:flex;
    align-items:center;justify-content:center;text-align:center;
}
.hero-bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    z-index:0;
}
.hero-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(135deg,rgba(15,39,68,.85) 0%,rgba(15,39,68,.55) 100%);
}
.hero-content{
    position:relative;z-index:2;color:#fff;padding:0 var(--sp-32);max-width:900px;
}
.hero-wordmark{
    font-family:var(--font-serif);font-size:clamp(2rem,6vw,72px);
    font-weight:300;color:#fff;letter-spacing:.4em;margin-bottom:var(--sp-32);
    text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.hero-company{
    font-size:clamp(28px,5vw,64px);font-weight:700;color:#fff;margin-bottom:var(--sp-24);
    letter-spacing:.05em;text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-divider{
    width:60px;height:3px;background:var(--gold-500);margin:0 auto var(--sp-32);
}
.hero-subtitle{
    font-size:clamp(16px,2vw,var(--fs-lg));opacity:.95;margin-bottom:var(--sp-48);
    line-height:1.9;
}
.hero-actions{display:flex;gap:var(--sp-16);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-64)}
.hero-slogan{
    font-size:clamp(14px,1.5vw,var(--fs-sm));letter-spacing:.4em;opacity:.6;
    font-family:var(--font-serif);
}
.hero-scroll{
    position:absolute;bottom:var(--sp-32);left:50%;transform:translateX(-50%);
    color:#fff;font-size:11px;letter-spacing:.3em;opacity:.6;z-index:2;
}

/* ----- BUTTONS ----- */
.btn{
    display:inline-block;padding:var(--sp-12) var(--sp-32);
    font-size:var(--fs-md);font-weight:500;text-decoration:none;
    border-radius:var(--radius-sm);transition:all var(--t-base);cursor:pointer;
    border:none;
}
.btn-primary{background:var(--gold-500);color:#fff}
.btn-primary:hover{background:var(--gold-600);transform:translateY(-1px);box-shadow:0 6px 20px rgba(213,149,59,.4)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.btn-outline:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* ----- PAGE BANNER (inner pages) ----- */
.page-banner{
    padding:calc(var(--header-height) + var(--sp-96)) 0 var(--sp-64);
    background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);
    color:#fff;text-align:center;
}
.page-banner h1{color:#fff;margin-bottom:var(--sp-12)}
.page-banner p{opacity:.85}

/* ----- SECTIONS ----- */
.section{padding:var(--sp-96) 0}
.section-alt{background:var(--warm-gray-100)}
.section-header{text-align:center;margin-bottom:var(--sp-64)}
.section-header h2{margin-bottom:var(--sp-12)}
.section-header p{color:var(--warm-gray-500);font-size:var(--fs-lg)}
.section-title{
    display:inline-block;font-size:var(--fs-sm);letter-spacing:.3em;color:var(--gold-500);
    text-transform:uppercase;margin-bottom:var(--sp-16);font-weight:500;
}
.section-headline{
    font-size:clamp(24px,3.5vw,var(--fs-3xl));font-weight:700;color:var(--color-primary);
    margin-bottom:var(--sp-16);line-height:1.3;
}

/* Intro section */
.about-intro{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64);align-items:center;
}
.about-intro-text h2{margin-bottom:var(--sp-24)}
.about-intro-text p{color:var(--warm-gray-700);margin-bottom:var(--sp-16)}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-32);margin-top:var(--sp-48)}
.stat-item{text-align:center}
.stat-num{font-size:var(--fs-3xl);font-weight:700;color:var(--gold-500);font-family:var(--font-serif)}
.stat-label{font-size:var(--fs-sm);color:var(--warm-gray-500);margin-top:var(--sp-4)}

/* Grids */
.grid{display:grid;gap:var(--sp-24)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

/* Category cards */
.category-card{
    background:#fff;padding:var(--sp-32);border-radius:var(--radius-md);
    border-top:3px solid var(--gold-500);box-shadow:0 2px 12px rgba(0,0,0,.04);
    transition:all var(--t-base);text-align:center;
}
.category-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.category-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-8)}
.category-card p{font-size:var(--fs-sm);color:var(--warm-gray-500);margin-bottom:var(--sp-16)}
.category-card .arrow{color:var(--gold-500);font-weight:500;font-size:var(--fs-sm)}

/* Product cards */
.product-card{
    background:#fff;border-radius:var(--radius-md);overflow:hidden;
    border:1px solid var(--color-border);transition:all var(--t-base);
    display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1);border-color:var(--gold-500)}
.product-card-link{display:flex;flex-direction:column;height:100%}
.product-cover{
    aspect-ratio:4/3;background:var(--warm-gray-100);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.product-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-cover img{transform:scale(1.05)}
.product-body{padding:var(--sp-16);flex:1;display:flex;flex-direction:column;justify-content:space-between}
.product-brand{font-size:var(--fs-xs);color:var(--warm-gray-500);letter-spacing:.1em;text-transform:uppercase}
.product-model{font-size:var(--fs-md);font-weight:600;color:var(--color-primary);margin-top:var(--sp-4)}

/* CTA strip */
.cta-strip{
    background:var(--color-primary);color:#fff;padding:var(--sp-48) var(--sp-32);
    text-align:center;
}
.cta-strip h2{color:#fff;margin-bottom:var(--sp-24)}

/* ----- PRODUCT LIST PAGE ----- */
.product-list-filters{
    display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:center;margin-bottom:var(--sp-48);
}
.filter-btn{
    padding:8px 20px;border:1px solid var(--color-border);background:#fff;
    border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--warm-gray-700);
    transition:all var(--t-base);
}
.filter-btn:hover{border-color:var(--gold-500);color:var(--gold-500)}
.filter-btn.active{background:var(--gold-500);border-color:var(--gold-500);color:#fff}

/* ----- CONTACT PAGE ----- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64)}
.contact-info h3{margin-bottom:var(--sp-24)}
.contact-item{display:flex;gap:var(--sp-16);margin-bottom:var(--sp-24)}
.contact-form{display:flex;flex-direction:column;gap:var(--sp-16)}
.form-input, .form-textarea{
    padding:var(--sp-12) var(--sp-16);border:1px solid var(--color-border);
    border-radius:var(--radius-sm);font-size:var(--fs-md);font-family:inherit;
}
.form-input:focus, .form-textarea:focus{outline:none;border-color:var(--gold-500)}
.form-textarea{resize:vertical;min-height:120px}

/* ----- FOOTER ----- */
.footer{
    background:#0a1f36;color:#fff;padding:var(--sp-96) 0 var(--sp-48);
}
.footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-64);margin-bottom:var(--sp-64);
}
.footer-logo-text{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--sp-16);letter-spacing:.06em}
.footer-desc{color:rgba(255,255,255,.6);font-size:var(--fs-sm);line-height:1.9}
.footer-title{font-size:var(--fs-md);font-weight:600;margin-bottom:var(--sp-24);color:#fff}
.footer-links{display:flex;flex-direction:column;gap:var(--sp-12)}
.footer-links a{color:rgba(255,255,255,.55);font-size:var(--fs-sm);transition:color .2s}
.footer-links a:hover{color:var(--gold-500)}
.footer-contact{font-size:var(--fs-sm);color:rgba(255,255,255,.55);line-height:1.9}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-32);
}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-16)}
.footer-copy{font-size:var(--fs-xs);color:rgba(255,255,255,.4);margin:0}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px){
    .grid-4{grid-template-columns:repeat(3,1fr)}
    .grid-5{grid-template-columns:repeat(3,1fr)}
    .about-intro{grid-template-columns:1fr;gap:var(--sp-32)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-48)}
    .contact-grid{grid-template-columns:1fr;gap:var(--sp-48)}
}
@media (max-width: 768px){
    :root{--header-height:90px}
    .section{padding:var(--sp-64) 0}
    .hero{min-height:80vh}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .grid-5{grid-template-columns:repeat(2,1fr)}
    .header-inner{padding:0 var(--sp-16)}
    .site-header .search-box{display:none}
    .site-header .nav-list{display:none}
    .hamburger{display:flex}
    .footer-grid{grid-template-columns:1fr;gap:var(--sp-32)}
    .about-stats{grid-template-columns:1fr 1fr}
    .container{padding:0 var(--sp-16)}
}
@media (max-width: 480px){
    .grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
    .about-stats{grid-template-columns:1fr}
}


/* Logo color states */


/* Nav link states */
.site-header:not(.scrolled) .nav-link{color:#333}
.site-header:not(.scrolled) .nav-link:hover{color:#D5953B;background:rgba(0,0,0,.04)}
.site-header:not(.scrolled) .btn-lang{color:#333}
.site-header:not(.scrolled) .hamburger span{background:#333}

/* ============ LOGO (transparent bg, prominent) ============ */
.site-header .logo-img{
    height:100px;width:auto;max-width:620px;display:block;
    transition:filter .3s ease;
}
.site-header:not(.scrolled) .logo-img{filter:none}

@media (max-width: 1024px) {
    .site-header .logo-img{height:88px;max-width:560px}
}
@media (max-width: 768px) {
    .site-header .logo-img{height:72px;max-width:460px}
    .site-header .search-box{display:none}
    .site-header .nav-list{display:none}
}