/* ==========================================================================
   YUE LAIKAI ENERGY GROUP — HOMEPAGE V2
   Front-end only. Existing global CSS and management modules remain intact.
   ========================================================================== */

.yl-home-v2{
    width:100%;
    overflow:hidden;
}

/* --------------------------------------------------------------------------
   FULL-SCREEN HERO
   -------------------------------------------------------------------------- */

.yl-home-hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:680px;
    max-height:none;
    overflow:hidden;
    background:#04111f;
    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:-2%;
    width:104%;
    height:104%;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    transform:scale(1.02);
    transition:transform 7s cubic-bezier(.2,.6,.3,1);
}

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

.yl-home-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(3,13,25,.82) 0%,rgba(3,13,25,.49) 34%,rgba(3,13,25,.12) 69%,rgba(3,13,25,.34) 100%),
        linear-gradient(180deg,rgba(3,13,25,.30) 0%,rgba(3,13,25,.02) 40%,rgba(3,13,25,.42) 100%);
}

.yl-home-hero-grid{
    position:absolute;
    inset:0;
    opacity:.20;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size:90px 90px;
    mask-image:linear-gradient(90deg,rgba(0,0,0,.95),transparent 92%);
}

.yl-home-hero-inner{
    position:relative;
    z-index:4;
    height:100%;
    min-height:100%;
    display:flex;
    align-items:center;
}

.yl-home-hero-copy{
    width:min(720px,100%);
    padding-top:30px;
}

.yl-home-hero-eyebrow{
    margin-bottom:18px;
    font-size:11px;
    line-height:1.4;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#79defb;
}

.yl-home-hero-copy h1{
    max-width:760px;
    margin:0;
    color:#fff;
    font-size:clamp(46px,5.6vw,84px);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.045em;
    text-wrap:balance;
}

.yl-home-hero-copy p{
    max-width:620px;
    margin:24px 0 0;
    color:rgba(239,247,252,.88);
    font-size:18px;
    line-height:1.72;
}

.yl-home-hero-controls{
    position:absolute;
    right:5.2%;
    bottom:46px;
    z-index:8;
    display:flex;
    align-items:center;
    gap:24px;
}

.yl-home-hero-count{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.82);
    font-size:11px;
    letter-spacing:.16em;
}

.yl-home-hero-count i{
    display:block;
    width:36px;
    height:1px;
    background:rgba(255,255,255,.30);
}

.yl-home-hero-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.yl-home-hero-dot{
    width:7px;
    height:7px;
    padding:0;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.yl-home-hero-dot.is-active{
    transform:scale(1.35);
    background:#79defb;
    border-color:#79defb;
}

.yl-home-hero-scroll{
    position:absolute;
    left:5.2%;
    bottom:42px;
    z-index:8;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    color:rgba(255,255,255,.72);
}

.yl-home-hero-scroll span{
    font-size:9px;
    line-height:1;
    letter-spacing:.28em;
}

.yl-home-hero-scroll i{
    display:block;
    width:1px;
    height:36px;
    background:linear-gradient(180deg,#79defb,rgba(121,222,251,0));
    animation:ylHomeScrollPulse 1.8s ease-in-out infinite;
}

.yl-home-screen-edge{
    position:absolute;
    inset:26px;
    z-index:7;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.10);
}

.yl-home-screen-edge:before,
.yl-home-screen-edge:after{
    content:"";
    position:absolute;
    width:36px;
    height:36px;
    border-color:rgba(121,222,251,.58);
}

.yl-home-screen-edge:before{
    left:-1px;
    top:-1px;
    border-left:2px solid;
    border-top:2px solid;
}

.yl-home-screen-edge:after{
    right:-1px;
    bottom:-1px;
    border-right:2px solid;
    border-bottom:2px solid;
}

@keyframes ylHomeScrollPulse{
    0%,100%{opacity:.45;transform:scaleY(.76);transform-origin:top}
    50%{opacity:1;transform:scaleY(1);transform-origin:top}
}

/* --------------------------------------------------------------------------
   CG VISUAL REPLACEMENT FOR CORE PRODUCTS
   No visible text. Entire section is a visual showcase.
   -------------------------------------------------------------------------- */

.yl-home-cg-section{
    position:relative;
    min-height:100svh;
    height:100svh;
    padding:0 !important;
    overflow:hidden;
    isolation:isolate;
    background:#030b15;
}

.yl-home-cg-scene{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 66% 31%,rgba(84,201,255,.19),transparent 18%),
        radial-gradient(circle at 35% 58%,rgba(26,116,194,.15),transparent 24%),
        linear-gradient(180deg,#051321 0%,#061b2b 48%,#020913 100%);
}

.yl-cg-sky{
    position:absolute;
    inset:-12%;
    background:
        radial-gradient(circle at 72% 35%,rgba(110,224,255,.24),transparent 12%),
        radial-gradient(circle at 48% 45%,rgba(34,128,204,.20),transparent 25%),
        linear-gradient(180deg,rgba(14,67,107,.34),transparent 55%);
    filter:blur(4px);
    animation:ylCgSky 11s ease-in-out infinite alternate;
}

.yl-cg-haze{
    position:absolute;
    left:0;
    right:0;
    top:45%;
    height:28%;
    background:linear-gradient(180deg,transparent,rgba(79,197,246,.10),transparent);
    filter:blur(14px);
    animation:ylCgHaze 7s ease-in-out infinite;
}

.yl-cg-grid-floor{
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-23%;
    height:72%;
    transform:perspective(900px) rotateX(66deg);
    transform-origin:center bottom;
    background-image:
        linear-gradient(rgba(63,166,224,.20) 1px,transparent 1px),
        linear-gradient(90deg,rgba(63,166,224,.20) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(180deg,transparent 0%,#000 23%,#000 76%,transparent 100%);
    opacity:.52;
    animation:ylCgGrid 14s linear infinite;
}

.yl-cg-horizon-line{
    position:absolute;
    left:5%;
    right:5%;
    top:54%;
    height:1px;
    background:linear-gradient(90deg,transparent,#55d6ff 18%,rgba(255,255,255,.70) 50%,#55d6ff 82%,transparent);
    box-shadow:0 0 22px rgba(84,201,255,.60);
    opacity:.62;
}

.yl-cg-orbit{
    position:absolute;
    left:50%;
    top:45%;
    border:1px solid rgba(84,201,255,.22);
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-12deg);
    box-shadow:0 0 36px rgba(84,201,255,.06);
}

.yl-cg-orbit-1{
    width:72vw;
    height:25vw;
    animation:ylCgOrbitOne 16s linear infinite;
}

.yl-cg-orbit-2{
    width:52vw;
    height:17vw;
    animation:ylCgOrbitTwo 11s linear infinite reverse;
}

.yl-cg-orbit-3{
    width:34vw;
    height:11vw;
    border-color:rgba(108,224,255,.33);
    animation:ylCgOrbitThree 8s linear infinite;
}

.yl-cg-energy-core{
    position:absolute;
    left:50%;
    top:49%;
    width:190px;
    height:190px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(121,222,251,.25);
    border-radius:50%;
    box-shadow:
        0 0 70px rgba(48,161,229,.12),
        inset 0 0 40px rgba(72,193,247,.10);
}

.yl-cg-energy-core:before,
.yl-cg-energy-core:after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    border:1px solid rgba(121,222,251,.18);
}

.yl-cg-energy-core:after{
    inset:47px;
    background:radial-gradient(circle,#b6f4ff 0%,#45c4fa 18%,rgba(51,184,244,.22) 49%,transparent 70%);
    border:0;
    box-shadow:0 0 45px rgba(75,201,255,.60);
    animation:ylCgCore 2.4s ease-in-out infinite;
}

.yl-cg-energy-core span{
    position:absolute;
    left:50%;
    top:50%;
    width:4px;
    height:74px;
    transform:translate(-50%,-50%);
    background:linear-gradient(180deg,transparent,#b7f5ff,transparent);
    box-shadow:0 0 22px rgba(84,201,255,.85);
}

.yl-cg-towers{
    position:absolute;
    left:50%;
    top:57%;
    display:flex;
    align-items:flex-end;
    gap:12px;
    transform:translateX(-50%);
    opacity:.92;
}

.yl-cg-towers span{
    display:block;
    width:34px;
    height:var(--h,110px);
    background:
        linear-gradient(90deg,rgba(13,30,45,.92),rgba(58,115,143,.88) 48%,rgba(7,20,33,.98)),
        linear-gradient(180deg,rgba(84,201,255,.08),transparent);
    border:1px solid rgba(137,226,250,.30);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 0 26px rgba(24,123,185,.10);
    transform:skewY(-3deg);
}

.yl-cg-towers span:nth-child(1){--h:88px}
.yl-cg-towers span:nth-child(2){--h:126px}
.yl-cg-towers span:nth-child(3){--h:156px}
.yl-cg-towers span:nth-child(4){--h:126px}
.yl-cg-towers span:nth-child(5){--h:96px}

.yl-cg-towers span:after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:14px;
    background:rgba(118,220,250,.42);
    box-shadow:0 27px 0 rgba(118,220,250,.18),0 54px 0 rgba(118,220,250,.12);
}

.yl-cg-battery-field{
    position:absolute;
    top:58%;
    display:grid;
    grid-template-columns:repeat(4,56px);
    gap:10px;
    transform:skewY(-5deg) perspective(700px) rotateX(4deg);
    opacity:.95;
}

.yl-cg-battery-left{
    left:15%;
}

.yl-cg-battery-right{
    right:15%;
    transform:skewY(5deg) perspective(700px) rotateX(4deg);
}

.yl-cg-battery-field i{
    position:relative;
    width:56px;
    height:30px;
    display:block;
    border:1px solid rgba(149,227,247,.24);
    background:
        linear-gradient(90deg,rgba(9,25,38,.92),rgba(24,54,71,.90)),
        linear-gradient(180deg,rgba(84,201,255,.10),transparent);
    box-shadow:inset 0 0 12px rgba(82,198,244,.08);
}

.yl-cg-battery-field i:after{
    content:"";
    position:absolute;
    right:6px;
    top:7px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#63ddff;
    box-shadow:0 0 7px rgba(99,221,255,.85);
}

.yl-cg-light-beam{
    position:absolute;
    width:40%;
    height:2px;
    background:linear-gradient(90deg,transparent,#7be8ff,transparent);
    filter:blur(.3px);
    opacity:.68;
}

.yl-cg-beam-a{
    left:8%;
    top:37%;
    transform:rotate(12deg);
    animation:ylCgBeamA 6s ease-in-out infinite;
}

.yl-cg-beam-b{
    right:9%;
    top:42%;
    transform:rotate(-11deg);
    animation:ylCgBeamB 7s ease-in-out infinite;
}

.yl-cg-signal{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#9ceeff;
    box-shadow:0 0 12px rgba(84,201,255,.95);
}

.yl-cg-signal-a{
    left:27%;
    top:34%;
    animation:ylCgSignalA 5s ease-in-out infinite;
}

.yl-cg-signal-b{
    right:30%;
    top:29%;
    animation:ylCgSignalB 4.4s ease-in-out infinite;
}

.yl-cg-signal-c{
    left:69%;
    top:66%;
    animation:ylCgSignalC 5.6s ease-in-out infinite;
}

.yl-home-screen-frame{
    position:absolute;
    inset:32px;
    z-index:6;
    pointer-events:none;
    border:1px solid rgba(122,220,248,.13);
}

.yl-home-screen-frame:before,
.yl-home-screen-frame:after{
    content:"";
    position:absolute;
    width:48px;
    height:48px;
    border-color:rgba(92,211,249,.60);
}

.yl-home-screen-frame:before{
    left:-1px;
    top:-1px;
    border-left:2px solid;
    border-top:2px solid;
}

.yl-home-screen-frame:after{
    right:-1px;
    bottom:-1px;
    border-right:2px solid;
    border-bottom:2px solid;
}

.yl-home-cg-corner{
    position:absolute;
    z-index:7;
    width:72px;
    height:72px;
    pointer-events:none;
}

.yl-home-cg-corner-tl{
    left:6.5%;
    top:13%;
    border-left:1px solid rgba(119,222,251,.45);
    border-top:1px solid rgba(119,222,251,.45);
}

.yl-home-cg-corner-tr{
    right:6.5%;
    top:13%;
    border-right:1px solid rgba(119,222,251,.45);
    border-top:1px solid rgba(119,222,251,.45);
}

.yl-home-cg-corner-bl{
    left:6.5%;
    bottom:13%;
    border-left:1px solid rgba(119,222,251,.45);
    border-bottom:1px solid rgba(119,222,251,.45);
}

.yl-home-cg-corner-br{
    right:6.5%;
    bottom:13%;
    border-right:1px solid rgba(119,222,251,.45);
    border-bottom:1px solid rgba(119,222,251,.45);
}

@keyframes ylCgSky{
    from{transform:translate3d(-1%,0,0) scale(1)}
    to{transform:translate3d(1.8%,-1%,0) scale(1.04)}
}

@keyframes ylCgHaze{
    0%,100%{opacity:.40;transform:translateX(-2%)}
    50%{opacity:.80;transform:translateX(2%)}
}

@keyframes ylCgGrid{
    from{background-position:0 0,0 0}
    to{background-position:0 70px,70px 0}
}

@keyframes ylCgCore{
    0%,100%{transform:scale(.92);opacity:.72}
    50%{transform:scale(1.06);opacity:1}
}

@keyframes ylCgOrbitOne{
    from{transform:translate(-50%,-50%) rotate(-12deg)}
    to{transform:translate(-50%,-50%) rotate(348deg)}
}

@keyframes ylCgOrbitTwo{
    from{transform:translate(-50%,-50%) rotate(20deg)}
    to{transform:translate(-50%,-50%) rotate(-340deg)}
}

@keyframes ylCgOrbitThree{
    from{transform:translate(-50%,-50%) rotate(-18deg) scale(1)}
    to{transform:translate(-50%,-50%) rotate(342deg) scale(1.04)}
}

@keyframes ylCgBeamA{
    0%,100%{opacity:.24;transform:rotate(12deg) translateX(-8%)}
    50%{opacity:.92;transform:rotate(12deg) translateX(8%)}
}

@keyframes ylCgBeamB{
    0%,100%{opacity:.22;transform:rotate(-11deg) translateX(8%)}
    50%{opacity:.92;transform:rotate(-11deg) translateX(-8%)}
}

@keyframes ylCgSignalA{
    0%,100%{transform:translate(0,0);opacity:.35}
    50%{transform:translate(42px,34px);opacity:1}
}

@keyframes ylCgSignalB{
    0%,100%{transform:translate(0,0);opacity:.30}
    50%{transform:translate(-34px,48px);opacity:1}
}

@keyframes ylCgSignalC{
    0%,100%{transform:translate(0,0);opacity:.28}
    50%{transform:translate(-40px,-54px);opacity:1}
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
    .yl-home-hero-copy h1{
        font-size:clamp(44px,7vw,66px);
    }

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

    .yl-cg-battery-left{left:7%}
    .yl-cg-battery-right{right:7%}
    .yl-cg-battery-field{
        grid-template-columns:repeat(4,48px);
        gap:8px;
    }
    .yl-cg-battery-field i{
        width:48px;
    }
    .yl-cg-energy-core{
        width:155px;
        height:155px;
    }
}

@media (max-width:720px){
    .yl-home-hero{
        height:100svh;
        min-height:620px;
    }

    .yl-home-hero-inner{
        align-items:flex-end;
        padding-bottom:122px;
    }

    .yl-home-hero-copy{
        max-width:100%;
        padding:0;
    }

    .yl-home-hero-eyebrow{
        font-size:9px;
        margin-bottom:14px;
        letter-spacing:.22em;
    }

    .yl-home-hero-copy h1{
        max-width:100%;
        font-size:clamp(39px,11vw,54px);
        line-height:1.02;
    }

    .yl-home-hero-copy p{
        max-width:100%;
        margin-top:18px;
        font-size:14px;
        line-height:1.7;
    }

    .yl-home-hero-controls{
        left:18px;
        right:auto;
        bottom:29px;
        gap:15px;
    }

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

    .yl-home-screen-edge{
        inset:15px;
    }

    .yl-home-screen-edge:before,
    .yl-home-screen-edge:after{
        width:26px;
        height:26px;
    }

    .yl-home-cg-section{
        min-height:100svh;
        height:100svh;
    }

    .yl-home-screen-frame{
        inset:18px;
    }

    .yl-home-cg-corner{
        width:44px;
        height:44px;
    }

    .yl-home-cg-corner-tl,
    .yl-home-cg-corner-tr{
        top:10%;
    }

    .yl-home-cg-corner-bl,
    .yl-home-cg-corner-br{
        bottom:10%;
    }

    .yl-cg-grid-floor{
        bottom:-17%;
        height:60%;
        background-size:48px 48px;
    }

    .yl-cg-orbit-1{
        width:124vw;
        height:46vw;
    }

    .yl-cg-orbit-2{
        width:94vw;
        height:34vw;
    }

    .yl-cg-orbit-3{
        width:67vw;
        height:26vw;
    }

    .yl-cg-energy-core{
        width:116px;
        height:116px;
        top:48%;
    }

    .yl-cg-energy-core:after{
        inset:35px;
    }

    .yl-cg-towers{
        top:56%;
        gap:7px;
    }

    .yl-cg-towers span{
        width:21px;
        height:70px;
    }

    .yl-cg-towers span:nth-child(1){height:50px}
    .yl-cg-towers span:nth-child(2){height:72px}
    .yl-cg-towers span:nth-child(3){height:90px}
    .yl-cg-towers span:nth-child(4){height:72px}
    .yl-cg-towers span:nth-child(5){height:56px}

    .yl-cg-towers span:after{
        margin-top:9px;
        box-shadow:0 18px 0 rgba(118,220,250,.16),0 36px 0 rgba(118,220,250,.09);
    }

    .yl-cg-battery-field{
        top:62%;
        grid-template-columns:repeat(4,30px);
        gap:6px;
    }

    .yl-cg-battery-left{left:4%}
    .yl-cg-battery-right{right:4%}

    .yl-cg-battery-field i{
        width:30px;
        height:18px;
    }

    .yl-cg-battery-field i:after{
        right:4px;
        top:5px;
        width:2px;
        height:2px;
    }
}

@media (prefers-reduced-motion:reduce){
    .yl-home-hero-image,
    .yl-home-hero-scroll i,
    .yl-cg-sky,
    .yl-cg-haze,
    .yl-cg-grid-floor,
    .yl-cg-orbit,
    .yl-cg-energy-core:after,
    .yl-cg-light-beam,
    .yl-cg-signal{
        animation:none !important;
        transition:none !important;
    }
}
/* ============================================================================
   HOMEPAGE V2.1 — REFINED HERO / CG / ABOUT SYNC
   These overrides intentionally sit after the V2 base styles.
   ============================================================================ */

/* ---------- HERO: remove the visible frame, keep the cinematic edge clean ---------- */
.yl-home-hero{
    height:100svh;
    min-height:700px;
    background:#03101d;
}

.yl-home-hero-image{
    inset:-1.5%;
    width:103%;
    height:103%;
    background-position:center center;
    transform:scale(1.015);
}

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

.yl-home-hero-overlay{
    background:
        linear-gradient(90deg,rgba(2,13,25,.72) 0%,rgba(2,13,25,.34) 36%,rgba(2,13,25,.06) 70%,rgba(2,13,25,.16) 100%),
        linear-gradient(180deg,rgba(1,12,23,.18) 0%,rgba(1,12,23,.01) 44%,rgba(1,12,23,.56) 100%);
}

.yl-home-hero-grid{
    opacity:.11;
    background-size:120px 120px;
    mask-image:linear-gradient(90deg,rgba(0,0,0,.72),transparent 82%);
}

.yl-home-hero-inner{
    align-items:flex-end;
    padding-bottom:156px;
}

.yl-home-hero-copy{
    width:min(640px,100%);
    padding:0;
}

.yl-home-hero-eyebrow{
    margin-bottom:16px;
    font-size:10px;
    letter-spacing:.30em;
    color:#8be8ff;
}

.yl-home-hero-copy h1{
    max-width:680px;
    font-size:clamp(44px,5.5vw,78px);
    font-weight:500;
    line-height:1.00;
    letter-spacing:-.045em;
    text-shadow:0 6px 34px rgba(0,0,0,.24);
}

.yl-home-hero-copy p{
    max-width:540px;
    margin-top:20px;
    font-size:15px;
    line-height:1.7;
    color:rgba(242,248,252,.88);
}

.yl-home-hero-controls{
    right:5.4%;
    bottom:42px;
    gap:18px;
}

.yl-home-hero-count{
    font-size:10px;
    letter-spacing:.18em;
    color:rgba(255,255,255,.80);
}

.yl-home-hero-count i{
    width:34px;
}

.yl-home-hero-dots{
    gap:8px;
}

.yl-home-hero-dot{
    width:6px;
    height:6px;
}

/* New reference-style scroll cue: no box, no border. */
.yl-home-hero-scroll{
    left:5.2%;
    bottom:34px;
    z-index:8;
    min-width:48px;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.76);
    text-decoration:none;
}

.yl-home-hero-scroll span{
    font-size:9px;
    line-height:1;
    letter-spacing:.30em;
}

.yl-home-hero-scroll i{
    width:1px;
    height:43px;
    background:linear-gradient(180deg,#8be8ff,rgba(139,232,255,.04));
}

.yl-home-hero-scroll b{
    margin-top:-4px;
    font-size:17px;
    line-height:1;
    font-weight:300;
    color:#8be8ff;
    animation:ylHomeArrow 1.8s ease-in-out infinite;
}

@keyframes ylHomeArrow{
    0%,100%{transform:translateY(0);opacity:.55}
    50%{transform:translateY(5px);opacity:1}
}

/* Explicitly disable the old rectangular hero frame. */
.yl-home-screen-edge,
.yl-home-screen-frame,
.yl-home-cg-corner{
    display:none !important;
}

/* ---------- CG: full-screen, visual-only, no explanatory text ---------- */
.yl-home-cg-section{
    min-height:100svh;
    height:100svh;
    border:0;
}

.yl-home-cg-scene{
    background:
        radial-gradient(circle at 65% 36%,rgba(101,218,255,.16),transparent 15%),
        radial-gradient(circle at 36% 58%,rgba(20,111,191,.15),transparent 25%),
        linear-gradient(180deg,#03111f 0%,#061a2b 48%,#020813 100%);
}

.yl-cg-sky{
    opacity:.85;
}

.yl-cg-grid-floor{
    opacity:.44;
}

.yl-cg-horizon-line{
    top:53%;
    opacity:.48;
}

.yl-cg-energy-core{
    width:220px;
    height:220px;
    top:45%;
    filter:saturate(1.08);
}

.yl-cg-energy-core:after{
    box-shadow:
        0 0 45px rgba(75,201,255,.52),
        0 0 100px rgba(55,157,219,.18);
}

.yl-cg-towers{
    top:58%;
    gap:16px;
    transform:translateX(-50%) perspective(900px) rotateX(3deg);
}

.yl-cg-towers span{
    width:42px;
}

.yl-cg-battery-field{
    top:60%;
    opacity:.82;
}

.yl-cg-light-beam{
    height:1px;
    opacity:.55;
}

.yl-home-cg-section:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%,transparent 0%,transparent 46%,rgba(0,0,0,.14) 74%,rgba(0,0,0,.42) 100%),
        linear-gradient(180deg,rgba(2,10,18,.04),rgba(1,6,12,.36));
    z-index:5;
}

/* ---------- ABOUT: automatically uses About Us page's managed image ---------- */
.yl-home-standard-section{
    overflow:hidden;
}

.yl-home-about-image{
    position:relative;
    display:block;
    min-height:440px;
    overflow:hidden;
    background:#e8eff4;
    text-decoration:none !important;
}

.yl-home-about-image img{
    display:block;
    width:100%;
    height:100%;
    min-height:440px;
    object-fit:cover;
    object-position:center;
    transition:transform 1.1s cubic-bezier(.2,.65,.25,1),filter 1.0s ease;
}

.yl-home-about-image:hover img{
    transform:scale(1.035);
    filter:saturate(1.04);
}

.yl-home-about-image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 48%,rgba(2,15,26,.62));
    pointer-events:none;
}

/* ---------- slow text/image reveal for the homepage's unchanged modules ---------- */
.yl-home-soft{
    opacity:0;
    transform:translate3d(0,34px,0);
    filter:blur(2px);
    transition:
        opacity .95s cubic-bezier(.22,.61,.36,1),
        transform .95s cubic-bezier(.22,.61,.36,1),
        filter .95s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform,filter;
}

.yl-home-soft-right{
    transition-delay:100ms;
}

.yl-home-soft-wide{
    transition-duration:1.05s;
}

.yl-home-soft.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
}

@media (max-width:1024px){
    .yl-home-hero-inner{
        padding-bottom:132px;
    }

    .yl-home-hero-copy h1{
        font-size:clamp(42px,7vw,66px);
    }

    .yl-home-hero-copy p{
        max-width:520px;
        font-size:14px;
    }

    .yl-home-hero-scroll{
        left:26px;
    }

    .yl-home-about-image,
    .yl-home-about-image img{
        min-height:380px;
    }

    .yl-cg-energy-core{
        width:170px;
        height:170px;
        top:44%;
    }

    .yl-cg-towers{
        top:58%;
        gap:10px;
    }

    .yl-cg-towers span{
        width:30px;
    }
}

@media (max-width:720px){
    .yl-home-hero{
        min-height:620px;
    }

    .yl-home-hero-inner{
        align-items:flex-end;
        padding-bottom:120px;
    }

    .yl-home-hero-copy{
        width:100%;
    }

    .yl-home-hero-eyebrow{
        margin-bottom:13px;
        font-size:8px;
        letter-spacing:.22em;
    }

    .yl-home-hero-copy h1{
        max-width:94%;
        font-size:clamp(34px,10.5vw,50px);
        line-height:1.04;
    }

    .yl-home-hero-copy p{
        max-width:88%;
        margin-top:15px;
        font-size:13px;
        line-height:1.65;
    }

    .yl-home-hero-controls{
        right:18px;
        bottom:28px;
        gap:13px;
    }

    .yl-home-hero-scroll{
        left:18px;
        bottom:24px;
        gap:7px;
    }

    .yl-home-hero-scroll span{
        font-size:8px;
    }

    .yl-home-hero-scroll i{
        height:31px;
    }

    .yl-home-hero-scroll b{
        font-size:15px;
    }

    .yl-home-cg-section{
        height:100svh;
        min-height:620px;
    }

    .yl-cg-energy-core{
        width:108px;
        height:108px;
        top:44%;
    }

    .yl-cg-energy-core:before{inset:12px}
    .yl-cg-energy-core:after{inset:32px}

    .yl-cg-orbit-1{width:130vw;height:48vw}
    .yl-cg-orbit-2{width:100vw;height:34vw}
    .yl-cg-orbit-3{width:72vw;height:25vw}

    .yl-cg-towers{
        top:57%;
        gap:6px;
    }

    .yl-cg-towers span{
        width:18px;
    }

    .yl-cg-towers span:nth-child(1){height:42px}
    .yl-cg-towers span:nth-child(2){height:62px}
    .yl-cg-towers span:nth-child(3){height:80px}
    .yl-cg-towers span:nth-child(4){height:62px}
    .yl-cg-towers span:nth-child(5){height:48px}

    .yl-cg-battery-field{
        top:62%;
        grid-template-columns:repeat(4,24px);
        gap:5px;
    }

    .yl-cg-battery-field i{
        width:24px;
        height:15px;
    }

    .yl-cg-battery-left{left:2%}
    .yl-cg-battery-right{right:2%}

    .yl-home-about-image,
    .yl-home-about-image img{
        min-height:320px;
    }

    .yl-home-soft-right{
        transition-delay:70ms;
    }
}

@media (prefers-reduced-motion:reduce){
    .yl-home-soft,
    .yl-home-about-image img,
    .yl-home-hero-image,
    .yl-home-hero-scroll b{
        transition:none !important;
        animation:none !important;
    }
}


/* ======================================================================
   HOMEPAGE V2.2 — Stronger, slower cinematic breathing + visible title
   Scope is limited to the homepage Hero. Other sections are untouched.
   ====================================================================== */

.yl-home-hero,
.yl-home-hero-slides,
.yl-home-hero-slide {
    isolation: isolate;
}

.yl-home-hero-image {
    inset: -4%;
    width: 108%;
    height: 108%;
    transform-origin: center center;
    animation: ylHomeHeroBreathing 10.5s cubic-bezier(.45, .05, .55, .95) infinite;
    will-change: transform, filter;
}

.yl-home-hero-slide.is-active .yl-home-hero-image {
    animation-play-state: running;
}

.yl-home-hero-slide:not(.is-active) .yl-home-hero-image {
    animation-play-state: paused;
}

@keyframes ylHomeHeroBreathing {
    0% {
        transform: scale(1.025) translate3d(0, 0, 0);
        filter: brightness(.94) saturate(1.00);
    }
    48% {
        transform: scale(1.105) translate3d(-.24%, .14%, 0);
        filter: brightness(1.055) saturate(1.08);
    }
    100% {
        transform: scale(1.045) translate3d(.20%, -.12%, 0);
        filter: brightness(.99) saturate(1.03);
    }
}

/* A mild luminosity pulse enhances the inhale/exhale effect without flashing. */
.yl-home-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at 68% 42%, rgba(95, 205, 255, .10), transparent 43%);
    opacity: .52;
    animation: ylHomeHeroGlow 7.5s ease-in-out infinite alternate;
}

@keyframes ylHomeHeroGlow {
    from { opacity: .26; }
    to   { opacity: .70; }
}

/* The existing Theme Settings > Hero Title field is the only visible Hero copy. */
.yl-home-hero-inner {
    position: relative;
    z-index: 5;
}

.yl-home-hero-copy {
    position: relative;
    z-index: 6;
    display: block !important;
    width: min(760px, 100%);
    opacity: 1 !important;
    visibility: visible !important;
}

.yl-home-hero-copy h1 {
    display: block !important;
    position: relative;
    z-index: 7;
    max-width: 760px;
    margin: 0;
    color: #fff !important;
    font-size: clamp(42px, 5.4vw, 78px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 5px 32px rgba(0, 0, 0, .30);
    opacity: 1 !important;
    visibility: visible !important;
    animation: ylHomeHeroTitleReveal .95s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes ylHomeHeroTitleReveal {
    from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(3px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@media (max-width: 720px) {
    .yl-home-hero-image {
        inset: -4.5%;
        width: 109%;
        height: 109%;
        animation-name: ylHomeHeroBreathingMobile;
        animation-duration: 9.5s;
    }

    .yl-home-hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .yl-home-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(34px, 9.7vw, 52px);
        line-height: 1.06;
    }
}

@keyframes ylHomeHeroBreathingMobile {
    0% {
        transform: scale(1.025) translate3d(0, 0, 0);
        filter: brightness(.95) saturate(1.00);
    }
    50% {
        transform: scale(1.085) translate3d(-.15%, .10%, 0);
        filter: brightness(1.045) saturate(1.06);
    }
    100% {
        transform: scale(1.035) translate3d(.12%, -.08%, 0);
        filter: brightness(.99) saturate(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .yl-home-hero-image,
    .yl-home-hero-slide::after,
    .yl-home-hero-copy h1 {
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }
}


/* ======================================================================
   HOMEPAGE TITLE FIX V2.3
   Keep the Theme Settings headline outside the fading background slides.
   High-specificity selectors intentionally protect it from legacy styles.
   ====================================================================== */
#yl-home-hero .yl-home-hero-headline-wrap{
    position:absolute !important;
    inset:0 !important;
    z-index:20 !important;
    display:flex !important;
    align-items:flex-end !important;
    padding:0 0 clamp(138px, 17vh, 178px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
}
#yl-home-hero .yl-home-hero-headline-container{
    display:block !important;
    position:relative !important;
    width:min(1380px, calc(100% - 10.4%)) !important;
    max-width:1380px !important;
    height:auto !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}
#yl-home-hero .yl-home-hero-headline{
    display:block !important;
    position:relative !important;
    z-index:21 !important;
    width:min(820px, 100%) !important;
    max-width:820px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:clamp(40px, 5.3vw, 78px) !important;
    font-weight:500 !important;
    line-height:1.03 !important;
    letter-spacing:-.045em !important;
    text-align:left !important;
    text-transform:none !important;
    text-shadow:0 5px 32px rgba(0,0,0,.42) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translate3d(0,0,0) !important;
    filter:none !important;
    animation:ylHomeTitleFadeUp .9s cubic-bezier(.22,.61,.36,1) both !important;
}
@keyframes ylHomeTitleFadeUp{
    from{opacity:0;transform:translate3d(0,18px,0);filter:blur(2px)}
    to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}
@media(max-width:1024px){
    #yl-home-hero .yl-home-hero-headline-wrap{padding-bottom:150px !important}
    #yl-home-hero .yl-home-hero-headline-container{width:calc(100% - 52px) !important}
    #yl-home-hero .yl-home-hero-headline{font-size:clamp(42px,7vw,64px) !important}
}
@media(max-width:720px){
    #yl-home-hero .yl-home-hero-headline-wrap{padding-bottom:142px !important}
    #yl-home-hero .yl-home-hero-headline-container{width:calc(100% - 36px) !important}
    #yl-home-hero .yl-home-hero-headline{font-size:clamp(34px,9.5vw,50px) !important;line-height:1.06 !important;max-width:100% !important}
}
@media(prefers-reduced-motion:reduce){
    #yl-home-hero .yl-home-hero-headline{animation:none !important}
}



/* =========================================================
   YUE LAIKAI — HOMEPAGE HERO TITLE TYPOGRAPHY V2.5
   Modern typography + responsive natural line wrapping
   ========================================================= */

#yl-home-hero .yl-home-hero-headline-container {
    width: min(1380px, calc(100% - 10.4%)) !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#yl-home-hero .yl-home-hero-headline {
    display: block !important;

    /* 字体：现代、简洁、适合国际企业官网 */
    font-family:
        Inter,
        "SF Pro Display",
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    /* 字号自适应 */
    font-size: clamp(42px, 5.1vw, 76px) !important;

    /* 字体粗细与行距 */
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;

    /* 自动换行，不截断、不强制单行 */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: balance;

    /* 标题宽度，避免一行拉得太长 */
    width: min(900px, 100%) !important;
    max-width: 900px !important;
    height: auto !important;

    /* 视觉效果 */
    color: #ffffff !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: 0 3px 28px rgba(0, 0, 0, 0.38) !important;

    margin: 0 !important;
    padding: 0 !important;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* 保留原有的入场动画 */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 平板 */
@media (max-width: 1024px) {
    #yl-home-hero .yl-home-hero-headline-container {
        width: calc(100% - 52px) !important;
    }

    #yl-home-hero .yl-home-hero-headline {
        font-size: clamp(40px, 6.2vw, 62px) !important;
        line-height: 1.12 !important;
        max-width: 820px !important;
    }
}

/* 手机 */
@media (max-width: 720px) {
    #yl-home-hero .yl-home-hero-headline-container {
        width: calc(100% - 36px) !important;
    }

    #yl-home-hero .yl-home-hero-headline {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(32px, 8.5vw, 44px) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.025em !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* 减少动态效果时保留清晰标题 */
@media (prefers-reduced-motion: reduce) {
    #yl-home-hero .yl-home-hero-headline {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}





/* =========================================================
   HOMEPAGE HERO V2.5
   1. Hide bottom scroll indicator and slide controls
   2. Add cinematic fade + subtle 3D transition
   Scope: homepage hero only
   ========================================================= */

/* 隐藏首屏底部 SCROLL 提示、轮播数字和圆点 */
#yl-home-hero .yl-home-hero-scroll,
#yl-home-hero .yl-home-hero-controls {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 给轮播增加轻微 3D 景深 */
#yl-home-hero .yl-home-hero-slides {
    perspective: 1600px;
    perspective-origin: center center;
}

/* 非当前画面：轻微偏移、缩小并淡出 */
#yl-home-hero .yl-home-hero-slide {
    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translate3d(2.2%, 0, 0)
        rotateY(-1.2deg)
        scale(1.025) !important;

    transform-origin: center center;
    backface-visibility: hidden;
    will-change: opacity, transform;

    transition:
        opacity .85s ease,
        transform 1.15s cubic-bezier(.22, .61, .36, 1),
        visibility .85s linear !important;
}

/* 当前画面：平滑进入 */
#yl-home-hero .yl-home-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translate3d(0, 0, 0)
        rotateY(0deg)
        scale(1) !important;

    z-index: 2 !important;
    pointer-events: auto !important;
}

/* 非当前画面不响应交互 */
#yl-home-hero .yl-home-hero-slide:not(.is-active) {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* 手机端也保持同样的轮播过渡 */
@media (max-width: 720px) {
    #yl-home-hero .yl-home-hero-slide {
        transform:
            translate3d(1.5%, 0, 0)
            rotateY(-0.6deg)
            scale(1.02) !important;
    }

    #yl-home-hero .yl-home-hero-slide.is-active {
        transform:
            translate3d(0, 0, 0)
            rotateY(0deg)
            scale(1) !important;
    }
}

/* 尊重用户系统中的减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
    #yl-home-hero .yl-home-hero-slide {
        transition: opacity .2s ease, visibility .2s linear !important;
        transform: none !important;
    }
}