/* ═══════════════════════════════════════════════════════════
   YONTON Energy Website — Main Stylesheet
   Mobile-first, zero-framework design system
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
    --bg-page:      #faf9f5;
    --bg-card:      #ffffff;
    --bg-dark:      #0e1b1f;
    --bg-darker:    #080f12;
    --clr-accent:        #00b894;
    --clr-accent-glow:   rgba(0, 184, 148, 0.15);
    --clr-accent-hover:  #00a381;
    --clr-gold:          #d4952b;
    --clr-gold-light:    rgba(212, 149, 43, 0.12);
    --text-primary:   #1a1d1c;
    --text-mid:       #5c605e;
    --text-light:     #919593;
    --text-white:     #ffffff;
    --text-white-dim: rgba(255, 255, 255, 0.55);
    --border:        #e6e3db;
    --radius-sm:     4px;
    --radius:        6px;
    --radius-lg:     12px;
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;
    --font-sans:   -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    --font-display: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
    --container: 1200px;
    --header-height: 72px;
    --topbar-height: 36px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:var(--text-primary);background:var(--bg-page);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--clr-accent);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--clr-accent-hover)}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;letter-spacing:-0.02em;color:var(--text-primary)}
h1{font-size:clamp(2rem,4vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
h4{font-size:1.1rem}
p{margin-bottom:1rem}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--space-lg)}

/* ── Scroll Progress ── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--clr-accent);z-index:10000;width:0%;transition:width 0.1s linear}

/* ── Top Bar ── */
.top-bar{background:var(--bg-dark);height:var(--topbar-height);font-size:0.78rem;color:var(--text-white-dim);position:relative;z-index:1001}
.top-bar__inner{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-height)}
.top-bar__contact{display:flex;align-items:center;gap:var(--space-lg)}
.top-bar__link{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,0.65);transition:color 0.2s ease;font-size:0.78rem}
.top-bar__link:hover{color:var(--clr-accent)}
.top-bar__icon{flex-shrink:0}
.top-bar__social{display:flex;align-items:center;gap:var(--space-md)}

/* Language Switcher */
.lang-switch{font-size:14px;padding:2px 4px;border-radius:3px;transition:background 0.2s}
.lang-switch:hover{background:rgba(255,255,255,0.08)}
.lang-switch--active{background:rgba(0,184,148,0.15)}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:1000;background:var(--bg-page);border-bottom:1px solid transparent;transition:border-color 0.3s ease,box-shadow 0.3s ease;height:var(--header-height)}
.site-header.scrolled{border-bottom-color:var(--border);box-shadow:0 1px 20px rgba(0,0,0,0.04)}
.site-header__inner{display:flex;align-items:center;height:var(--header-height);gap:var(--space-lg)}
.site-header__logo{flex-shrink:0}
.site-header__logo .site-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.01em}
.site-header__logo .custom-logo{max-height:40px;width:auto}
.site-header__nav{flex:1;display:flex;justify-content:flex-end}
.primary-menu{display:flex;list-style:none;gap:2px;align-items:center}
.primary-menu>li{position:relative}
.primary-menu>li>a{display:block;padding:0.5rem 0.9rem;font-size:0.94rem;font-weight:600;color:var(--text-mid);border-radius:var(--radius-sm);transition:color 0.2s ease,background 0.2s ease;cursor:pointer;letter-spacing:0.01em}
.primary-menu>li>a:hover,.primary-menu>li.active>a{color:var(--text-primary);background:rgba(0,0,0,0.04)}

/* ── Language Nav Dropdown ── */
.lang-nav{position:relative}
.lang-nav__toggle{display:flex;align-items:center;gap:5px;padding:0.5rem 0.9rem;font-size:0.94rem;font-weight:600;color:var(--text-mid);background:none;border:none;cursor:pointer;font-family:var(--font-sans);border-radius:var(--radius-sm);transition:color 0.2s ease,background 0.2s ease;letter-spacing:0.01em}
.lang-nav__toggle:hover{color:var(--text-primary);background:rgba(0,0,0,0.04)}
.lang-nav__flag{display:flex;align-items:center;line-height:1}
.lang-nav__flag svg{display:block;border-radius:1px}
.lang-nav__abbr{font-size:0.78rem;letter-spacing:0.02em}
.lang-nav__dropdown{position:absolute;top:100%;right:0;margin-top:8px;width:170px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);list-style:none;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,0.12);display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity 0.2s ease,transform 0.2s ease;z-index:100}
.lang-nav__dropdown.active{opacity:1;pointer-events:auto;transform:translateY(0)}
.lang-nav__option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0.65rem 0.4rem;font-size:0.78rem;font-weight:500;color:var(--text-mid);border-radius:var(--radius);text-decoration:none;transition:background 0.15s ease,color 0.15s ease;text-align:center}
.lang-nav__option:hover{background:rgba(0,0,0,0.04);color:var(--text-primary)}
.lang-nav__option--active{color:var(--clr-accent);font-weight:600;background:rgba(0,184,148,0.06)}
.lang-nav__option .lang-nav__flag svg{width:30px;height:20px}
.lang-nav__option .lang-nav__abbr{font-size:0.72rem;letter-spacing:0.03em}
.site-header__search-toggle{background:none;border:none;cursor:pointer;color:var(--text-light);padding:8px;display:flex;transition:color 0.2s ease}
.site-header__search-toggle:hover{color:var(--text-primary)}

/* ── Search Overlay ── */
.search-overlay{position:fixed;inset:0;z-index:9999;background:rgba(14,27,31,0.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.search-overlay.active{opacity:1;pointer-events:auto}
.search-overlay__inner{width:100%;max-width:600px;padding:var(--space-lg);position:relative}
.search-overlay__form{display:flex;border-bottom:2px solid rgba(255,255,255,0.2);transition:border-color 0.3s ease}
.search-overlay__form:focus-within{border-bottom-color:var(--clr-accent)}
.search-overlay__input{flex:1;background:none;border:none;outline:none;font-size:1.5rem;font-family:var(--font-sans);color:var(--text-white);padding:var(--space-md) 0}
.search-overlay__input::placeholder{color:rgba(255,255,255,0.3)}
.search-overlay__submit{background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;padding:var(--space-md)}
.search-overlay__close{position:absolute;top:-60px;right:0;background:none;border:none;color:rgba(255,255,255,0.5);font-size:2rem;cursor:pointer;line-height:1}

/* ── Mobile Menu Toggle ── */
.site-header__menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-toggle__bar{width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}
.site-header__menu-toggle.active .menu-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header__menu-toggle.active .menu-toggle__bar:nth-child(2){opacity:0}
.site-header__menu-toggle.active .menu-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Sections ── */
.section{padding:var(--space-3xl) 0}
.section--dark{background:var(--bg-dark);color:var(--text-white)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text-white)}
.section--dark .section__desc{color:var(--text-white-dim)}
.section--gray{background:#f0efe9}
.section__header{margin-bottom:var(--space-2xl);text-align:center}
.section__tag{display:inline-block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--clr-accent);margin-bottom:var(--space-sm)}
.section__title{margin-bottom:var(--space-sm)}
.section__title .em{color:var(--clr-accent);font-family:var(--font-display);font-style:italic}
.section__desc{color:var(--text-mid);max-width:600px;margin:0 auto;font-size:1rem}
.section__divider{width:3rem;height:2px;background:var(--clr-accent);margin:var(--space-md) auto 0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:0.9rem;font-weight:600;padding:0.8rem 1.8rem;border-radius:100px;border:none;cursor:pointer;transition:background 0.25s ease,color 0.25s ease,transform 0.25s ease;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--clr-accent);color:var(--text-white)}
.btn--primary:hover{background:var(--clr-accent-hover);color:var(--text-white)}
.btn--outline{background:transparent;color:var(--text-white);border:1.5px solid rgba(255,255,255,0.2)}
.btn--outline:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.btn--ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border)}
.btn--ghost:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.btn--arrow::after{content:'→';font-size:1.1em;transition:transform 0.2s ease}
.btn--arrow:hover::after{transform:translateX(3px)}
.btn--sm{padding:0.5rem 1.2rem;font-size:0.82rem}
.btn--danger{background:#e74c3c;color:#fff}
.btn--danger:hover{background:#c0392b;color:#fff}

/* ── Hero ── */
.hero{background:var(--bg-dark);color:var(--text-white);position:relative;overflow:hidden;padding:calc(var(--space-3xl) + var(--topbar-height)) 0 var(--space-3xl)}
.hero::before{content:'';position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(ellipse at 70% 50%,rgba(0,184,148,0.12) 0%,transparent 70%)}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center}
.hero__content{max-width:600px}
.hero__title{color:var(--text-white);margin-bottom:var(--space-md);line-height:1.1}
.hero__subtitle{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.5rem);font-style:italic;font-weight:400;color:rgba(255,255,255,0.5);margin-bottom:var(--space-lg)}
.hero__desc{color:var(--text-white-dim);font-size:1.05rem;line-height:1.8;margin-bottom:var(--space-lg)}
.hero__actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.hero__image{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(135deg,#1a3a35 0%,#0e1b1f 100%)}
.hero__image img{width:100%;height:100%;object-fit:cover}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:0.3rem}
.hero__scroll-line{width:1px;height:20px;background:rgba(255,255,255,0.2)}
.hero__scroll-arrow{width:8px;height:8px;border-right:1.5px solid rgba(255,255,255,0.25);border-bottom:1.5px solid rgba(255,255,255,0.25);transform:rotate(45deg);animation:scrollBounce 1.6s ease-in-out infinite}
.hero--compact{padding:calc(var(--space-xl) + var(--topbar-height)) 0 var(--space-xl)}
.hero__particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__particle{position:absolute;display:block;width:4px;height:4px;background:var(--clr-accent);border-radius:50%;opacity:0;animation:heroFloat 8s infinite}
@keyframes heroFloat{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:0.6}90%{opacity:0}100%{opacity:0;transform:translateY(-200px) scale(0.3)}}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(5px)}}

/* ── Product Grid ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-md)}
.product-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
.product-card:hover{transform:translateY(-4px);border-color:var(--clr-accent);box-shadow:0 10px 35px rgba(0,0,0,0.06)}
.product-card__image{aspect-ratio:4/3;background:var(--bg-dark);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-style:italic;color:rgba(255,255,255,0.15);transition:transform 0.4s ease}
.product-card__image img{width:100%;height:100%;object-fit:cover}
.product-card:hover .product-card__image{transform:scale(1.03)}
.product-card__body{padding:var(--space-md)}
.product-card__series{font-family:var(--font-display);font-size:0.82rem;font-style:italic;color:var(--clr-accent);margin-bottom:4px}
.product-card__name{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;line-height:1.35}
.product-card__spec{font-size:0.82rem;color:var(--text-light);line-height:1.5}

/* Dark product cards */
.product-grid--dark .product-card{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)}
.product-grid--dark .product-card:hover{border-color:rgba(0,184,148,0.35);box-shadow:0 10px 35px rgba(0,0,0,0.35)}
.product-grid--dark .product-card__name{color:var(--text-white)}
.product-grid--dark .product-card__spec{color:rgba(255,255,255,0.4)}

/* ── Brochure / Detail Sections ── */
.brochure-section{background:var(--bg-dark);color:var(--text-white);padding:var(--space-3xl) 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.brochure__top{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap}
.brochure__tag{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--clr-accent);background:var(--clr-accent-glow);padding:0.35rem 0.9rem;border-radius:100px}
.brochure__series{font-family:var(--font-display);font-size:1.8rem;font-style:italic;color:rgba(255,255,255,0.45)}
.brochure__hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-2xl);align-items:center;margin-bottom:var(--space-xl)}
.brochure__image{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:#111;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;font-style:italic;color:rgba(255,255,255,0.1)}
.brochure__image img{width:100%;height:100%;object-fit:cover}
.brochure__content h3{color:var(--text-white);margin-bottom:var(--space-md)}
.brochure__content p{color:var(--text-white-dim);font-size:1rem;line-height:1.8}
.brochure-features{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.brochure-features li{padding:var(--space-md);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius)}
.brochure-features li strong{display:block;color:var(--clr-accent);font-size:0.82rem;font-weight:700;margin-bottom:4px}
.brochure-features li span{color:var(--text-white);font-size:0.95rem}

/* ── Specs Table ── */
.specs-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.specs-table th,.specs-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.specs-table th{width:200px;font-weight:500;color:var(--text-light);background:var(--bg-page)}
.specs-table td{color:var(--text-primary)}

/* ── About ── */
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-2xl);align-items:center}
.about-grid__image{aspect-ratio:5/4;border-radius:var(--radius);overflow:hidden;background:var(--bg-dark);display:flex;align-items:center;justify-content:center}
.about-grid__image img{width:100%;height:100%;object-fit:cover}
.about-grid__text p{font-size:1rem;color:var(--text-mid);line-height:1.85;margin-bottom:var(--space-md)}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);padding-top:var(--space-xl);margin-top:var(--space-xl);border-top:1px solid var(--border)}
.stat{text-align:center;padding:var(--space-md)}
.stat__num{font-family:var(--font-display);font-size:2.8rem;color:var(--clr-accent);line-height:1}
.stat__label{font-size:0.82rem;color:var(--text-light);margin-top:0.4rem}
.stats--dark{border-top-color:rgba(255,255,255,0.06)}
.stats--dark .stat__num{color:var(--text-white);font-family:var(--font-sans);font-weight:700}
.stats--dark .stat__label{color:var(--text-white-dim)}

/* ── Case Cards ── */
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-md)}
.case-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;transition:transform 0.3s ease}
.case-card:hover{transform:translateY(-4px)}
.case-card__bg{width:100%;height:100%}
.case-card__bg img{width:100%;height:100%;object-fit:cover}
.case-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 30%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-lg)}
.case-card__title{color:var(--text-white);font-size:1.15rem;font-weight:700}
.case-card__sub{color:rgba(255,255,255,0.55);font-size:0.85rem;margin-top:2px}

/* ── Config Cards (certifications) ── */
.config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md)}
.config-card{background:rgba(255,255,255,0.04);border-radius:var(--radius);padding:var(--space-lg);text-align:center;border:1px solid rgba(255,255,255,0.06)}
.config-card__kwh{font-family:var(--font-display);font-size:2rem;color:var(--clr-accent);line-height:1}
.config-card__name{font-size:0.9rem;font-weight:600;color:var(--text-white);margin-top:4px}
.config-card__info{font-size:0.78rem;color:var(--text-white-dim);margin-top:2px}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-2xl);align-items:start}
.contact-info{padding:var(--space-xl);background:var(--bg-dark);color:var(--text-white);border-radius:var(--radius-lg)}
.contact-info h3{color:var(--text-white);margin-bottom:var(--space-lg)}
.contact-info__item{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);font-size:0.95rem}
.contact-info__item svg{flex-shrink:0;margin-top:3px;color:var(--clr-accent)}
.contact-form-wrap{padding:var(--space-xl);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}

/* ── Form Styles ── */
.form-group{margin-bottom:var(--space-md)}
.form-group label{font-size:0.85rem;font-weight:600;color:var(--text-primary);margin-bottom:4px;display:block}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.7rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-sans);font-size:0.95rem;color:var(--text-primary);background:var(--bg-page);transition:border-color 0.2s ease}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--clr-accent)}
.form-group textarea{min-height:120px;resize:vertical}
.form-msg{padding:1rem;border-radius:var(--radius);margin-bottom:var(--space-md);text-align:center;font-weight:500}
.form-msg--success{background:rgba(0,184,148,0.1);border:1px solid var(--clr-accent);color:var(--clr-accent)}
.form-msg--error{background:rgba(231,76,60,0.1);border:1px solid #e74c3c;color:#e74c3c}

/* ── Breadcrumb ── */
.breadcrumb{padding:var(--space-md) 0;font-size:0.82rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap}
.breadcrumb li{color:var(--text-light)}
.breadcrumb li:last-child{color:var(--text-primary)}
.breadcrumb .breadcrumb-sep{margin:0 0.5rem;color:var(--border)}

/* ── Pagination ── */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:var(--space-xl)}
.pagination span,.pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:500;border:1px solid var(--border);transition:all 0.2s ease;cursor:pointer;padding:0 8px}
.pagination .current{background:var(--clr-accent);border-color:var(--clr-accent);color:var(--text-white)}
.pagination a:hover{border-color:var(--clr-accent);color:var(--clr-accent)}

/* ── Sidebar ── */
.with-sidebar{display:grid;grid-template-columns:260px 1fr;gap:var(--space-xl);align-items:start}
.sidebar{position:sticky;top:calc(var(--header-height) + var(--space-lg))}
.sidebar__title{font-size:0.85rem;font-weight:700;margin-bottom:var(--space-sm)}
.sidebar__list{list-style:none}
.sidebar__list li a{display:block;padding:0.5rem 0;font-size:0.9rem;color:var(--text-mid);border-bottom:1px solid var(--border);transition:color 0.15s ease}
.sidebar__list li a:hover,.sidebar__list li.current a{color:var(--clr-accent);font-weight:600}

/* ── News Cards ── */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-lg)}
.news-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
.news-card:hover{transform:translateY(-4px);border-color:var(--clr-accent);box-shadow:0 10px 35px rgba(0,0,0,0.06)}
.news-card__thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-dark)}
.news-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.news-card:hover .news-card__img{transform:scale(1.04)}
.news-card__placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a3a35,#0e1b1f);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;font-style:italic;color:rgba(255,255,255,0.1)}
.news-card__body{padding:var(--space-md)}
.news-card__date{font-size:0.78rem;color:var(--text-light);margin-bottom:0.3rem}
.news-card__title{font-size:1.05rem;font-weight:700;margin-bottom:0.4rem;line-height:1.35}
.news-card__title a{color:var(--text-primary)}
.news-card__title a:hover{color:var(--clr-accent)}
.news-card__excerpt{font-size:0.85rem;color:var(--text-mid);line-height:1.6;margin-bottom:var(--space-sm)}
.news-card__more{font-size:0.82rem;font-weight:600;color:var(--clr-accent)}
.news-card__more:hover{color:var(--clr-accent-hover)}
.news-grid--dark .news-card{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)}
.news-grid--dark .news-card__title a{color:var(--text-white)}
.news-grid--dark .news-card__title a:hover{color:var(--clr-accent)}
.news-grid--dark .news-card__date{color:rgba(255,255,255,0.35)}
.news-grid--dark .news-card__excerpt{color:rgba(255,255,255,0.45)}

/* ── News Content (single article) ── */
.news-content{font-size:1rem;line-height:1.85;color:var(--text-primary)}
.news-content p{margin-bottom:var(--space-md)}
.news-content h2,.news-content h3{color:var(--text-primary);margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.news-content ul,.news-content ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}
.news-content li{margin-bottom:0.3rem}
.news-content blockquote{border-left:3px solid var(--clr-accent);padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0;background:var(--bg-page);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--text-mid)}
.news-content img{border-radius:var(--radius);margin:var(--space-md) 0}
.article-thumbnail{margin-bottom:var(--space-lg);border-radius:var(--radius-lg);overflow:hidden}
.article-thumbnail img{width:100%;display:block}

/* ── Careers ── */
.careers-list{display:flex;flex-direction:column;gap:var(--space-md);max-width:900px;margin:0 auto}
.career-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-lg);transition:border-color 0.2s}
.career-card:hover{border-color:var(--clr-accent)}
.career-card__header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.career-card__title{font-size:1.2rem;font-weight:700}
.career-card__meta{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-md)}
.career-card__tag{display:inline-flex;align-items:center;gap:4px;font-size:0.82rem;color:var(--text-light);background:var(--bg-page);padding:0.25rem 0.75rem;border-radius:100px}
.career-card__tag svg{color:var(--clr-accent)}
.career-card__section{margin-top:var(--space-md)}
.career-card__section h4{font-size:0.9rem;color:var(--clr-accent);margin-bottom:0.4rem}

/* ── 404 ── */
.error404{padding:var(--space-3xl) 0;text-align:center}
.error404__code{font-family:var(--font-display);font-size:8rem;color:var(--clr-accent);line-height:1;opacity:0.3}
.error404 h2{margin:var(--space-md) 0}
.error404 p{color:var(--text-mid);margin-bottom:var(--space-lg)}

/* ── Footer ── */
.site-footer{background:var(--bg-darker);color:var(--text-white-dim);padding:var(--space-3xl) 0 0;font-size:0.9rem}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--space-xl);padding-bottom:var(--space-2xl)}
.site-footer__heading{font-size:1rem;font-weight:700;color:var(--text-white);margin-bottom:var(--space-md)}
.site-footer__desc{font-size:0.85rem;color:var(--text-white-dim);line-height:1.7;margin-bottom:var(--space-md)}
.site-footer__social{display:flex;gap:var(--space-sm)}
.site-footer__social a{color:rgba(255,255,255,0.35);transition:color 0.2s ease;display:flex}
.site-footer__social a:hover{color:var(--clr-accent)}
.site-footer__menu{list-style:none}
.site-footer__menu li{margin-bottom:0.5rem}
.site-footer__menu li a{color:var(--text-white-dim);font-size:0.85rem;transition:color 0.2s ease}
.site-footer__menu li a:hover{color:var(--clr-accent)}
.site-footer__contact{list-style:none}
.site-footer__contact li{display:flex;gap:0.6rem;margin-bottom:0.65rem;font-size:0.85rem;color:var(--text-white-dim)}
.site-footer__contact li svg{flex-shrink:0;margin-top:2px;color:var(--clr-accent)}
.site-footer__contact li a{color:var(--text-white-dim)}
.site-footer__contact li a:hover{color:var(--clr-accent)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,0.06);padding:var(--space-lg) 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}
.site-footer__copyright{font-size:0.82rem;color:rgba(255,255,255,0.35);margin-bottom:0}
.site-footer__legal a{font-size:0.82rem;color:rgba(255,255,255,0.35)}
.site-footer__legal a:hover{color:var(--clr-accent)}

/* ── Admin Panel ── */
.admin-body{background:#f0f2f5;min-height:100vh}
.admin-login{max-width:400px;margin:100px auto;padding:var(--space-xl);background:#fff;border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.admin-login h2{text-align:center;margin-bottom:var(--space-lg)}
.admin-header{background:var(--bg-dark);color:#fff;padding:var(--space-sm) var(--space-lg);display:flex;justify-content:space-between;align-items:center}
.admin-header a{color:rgba(255,255,255,0.7)}
.admin-header a:hover{color:#fff}
.admin-nav{background:#fff;border-bottom:1px solid var(--border);padding:0 var(--space-lg)}
.admin-nav ul{list-style:none;display:flex;gap:0}
.admin-nav li a{display:block;padding:1rem 1.2rem;color:var(--text-mid);font-weight:500;font-size:0.9rem;border-bottom:2px solid transparent;transition:color 0.15s,border-color 0.15s}
.admin-nav li a:hover,.admin-nav li a.active{color:var(--clr-accent);border-bottom-color:var(--clr-accent)}
.admin-content{padding:var(--space-lg);max-width:1200px}
.admin-table{width:100%;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.06);border-collapse:collapse}
.admin-table th,.admin-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:0.9rem}
.admin-table th{background:var(--bg-page);font-weight:600;color:var(--text-mid)}
.admin-table tr:hover td{background:#fafafa}
.admin-table .badge{display:inline-block;padding:0.2rem 0.6rem;border-radius:100px;font-size:0.75rem;font-weight:600}
.badge--read{background:#e8f5e9;color:#2e7d32}
.badge--unread{background:#fff3e0;color:#e65100}
.admin-form{max-width:700px;background:#fff;padding:var(--space-xl);border-radius:var(--radius-lg);box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.admin-form label{font-weight:600;margin-bottom:4px;display:block;font-size:0.85rem}
.admin-form input,.admin-form textarea,.admin-form select{width:100%;padding:0.6rem 0.8rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-sans);font-size:0.9rem;margin-bottom:var(--space-md)}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{outline:none;border-color:var(--clr-accent)}
.admin-actions{display:flex;gap:var(--space-sm)}

/* ── Utility ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}
.text-right{text-align:right}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mb-sm{margin-bottom:var(--space-sm)}
.mb-md{margin-bottom:var(--space-md)}
.mb-lg{margin-bottom:var(--space-lg)}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}

/* ── Responsive ── */
@media(max-width:1024px){
    :root{--space-3xl:5rem;--space-2xl:3rem}
    .site-footer__grid{grid-template-columns:1fr 1fr}
    .hero__inner,.about-grid,.contact-grid,.brochure__hero{grid-template-columns:1fr}
    .hero__image{order:-1}
    .stats{grid-template-columns:repeat(2,1fr)}
    .with-sidebar{grid-template-columns:1fr}
    .sidebar{position:static}
    .news-grid{grid-template-columns:1fr}
    .case-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    :root{--space-3xl:4rem;--header-height:60px}
    .top-bar{display:none}
    .site-header__menu-toggle{display:flex}
    .site-header__nav{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:var(--bg-page);flex-direction:column;justify-content:flex-start;padding:var(--space-lg);opacity:0;pointer-events:none;transition:opacity 0.3s ease;overflow-y:auto}
    .site-header__nav.active{opacity:1;pointer-events:auto}
    .primary-menu{flex-direction:column;gap:0}
    .primary-menu>li>a{font-size:1.05rem;padding:0.8rem 0;border-bottom:1px solid var(--border)}
    .lang-nav__toggle{width:100%;justify-content:center}
    .lang-nav__dropdown{right:auto;left:50%;transform:translate(-50%,-6px)}
    .lang-nav__dropdown.active{transform:translate(-50%,0)}
    .product-grid{grid-template-columns:repeat(2,1fr)}
    .case-grid{grid-template-columns:1fr}
    .site-footer__grid{grid-template-columns:1fr}
    .site-footer__bottom{flex-direction:column;text-align:center}
    .brochure-features{grid-template-columns:1fr}
    .config-grid{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat__num{font-size:2rem}
    .news-grid{grid-template-columns:1fr}
    .hero{padding:calc(var(--space-2xl) + var(--topbar-height)) 0 var(--space-2xl)}
}
@media(max-width:480px){
    .product-grid{grid-template-columns:1fr}
    .case-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    .container{padding:0 var(--space-sm)}
    .hero__actions{flex-direction:column}
    .btn{justify-content:center}
}
