/*
Theme Name: Yue Laikai Energy Group
Theme URI: https://example.com/
Author: Yue Laikai Energy Group
Description: Custom English corporate energy website theme for Yue Laikai Energy Group. WordPress classic theme with product management, theme settings and multilingual-ready language switcher.
Version: 1.3.0
Text Domain: yuelai-energy
*/


/* =========================================================
   YUE LAIKAI GLOBAL DESIGN SYSTEM
   ========================================================= */

:root{

    /* =========================
       Brand Colors
       ========================= */

    --ink:#07111f;

    --blue:#0d6bff;

    --cyan:#54c9ff;

    --muted:#6f7f91;

    --line:#e6ebf1;

    --soft:#f4f7fa;

    --white:#fff;


    /* =========================
       Yue Laikai Gradient System
       ========================= */

    --yla-navy:#07182f;

    --yla-blue:#153a61;

    --yla-light-blue:#6db6d8;

    --yla-gradient:
        linear-gradient(
            120deg,
            #07182f 0%,
            #153a61 55%,
            #6db6d8 100%
        );

    --yla-gradient-dark:
        linear-gradient(
            135deg,
            #061522 0%,
            #0c2743 48%,
            #1b5275 100%
        );

    --yla-gradient-soft:
        linear-gradient(
            135deg,
            #f7fafc 0%,
            #edf5f9 55%,
            #e3f0f6 100%
        );


    /* =========================
       Image Overlay
       ========================= */

    --yla-overlay:
        linear-gradient(
            90deg,
            rgba(3,14,31,.82),
            rgba(3,14,31,.35) 58%,
            rgba(3,14,31,.06)
        );

    --yla-overlay-bottom:
        linear-gradient(
            180deg,
            rgba(7,24,47,0) 35%,
            rgba(7,24,47,.78) 100%
        );
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    color:var(--ink);

    background:#fff;
}

a{
    text-decoration:none;
    color:inherit;
}

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


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container{
    width:min(
        1240px,
        calc(100% - 48px)
    );

    margin:auto;
}


/* =========================================================
   GLOBAL BRAND GRADIENT UTILITIES
   ========================================================= */

/*
   可以给任何 section 增加：

   class="gradient-section"

   就会自动变成悦来凯品牌渐变。
*/

.gradient-section{
    position:relative;

    overflow:hidden;

    color:#fff;

    background:
        var(--yla-gradient);
}


/*
   深色渐变区域
*/

.gradient-section-dark{
    position:relative;

    overflow:hidden;

    color:#fff;

    background:
        var(--yla-gradient-dark);
}


/*
   浅色渐变区域
*/

.gradient-section-soft{
    position:relative;

    overflow:hidden;

    background:
        var(--yla-gradient-soft);
}


/* =========================================================
   TOP BAR
   ========================================================= */

.site-top{
    height:34px;

    background:#05070a;

    color:#cbd3dd;

    font-size:12px;
}

.site-top .container{
    height:100%;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:22px;
}


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

.site-header{
    position:absolute;

    top:34px;
    left:0;
    right:0;

    z-index:50;

    color:#fff;

    border-bottom:
        1px solid
        rgba(255,255,255,.15);
}

.site-header .inner{
    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.brand{
    display:flex;

    align-items:center;

    gap:12px;

    font-weight:800;

    letter-spacing:.08em;
}

.brand-mark{
    width:34px;
    height:34px;

    border:
        1px solid
        rgba(255,255,255,.8);

    display:grid;

    place-items:center;

    font-size:12px;
}

.brand span{
    font-size:16px;
}

.mobile-nav-toggle{
    display:none;
}

.main-nav{
    display:flex;

    gap:28px;

    align-items:center;

    font-size:13px;
}

.main-nav a{
    opacity:.92;

    transition:.2s;
}

.main-nav a:hover{
    opacity:1;

    color:#fff;
}


/* =========================================================
   LANGUAGE
   ========================================================= */

.lang-switch{
    position:relative;
}

.lang-switch button{
    border:0;

    background:transparent;

    color:inherit;

    cursor:pointer;

    font-size:13px;
}

.lang-menu{
    position:absolute;

    right:0;
    top:24px;

    min-width:150px;

    background:#fff;

    color:#18212d;

    border:
        1px solid
        #e5e9ef;

    display:none;

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.15);
}

.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu{
    display:block;
}

.lang-menu a{
    display:block;

    padding:10px 12px;
}

.lang-menu a:hover{
    background:#f2f5f8;
}


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

.hero{
    position:relative;

    min-height:760px;

    color:#fff;

    overflow:hidden;

    background:
        var(--yla-gradient-dark);
}

.hero-bg{
    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;
}

.hero:after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,29,.70),
            rgba(4,15,29,.12) 55%,
            rgba(4,15,29,.38)
        );
}

.hero-grid{
    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    opacity:.25;
}

.hero-content{
    position:relative;

    z-index:2;

    min-height:760px;

    display:flex;

    align-items:center;
}

.hero-copy{
    max-width:760px;

    padding-top:70px;
}

.eyebrow{
    font-size:12px;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:#9fd9ff;

    margin-bottom:22px;
}

.hero h1{
    font-size:
        clamp(
            48px,
            6vw,
            88px
        );

    line-height:.98;

    margin:0 0 24px;

    max-width:820px;
}

.hero p{
    font-size:20px;

    line-height:1.6;

    color:#e4eef7;

    max-width:620px;

    margin:0 0 34px;
}

.hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:0 22px;

    border:
        1px solid
        rgba(255,255,255,.45);

    color:#fff;

    font-size:13px;
}

.btn.primary{
    background:#fff;

    color:#0b1827;

    border-color:#fff;
}

.btn.dark{
    background:#0c1827;

    border-color:#0c1827;
}


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

.hero-frame{
    position:absolute;

    right:6%;

    top:29%;

    width:260px;

    height:320px;

    border:
        1px solid
        rgba(255,255,255,.45);

    z-index:2;
}

.hero-frame:before,
.hero-frame:after{
    content:"";

    position:absolute;

    border:
        1px solid
        rgba(255,255,255,.3);
}

.hero-frame:before{
    inset:22px;
}

.hero-frame:after{
    left:22px;
    right:22px;

    top:50%;
    bottom:50%;
}


/* =========================================================
   FLOAT TOOLS
   ========================================================= */

.float-tools{
    position:fixed;

    right:18px;

    bottom:20px;

    z-index:60;

    display:flex;

    flex-direction:column;

    gap:8px;
}

.float-tools a{
    width:42px;

    height:42px;

    border-radius:50%;

    background:#0a1727;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:12px;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.18);
}


/* =========================================================
   GLOBAL SECTION
   ========================================================= */

.section{
    padding:110px 0;
}

.section-kicker{
    font-size:11px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--blue);

    margin-bottom:12px;
}

.section-title{
    font-size:42px;

    line-height:1.12;

    margin:0 0 18px;
}

.section-sub{
    font-size:16px;

    color:var(--muted);

    line-height:1.8;

    max-width:760px;
}


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

.products-section{
    background:
        var(--yla-gradient-soft);
}

.product-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;

    margin-top:46px;
}

.product-card{
    position:relative;

    background:#fff;

    border:
        1px solid
        #e4eaf0;

    overflow:hidden;

    min-height:390px;

    padding:26px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.product-card:hover{
    transform:translateY(-5px);

    border-color:
        rgba(21,58,97,.25);

    box-shadow:
        0 18px 45px
        rgba(7,24,47,.10);
}

.product-card .model{
    font-size:56px;

    line-height:1;

    color:#d8dde3;

    font-weight:800;

    letter-spacing:-.04em;
}

.product-card .series{
    font-size:12px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#657487;
}

.product-card img{
    width:100%;

    height:210px;

    object-fit:contain;

    margin-top:12px;

    transition:
        transform .5s ease;
}

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

.product-card h3{
    font-size:18px;

    margin:12px 0 4px;
}

.product-card p{
    font-size:13px;

    line-height:1.6;

    color:var(--muted);

    margin:0;
}

.product-card .more{
    margin-top:18px;

    font-size:12px;

    color:#0d6bff;
}


/* =========================================================
   PRODUCT IMAGE GRADIENT OVERLAY
   ========================================================= */

.product-card::after{
    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:0;

    height:3px;

    background:
        var(--yla-gradient);

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .35s ease;
}

.product-card:hover::after{
    transform:scaleX(1);
}


/* =========================================================
   DARK SECTION
   ========================================================= */

.dark-section{
    background:
        var(--yla-gradient-dark);

    color:#fff;
}

.stat-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;

    margin-top:48px;
}

.stat{
    padding:24px 0;

    border-top:
        1px solid
        rgba(255,255,255,.16);
}

.stat strong{
    font-size:48px;

    line-height:1.1;

    display:block;
}

.stat span{
    display:block;

    color:#8fa1b6;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.14em;

    margin-top:8px;
}


/* =========================================================
   ABOUT / VISION
   ========================================================= */

.split{
    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:56px;

    align-items:center;
}


/*
   修正后的 Vision Card
*/

.vision-card{
    position:relative;

    min-height:440px;

    overflow:hidden;

    background:
        var(--yla-gradient-dark);
}

.vision-card img{
    width:100%;

    min-height:440px;

    height:100%;

    object-fit:cover;

    position:relative;

    z-index:0;

    background:
        var(--yla-gradient-dark);
}


/*
   图片蓝色科技渐变蒙版
*/

.vision-card:before{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(84,201,255,.35),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(7,24,47,.15),
            rgba(5,25,45,.68)
        );

    pointer-events:none;
}


/*
   YUE LAIKAI 品牌字
*/

.vision-card:after{
    content:"YUE LAIKAI";

    position:absolute;

    right:28px;

    bottom:22px;

    z-index:2;

    font-size:64px;

    font-weight:800;

    letter-spacing:.06em;

    color:
        rgba(255,255,255,.06);

    pointer-events:none;
}


/* =========================================================
   NEWS
   ========================================================= */

.news-grid{
    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    gap:28px;

    margin-top:40px;
}

.news-feature{
    background:
        var(--yla-gradient-soft);

    padding:34px;

    min-height:330px;
}

.news-list{
    display:grid;

    gap:1px;

    background:#e6ebf1;
}

.news-item{
    background:#fff;

    padding:24px;

    display:flex;

    gap:24px;

    transition:
        background .25s ease;
}

.news-item:hover{
    background:#f7fafc;
}

.news-date{
    min-width:86px;

    font-size:12px;

    color:#738296;
}

.news-item h3{
    margin:0 0 8px;

    font-size:17px;
}

.news-item p{
    margin:0;

    color:var(--muted);

    font-size:13px;

    line-height:1.7;
}


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

.footer{
    background:#050a11;

    color:#fff;

    padding:70px 0 26px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.4fr 1fr 1fr 1fr;

    gap:40px;
}

.footer h4{
    font-size:12px;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#8da0b4;

    margin:0 0 16px;
}

.footer a,
.footer p{
    color:#c1ccd8;

    font-size:13px;

    line-height:1.8;
}

.footer-bottom{
    margin-top:50px;

    padding-top:20px;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    color:#748397;

    font-size:12px;

    display:flex;

    justify-content:space-between;

    gap:20px;
}


/* =========================================================
   INNER PAGE HERO
   ========================================================= */

.page-hero{
    position:relative;

    overflow:hidden;

    background:
        var(--yla-gradient);

    color:#fff;

    padding:170px 0 100px;
}


/*
   Inner page hero 增加柔和科技光
*/

.page-hero:after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(109,182,216,.24),
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(3,14,31,.16),
            transparent 65%
        );
}

.page-hero .container{
    position:relative;

    z-index:2;
}

.page-hero h1{
    font-size:58px;

    margin:0 0 16px;
}

.page-hero p{
    max-width:760px;

    color:#d1e0eb;

    line-height:1.8;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-wrap{
    padding:80px 0;
}


/* =========================================================
   PRODUCT DETAIL HERO
   ========================================================= */

.product-detail-hero{
    position:relative;

    overflow:hidden;

    background:
        var(--yla-gradient);

    color:#fff;

    padding:170px 0 90px;
}

.product-detail-hero:after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(109,182,216,.25),
            transparent 38%
        );
}

.product-detail-hero .container{
    position:relative;

    z-index:2;
}

.product-detail{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    align-items:center;
}

.product-detail img{
    max-height:520px;

    object-fit:contain;

    margin:auto;
}

.detail-title{
    font-size:64px;

    line-height:1;

    margin:0 0 14px;
}

.detail-sub{
    font-size:20px;

    line-height:1.55;

    color:#c5d5e2;
}

.meta-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;

    margin-top:40px;
}

.meta-box{
    border:
        1px solid
        rgba(255,255,255,.16);

    padding:20px;

    background:
        rgba(255,255,255,.025);
}

.meta-box strong{
    display:block;

    font-size:34px;
}

.meta-box span{
    color:#8da3b8;

    font-size:12px;

    text-transform:uppercase;
}


/* =========================================================
   TABLE
   ========================================================= */

.table{
    width:100%;

    border-collapse:collapse;
}

.table td{
    padding:14px 12px;

    border-bottom:
        1px solid
        var(--line);

    font-size:14px;
}

.table td:first-child{
    font-weight:700;

    width:32%;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.article-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr) 320px;

    gap:50px;
}

.article h2{
    margin-top:42px;

    font-size:28px;
}

.article p{
    font-size:16px;

    line-height:1.95;

    color:#314154;
}

.article .lead{
    font-size:20px;

    color:#4d5c6d;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
    position:sticky;

    top:110px;

    height:max-content;
}

.sidebar-card{
    border:
        1px solid
        var(--line);

    padding:22px;

    margin-bottom:18px;
}

.sidebar-card h3{
    font-size:13px;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin:0 0 16px;
}

.sidebar-card a{
    display:block;

    padding:9px 0;

    color:#56687b;

    font-size:13px;
}


/* =========================================================
   RECOMMEND
   ========================================================= */

.recommend{
    background:
        var(--yla-gradient-soft);

    padding:80px 0;
}

.recommend-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.recommend-card{
    background:#fff;

    border:
        1px solid
        #e3e8ed;

    padding:24px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.recommend-card:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(7,24,47,.08);
}

.recommend-card .tag{
    font-size:10px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#0d6bff;
}

.recommend-card h3{
    font-size:18px;

    line-height:1.45;
}


/* =========================================================
   ADMIN
   ========================================================= */

.admin-note{
    font-size:12px;

    color:#748397;
}


/* =========================================================
   PRODUCT DETAIL EDITOR
   ========================================================= */

.product-gallery{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;

    margin-top:34px;
}

.product-gallery img{
    width:100%;

    height:250px;

    object-fit:contain;

    background:#f5f8fb;

    border:
        1px solid
        #e6ebf1;
}

.adv-grid{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:14px;

    margin-top:40px;
}

.adv-card{
    padding:24px;

    border:
        1px solid
        var(--line);

    background:#fff;

    min-height:190px;
}

.adv-card .num{
    font-size:11px;

    letter-spacing:.18em;

    color:var(--blue);
}

.adv-card h3{
    font-size:18px;

    margin:18px 0 8px;
}

.adv-card p{
    font-size:13px;

    color:var(--muted);

    line-height:1.7;

    margin:0;
}

.app-grid{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:16px;

    margin-top:38px;
}

.app-card{
    background:#fff;

    border:
        1px solid
        var(--line);

    overflow:hidden;
}

.app-card img{
    width:100%;

    height:170px;

    object-fit:cover;

    background:#eef3f7;
}

.app-card .app-body{
    padding:18px;
}

.app-card h3{
    font-size:16px;

    margin:0 0 8px;
}

.app-card p{
    font-size:12px;

    color:var(--muted);

    line-height:1.65;

    margin:0;
}

.download-row{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:24px;
}

.detail-copy{
    max-width:650px;
}

.detail-copy .lead{
    color:#bfcfde;

    font-size:18px;

    line-height:1.8;
}


/* =========================================================
   ADMIN FORM
   ========================================================= */

.admin-section-title{
    margin:28px 0 10px;

    font-size:15px;

    border-bottom:
        1px solid
        #e2e6ea;

    padding-bottom:8px;
}

.yuelai-repeat-table{
    width:100%;

    border-collapse:collapse;
}

.yuelai-repeat-table td{
    padding:8px 6px;

    vertical-align:top;
}

.yuelai-repeat-table input,
.yuelai-repeat-table textarea{
    width:100%;
}

.yuelai-media-row{
    display:flex;

    gap:8px;

    align-items:center;
}

.yuelai-media-row input{
    flex:1;
}


/* =========================================================
   HOMEPAGE HERO
   独立命名空间
   ========================================================= */

.yl-home-hero{
    position:relative;

    width:100%;

    height:760px;

    min-height:760px;

    overflow:hidden;

    background:
        var(--yla-gradient-dark);

    color:#fff;
}

.yl-home-hero-slides{
    position:absolute;

    inset:0;

    z-index:0;
}

.yl-home-hero-slide{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.yl-home-hero-slide.is-active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.yl-home-hero-image{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    transform:scale(1.04);

    transition:
        transform 7s
        cubic-bezier(.2,.6,.3,1);
}

.yl-home-hero-slide.is-active
.yl-home-hero-image{
    transform:scale(1);
}


/* =========================================================
   HOMEPAGE HERO OVERLAY
   ========================================================= */

.yl-home-hero-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,13,23,.87),
            rgba(3,16,28,.56) 42%,
            rgba(3,13,22,.18)
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.30)
        );
}


/* =========================================================
   HOMEPAGE HERO GRID
   ========================================================= */

.yl-home-hero-grid{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:90px 90px;

    opacity:.18;
}


/* =========================================================
   HOMEPAGE HERO CONTENT
   ========================================================= */

.yl-home-hero-content{
    position:relative;

    z-index:4;

    height:100%;

    min-height:760px;

    display:flex;

    align-items:center;
}

.yl-home-hero-copy{
    position:absolute;

    left:0;

    top:50%;

    width:min(
        820px,
        100%
    );

    opacity:0;

    visibility:hidden;

    transform:
        translate3d(
            0,
            calc(-50% + 30px),
            0
        );

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.22,.61,.36,1),
        visibility .75s ease;
}

.yl-home-hero-copy.is-active{
    opacity:1;

    visibility:visible;

    transform:
        translate3d(
            0,
            -50%,
            0
        );
}

.yl-home-hero-eyebrow{
    font-size:12px;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:#86e2ff;

    margin-bottom:20px;
}

.yl-home-hero-copy h1{
    margin:0 0 24px;

    font-size:
        clamp(
            52px,
            6vw,
            88px
        );

    line-height:.98;

    font-weight:500;

    letter-spacing:-.04em;

    color:#fff;
}

.yl-home-hero-copy p{
    max-width:700px;

    margin:0 0 32px;

    font-size:18px;

    line-height:1.72;

    color:#dceaf2;
}

.yl-home-hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.yl-home-hero-button{
    min-height:52px;

    padding:0 25px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:14px;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.yl-home-hero-button:hover{
    transform:
        translateY(-2px);
}

.yl-home-hero-primary{
    background:#fff;

    color:#071624;

    border:
        1px solid
        #fff;
}

.yl-home-hero-primary span{
    margin-left:14px;

    font-size:18px;
}

.yl-home-hero-secondary{
    color:#fff;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.38);

    backdrop-filter:
        blur(8px);
}

.yl-home-hero-secondary:hover{
    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.62);
}


/* =========================================================
   HOMEPAGE HERO CONTROLS
   ========================================================= */

.yl-home-hero-controls{
    position:absolute;

    left:
        max(
            24px,
            calc(
                (100% - 1240px) / 2
            )
        );

    bottom:46px;

    z-index:8;

    display:flex;

    align-items:center;

    gap:25px;
}

.yl-home-hero-counter{
    display:flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    letter-spacing:.08em;
}

.yl-home-hero-counter i{
    font-style:normal;

    color:
        rgba(255,255,255,.35);
}

.yl-home-hero-dots{
    display:flex;

    gap:8px;

    align-items:center;
}

.yl-home-hero-dot{
    display:block;

    width:28px;

    height:2px;

    border:0;

    padding:0;

    background:
        rgba(255,255,255,.28);

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.yl-home-hero-dot.is-active{
    width:58px;

    background:#7fe2ff;
}

.yl-home-hero-arrows{
    display:flex;

    gap:8px;
}

.yl-home-hero-arrow{
    width:40px;

    height:40px;

    border-radius:50%;

    border:
        1px solid
        rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.05);

    color:#fff;

    cursor:pointer;

    font-size:17px;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.yl-home-hero-arrow:hover{
    background:
        rgba(255,255,255,.15);

    border-color:
        rgba(255,255,255,.58);
}


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

.yl-home-hero-scroll{
    position:absolute;

    left:50%;

    bottom:26px;

    z-index:8;

    transform:
        translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    color:
        rgba(255,255,255,.72);
}

.yl-home-hero-scroll span{
    width:46px;

    height:46px;

    border:
        1px solid
        rgba(118,222,250,.62);

    border-radius:50%;

    display:grid;

    place-items:center;

    background:
        rgba(0,0,0,.13);

    animation:
        ylHeroFloat 2s
        ease-in-out
        infinite;
}

.yl-home-hero-scroll small{
    font-size:9px;

    letter-spacing:.2em;
}

@keyframes ylHeroFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(5px);
    }

}


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

.yl-footer{
    position:relative;

    width:100%;

    background:#050a11;

    color:#ffffff;

    overflow:hidden;
}

.yl-footer-main{
    width:100%;

    padding:72px 0 28px;
}

.yl-footer .container{
    width:min(
        1240px,
        calc(100% - 48px)
    );

    margin:0 auto;
}


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

.yl-footer-grid{
    display:grid;

    grid-template-columns:
        minmax(320px, 1.65fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        minmax(220px, 1fr);

    column-gap:64px;

    row-gap:45px;

    align-items:start;
}


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

.yl-footer-brand-col{
    min-width:0;
}

.yl-footer-brand{
    display:block;

    width:250px;

    max-width:100%;

    margin:0 0 23px;

    text-decoration:none !important;

    line-height:0;
}

.yl-footer-logo{
    display:block;

    width:100%;

    height:auto;
}

.yl-footer-description{
    width:100%;

    max-width:430px;

    margin:0 !important;

    padding:0 !important;

    color:#91a0af !important;

    font-size:13px !important;

    font-weight:400 !important;

    line-height:1.9 !important;

    letter-spacing:0 !important;
}


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

.yl-footer-column{
    min-width:0;
}

.yl-footer-column h4{
    margin:
        2px 0 21px !important;

    padding:0 !important;

    color:#91a4b6 !important;

    font-size:11px !important;

    font-weight:500 !important;

    line-height:1.2 !important;

    letter-spacing:.18em !important;

    text-transform:uppercase !important;
}

.yl-footer-column a{
    display:block;

    width:max-content;

    max-width:100%;

    margin:
        0 0 11px !important;

    padding:0 !important;

    color:#c7d2dc !important;

    font-size:13px !important;

    font-weight:400 !important;

    line-height:1.65 !important;

    text-decoration:none !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

.yl-footer-column a:hover{
    color:#79defb !important;

    transform:
        translateX(3px);
}

.yl-footer-contact a{
    word-break:break-word;
}

.yl-footer-contact p{
    margin:
        4px 0 0 !important;

    padding:0 !important;

    color:#9baab8 !important;

    font-size:13px !important;

    line-height:1.7 !important;
}


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

.yl-footer-bottom{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:58px;

    padding-top:21px;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}

.yl-footer-copyright,
.yl-footer-tagline{
    margin:0 !important;

    padding:0 !important;

    color:#71808e !important;

    font-size:11px !important;

    font-weight:400 !important;

    line-height:1.6 !important;
}

.yl-footer-tagline{
    text-align:right;
}


/* =========================
   FOOTER FLOAT TOOLS
   ========================= */

.yl-footer-tools{
    position:fixed;

    right:20px;

    bottom:22px;

    z-index:9990;

    display:flex;

    flex-direction:column;

    gap:8px;
}

.yl-footer-tools a{
    display:flex !important;

    width:42px;

    height:42px;

    margin:0 !important;

    padding:0 !important;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        rgba(7,18,29,.95) !important;

    border:
        1px solid
        rgba(255,255,255,.10);

    color:#ffffff !important;

    font-size:13px !important;

    line-height:1 !important;

    text-decoration:none !important;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.24);

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.yl-footer-tools a:hover{
    transform:
        translateY(-3px);

    background:#10283a !important;

    border-color:
        rgba(121,222,251,.45);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .yl-footer-grid{
        grid-template-columns:
            minmax(260px, 1.5fr)
            1fr
            1fr;

        column-gap:45px;
    }

    .yl-footer-brand-col{
        grid-column:1 / -1;

        padding-bottom:10px;
    }

}


/* =========================================================
   1024
   ========================================================= */

@media(max-width:1024px){

    .main-nav{
        gap:16px;
    }

    .product-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .split,
    .news-grid,
    .product-detail,
    .article-layout{
        grid-template-columns:1fr;
    }

    .stat-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .sidebar{
        position:static;
    }

    .hero-frame{
        display:none;
    }

    .footer-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .adv-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .app-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


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

@media(max-width:720px){

    .container{
        width:min(
            100% - 30px,
            1240px
        );
    }

    .site-top{
        display:none;
    }

    .site-header{
        top:0;
    }

    .site-header .inner{
        height:68px;
    }

    .mobile-nav-toggle{
        display:flex;

        align-items:center;

        gap:6px;

        border:0;

        background:transparent;

        color:#fff;

        cursor:pointer;

        padding:8px;
    }

    .mobile-nav-toggle span{
        display:block;

        width:18px;

        height:1px;

        background:#fff;
    }

    .mobile-nav-toggle em{
        font-style:normal;

        font-size:10px;

        letter-spacing:.12em;

        text-transform:uppercase;

        margin-left:4px;
    }

    .main-nav{
        display:none;

        position:absolute;

        left:15px;

        right:15px;

        top:68px;

        background:#08121f;

        border:
            1px solid
            rgba(255,255,255,.14);

        padding:12px;

        flex-direction:column;

        align-items:flex-start;

        gap:0;
    }

    .main-nav.is-open{
        display:flex;
    }

    .main-nav>a{
        width:100%;

        padding:12px 10px;
    }

    .lang-switch{
        width:100%;

        padding:8px 10px;
    }

    .lang-switch .lang-menu{
        position:static;

        margin-top:8px;

        box-shadow:none;
    }

    .lang-switch .lang-menu a{
        color:#18212d;
    }

    .hero{
        min-height:690px;
    }

    .hero-content{
        min-height:690px;
    }

    .hero-copy{
        padding-top:30px;
    }

    .hero h1{
        font-size:48px;
    }

    .hero p{
        font-size:16px;
    }

    .section{
        padding:78px 0;
    }

    .product-grid,
    .recommend-grid{
        grid-template-columns:1fr;
    }

    .stat-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .page-hero{
        padding:125px 0 70px;
    }

    .page-hero h1{
        font-size:42px;
    }

    .detail-title{
        font-size:48px;
    }

    .meta-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;
    }

    .product-gallery,
    .adv-grid,
    .app-grid{
        grid-template-columns:1fr;
    }

    .product-gallery img{
        height:220px;
    }


    /* =========================
       HOME HERO MOBILE
       ========================= */

    .yl-home-hero{
        height:690px;

        min-height:690px;
    }

    .yl-home-hero-content{
        min-height:690px;
    }

    .yl-home-hero-copy{
        left:0;

        width:100%;
    }

    .yl-home-hero-copy h1{
        font-size:
            clamp(
                40px,
                10.8vw,
                57px
            );
    }

    .yl-home-hero-copy p{
        font-size:16px;
    }

    .yl-home-hero-controls{
        left:15px;

        bottom:28px;

        gap:14px;
    }

    .yl-home-hero-dots{
        display:none;
    }

    .yl-home-hero-scroll{
        left:auto;

        right:16px;

        transform:none;

        bottom:27px;
    }

    .yl-home-hero-scroll small{
        display:none;
    }


    /* =========================
       VISION CARD MOBILE
       ========================= */

    .vision-card{
        min-height:340px;
    }

    .vision-card img{
        min-height:340px;
    }

    .vision-card:after{
        font-size:36px;

        right:18px;

        bottom:16px;
    }


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

    .yl-footer-main{
        padding:56px 0 24px;
    }

    .yl-footer .container{
        width:calc(100% - 36px);
    }

    .yl-footer-grid{
        grid-template-columns:1fr;

        gap:31px;
    }

    .yl-footer-brand-col{
        grid-column:auto;

        padding-bottom:8px;
    }

    .yl-footer-brand{
        width:220px;

        margin-bottom:18px;
    }

    .yl-footer-description{
        max-width:100%;

        font-size:12px !important;

        line-height:1.85 !important;
    }

    .yl-footer-column h4{
        margin-bottom:14px !important;
    }

    .yl-footer-column a{
        margin-bottom:9px !important;
    }

    .yl-footer-bottom{
        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        margin-top:40px;

        padding-top:18px;
    }

    .yl-footer-copyright,
    .yl-footer-tagline{
        font-size:10px !important;

        text-align:left !important;
    }

    .yl-footer-tools{
        right:12px;

        bottom:14px;
    }

}


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

@media(max-width:460px){

    .yl-home-hero-copy h1{
        font-size:39px;
    }

    .yl-home-hero-secondary{
        display:none;
    }

    .section-title{
        font-size:34px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .yl-home-hero-slide,
    .yl-home-hero-image,
    .yl-home-hero-copy,
    .product-card,
    .product-card img,
    .recommend-card{
        transition:none !important;
    }

    .yl-home-hero-scroll span{
        animation:none !important;
    }

}



/* =========================================================
   HOMEPAGE HERO BUTTON CLICK FIX
========================================================= */

.yl-home-hero-actions,
.yl-home-hero-button{
    position:relative;
    z-index:20;
    pointer-events:auto;
}

.yl-home-hero-button{
    cursor:pointer;
}




/* ========================================================================
   YUE LAIKAI — HOMEPAGE NEWS & INSIGHTS REFRESH
   Scope: homepage news module only. Existing post queries and URLs are kept.
   ======================================================================== */
.yl-home-news-section{
    position:relative;
    overflow:hidden;
    padding:88px 0 96px;
    background:linear-gradient(180deg,#f7fbff 0%,#ffffff 34%,#ffffff 100%);
}
.yl-home-news-container{max-width:1240px;}
.yl-home-news-header{
    max-width:900px;
    margin:0 auto 38px;
    text-align:center;
}
.yl-home-news-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    margin-bottom:14px;
    color:#0d6bff;
    font-size:12px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.yl-home-news-eyebrow span{
    display:block;
    width:42px;
    height:1px;
    background:#0d6bff;
    opacity:.8;
}
.yl-home-news-heading{
    margin:0;
    color:#0a234c;
    font-size:clamp(30px,3vw,42px);
    font-weight:750;
    line-height:1.16;
    letter-spacing:-.035em;
}
.yl-home-news-intro{
    max-width:760px;
    margin:15px auto 0;
    color:#6f84a2;
    font-size:15px;
    line-height:1.75;
}
.yl-home-news-layout{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:start;
    gap:34px;
}
.yl-home-news-featured{
    min-width:0;
    overflow:hidden;
    border:1px solid #e5edf6;
    border-radius:9px;
    background:#fff;
    box-shadow:0 12px 36px rgba(14,58,105,.055);
}
.yl-home-news-featured-image{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:2.55 / 1;
    background:#e9f3fa;
}
.yl-home-news-featured-image img,
.yl-home-news-row-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.yl-home-news-featured:hover .yl-home-news-featured-image img,
.yl-home-news-row:hover .yl-home-news-row-image img{
    transform:scale(1.035);
}
.yl-home-news-featured-badge{
    position:absolute;
    top:18px;
    left:20px;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 12px;
    border-radius:999px;
    background:#0d6bff;
    color:#fff;
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.yl-home-news-featured-content{padding:24px 25px 27px;}
.yl-home-news-date{
    display:block;
    margin:0 0 10px;
    color:#7a8eaa;
    font-size:11px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.095em;
    text-transform:uppercase;
}
.yl-home-news-featured-title{
    margin:0;
    color:#0a234c;
    font-size:clamp(22px,2vw,29px);
    font-weight:750;
    line-height:1.25;
    letter-spacing:-.025em;
}
.yl-home-news-featured-title a,
.yl-home-news-row-title a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}
.yl-home-news-featured-title a:hover,
.yl-home-news-row-title a:hover{color:#0d6bff;}
.yl-home-news-featured-excerpt{
    margin:13px 0 0;
    color:#7185a1;
    font-size:14px;
    line-height:1.75;
}
.yl-home-news-read-link,
.yl-home-news-row-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    color:#0d6bff;
    font-size:11px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.09em;
    text-decoration:none;
    text-transform:uppercase;
}
.yl-home-news-read-link span,
.yl-home-news-row-link span,
.yl-home-news-all-link span{
    display:inline-block;
    font-size:17px;
    line-height:1;
    transition:transform .2s ease;
}
.yl-home-news-read-link:hover span,
.yl-home-news-row-link:hover span,
.yl-home-news-all-link:hover span{transform:translateX(3px);}
.yl-home-news-secondary{min-width:0;padding-top:2px;}
.yl-home-news-secondary-heading{
    display:flex;
    align-items:center;
    gap:17px;
    margin:0 0 24px;
}
.yl-home-news-secondary-heading h3{
    flex:0 0 auto;
    margin:0;
    color:#0d6bff;
    font-size:12px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.yl-home-news-secondary-heading span{
    display:block;
    flex:1 1 auto;
    height:1px;
    background:#dce6f1;
}
.yl-home-news-list{display:block;}
.yl-home-news-row{
    display:grid;
    grid-template-columns:minmax(118px, .78fr) minmax(0,1.22fr);
    gap:19px;
    align-items:start;
    padding:0 0 23px;
    margin:0 0 23px;
    border-bottom:1px solid #e2eaf3;
}
.yl-home-news-row:last-child{margin-bottom:0;}
.yl-home-news-row-image{
    display:block;
    overflow:hidden;
    aspect-ratio:1.42 / 1;
    border-radius:6px;
    background:#e9f3fa;
}
.yl-home-news-row-content{min-width:0;padding-top:2px;}
.yl-home-news-row-content .yl-home-news-date{margin-bottom:9px;}
.yl-home-news-row-title{
    margin:0;
    color:#0a234c;
    font-size:17px;
    font-weight:750;
    line-height:1.34;
    letter-spacing:-.015em;
}
.yl-home-news-row-excerpt{
    display:-webkit-box;
    overflow:hidden;
    margin:10px 0 0;
    color:#7185a1;
    font-size:13px;
    line-height:1.65;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.yl-home-news-row-link{margin-top:12px;font-size:10px;}
.yl-home-news-all-wrap{
    display:flex;
    justify-content:flex-end;
    margin-top:24px;
}
.yl-home-news-all-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-height:43px;
    padding:10px 16px;
    border:1px solid #0d6bff;
    border-radius:5px;
    background:#fff;
    color:#0d6bff;
    font-size:10px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.yl-home-news-all-link:hover{background:#0d6bff;color:#fff;border-color:#0d6bff;}
.yl-home-news-empty-note{
    padding:18px 0;
    margin:0;
    color:#7185a1;
    font-size:13px;
    line-height:1.7;
}
.yl-home-news-empty{
    max-width:780px;
    margin:0 auto;
    padding:42px 28px;
    border:1px solid #e5edf6;
    border-radius:9px;
    background:linear-gradient(135deg,#f6fbff,#edf6fb);
    text-align:center;
}
.yl-home-news-empty-mark{
    margin:0 0 12px;
    color:#0d6bff;
    font-size:22px;
    font-weight:900;
    letter-spacing:-.08em;
}
.yl-home-news-empty h3{margin:0;color:#0a234c;font-size:22px;line-height:1.3;}
.yl-home-news-empty p{margin:12px auto 20px;color:#7185a1;font-size:14px;line-height:1.7;}

@media (max-width: 1024px){
    .yl-home-news-section{padding:74px 0 80px;}
    .yl-home-news-layout{grid-template-columns:minmax(0,1fr);gap:36px;}
    .yl-home-news-featured-image{aspect-ratio:2.65 / 1;}
    .yl-home-news-secondary-heading{margin-bottom:22px;}
    .yl-home-news-row{grid-template-columns:180px minmax(0,1fr);gap:20px;}
}
@media (max-width: 640px){
    .yl-home-news-section{padding:58px 0 62px;}
    .yl-home-news-container{width:calc(100% - 36px);}
    .yl-home-news-header{margin-bottom:27px;text-align:left;}
    .yl-home-news-eyebrow{justify-content:flex-start;margin-bottom:11px;font-size:10px;}
    .yl-home-news-eyebrow span:last-child{display:none;}
    .yl-home-news-eyebrow span:first-child{width:24px;}
    .yl-home-news-heading{font-size:29px;line-height:1.2;letter-spacing:-.025em;}
    .yl-home-news-intro{margin-top:10px;font-size:13px;line-height:1.65;}
    .yl-home-news-layout{gap:31px;}
    .yl-home-news-featured-image{aspect-ratio:1.55 / 1;}
    .yl-home-news-featured-badge{top:12px;left:12px;min-height:24px;padding:4px 9px;font-size:9px;}
    .yl-home-news-featured-content{padding:19px 17px 21px;}
    .yl-home-news-featured-title{font-size:22px;line-height:1.28;}
    .yl-home-news-featured-excerpt{margin-top:10px;font-size:13px;line-height:1.65;}
    .yl-home-news-read-link{margin-top:15px;}
    .yl-home-news-secondary-heading{margin-bottom:17px;}
    .yl-home-news-row{grid-template-columns:105px minmax(0,1fr);gap:13px;padding-bottom:18px;margin-bottom:18px;}
    .yl-home-news-row-image{aspect-ratio:1 / 1;}
    .yl-home-news-row-content{padding-top:0;}
    .yl-home-news-date{margin-bottom:6px;font-size:9px;letter-spacing:.07em;}
    .yl-home-news-row-title{font-size:14px;line-height:1.35;}
    .yl-home-news-row-excerpt{margin-top:6px;font-size:11px;line-height:1.55;-webkit-line-clamp:3;}
    .yl-home-news-row-link{margin-top:8px;font-size:9px;}
    .yl-home-news-all-wrap{justify-content:stretch;margin-top:20px;}
    .yl-home-news-all-link{width:100%;min-height:44px;}
}