/*
================================================

LUNQHAL BRAND HOMEPAGE V1.3.1

PREMIUM EDITORIAL CSS SYSTEM

Production Build

================================================
*/


/* =================================================
01. RESET
================================================= */


*,
*::before,
*::after{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

margin:0;

padding:0;

font-family:

-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Helvetica Neue",
Arial,
sans-serif;

background:#000;

color:#fff;

-webkit-font-smoothing:antialiased;

}



img{

display:block;

max-width:100%;

}



a{

color:inherit;

text-decoration:none;

}



button{

font-family:inherit;

}









/* =================================================
02. GLOBAL VARIABLES
================================================= */


:root{


--lhq-black:#000;

--lhq-dark:#050505;

--lhq-white:#fff;


--lhq-gold:#d6b36a;


--lhq-gray:

rgba(255,255,255,.65);



--lhq-container:

1280px;



--lhq-radius:

28px;



--lhq-transition:

.35s ease;



}











/* =================================================
03. CONTAINER SYSTEM
================================================= */


.lhq-container{


width:100%;

max-width:var(--lhq-container);

margin:0 auto;

padding-left:40px;

padding-right:40px;


}











/* =================================================
04. HEADER NAVIGATION

Apple Style

================================================= */


.lhq-header{


position:fixed;

top:0;

left:0;

width:100%;


height:64px;


z-index:1000;


background:

rgba(0,0,0,.55);


backdrop-filter:

blur(20px);


}



.lhq-nav-container{


height:100%;

max-width:1280px;

margin:auto;


padding:

0 40px;


display:flex;

align-items:center;

justify-content:space-between;


}





.lhq-logo img{


width:120px;

height:auto;


}





.lhq-nav{


display:flex;

align-items:center;

gap:36px;


}




.lhq-nav a{


font-size:14px;

font-weight:400;

color:

rgba(255,255,255,.82);


transition:

opacity var(--lhq-transition);


}




.lhq-nav a:hover{


opacity:.55;


}









/* =================================================
05. BUTTON SYSTEM

Premium Pill Button

================================================= */



.lhq-btn{


display:inline-flex;


align-items:center;

justify-content:center;


height:46px;


padding:

0 30px;


border-radius:

999px;


background:#fff;


color:#111;


font-size:14px;


font-weight:500;


letter-spacing:-.01em;


transition:

transform .3s ease,

opacity .3s ease;


}




.lhq-btn:hover{


transform:

translateY(-2px);


opacity:.86;


}






.lhq-text-link{


font-size:16px;


color:white;


transition:

opacity .3s ease;


}



.lhq-text-link:hover{


opacity:.65;


}









/* =================================================
06. H01 HERO

BRAND HERO

================================================= */



.lhq-hero{


position:relative;


width:100%;


height:

min(840px,100vh);


overflow:hidden;


}





.lhq-hero picture,

.lhq-hero img{


width:100%;

height:100%;


}




.lhq-hero img{


object-fit:cover;


}





.lhq-image-link{


display:block;

width:100%;

height:100%;


}








.lhq-hero-gradient{


position:absolute;


inset:0;


background:

linear-gradient(

90deg,

rgba(0,0,0,.55),

rgba(0,0,0,.05)

);


}







.lhq-hero-overlay{


position:absolute;


left:80px;


bottom:120px;


max-width:520px;


z-index:5;


}





.lhq-hero-overlay h1{


margin:0;


font-size:

64px;


line-height:

1.05;


font-weight:600;


letter-spacing:

-.04em;


}





.lhq-hero-overlay p{


margin:

24px 0 36px;


font-size:

20px;


line-height:

1.5;


color:

rgba(255,255,255,.85);


}




/* =================================================
07. H02 / H03 EDITORIAL SYSTEM

Apple Editorial Layout

================================================= */


.lhq-editorial{


position:relative;


width:100%;


height:

min(760px,85vh);


overflow:hidden;


}



.lhq-editorial picture,

.lhq-editorial img{


width:100%;

height:100%;


}



.lhq-editorial img{


object-fit:cover;


}





.lhq-editorial-gradient{


position:absolute;


inset:0;


background:

linear-gradient(

0deg,

rgba(0,0,0,.65),

rgba(0,0,0,.05)

);


}





.lhq-editorial-content{


position:absolute;


left:50%;


bottom:90px;


transform:

translateX(-50%);


width:

min(600px,90%);


text-align:center;


z-index:5;


}




.lhq-editorial-content h2{


margin:0;


font-size:

52px;


font-weight:600;


letter-spacing:

-.04em;


line-height:

1.08;


}





.lhq-editorial-content p{


margin:

22px auto 32px;


max-width:

480px;


font-size:

18px;


line-height:

1.6;


color:

rgba(255,255,255,.8);


}











/* =================================================
H03 OUTDOOR SOLAR COLLECTION

================================================= */


#outdoor .lhq-editorial-content{


bottom:100px;


}





#outdoor .lhq-editorial-content h2{


font-size:

48px;


}











/* =================================================
08. H04 SL016 PRODUCT HERO

================================================= */



.lhq-product{


display:grid;


grid-template-columns:

1fr 1fr;


align-items:center;


gap:40px;


max-width:1280px;


margin:

0 auto;


padding:

120px 40px;


background:#000;


}





.lhq-product-content{


order:1;


}





.lhq-product-content h2{


margin:0 0 20px;


font-size:

32px;


font-weight:600;


letter-spacing:

-.03em;


color:

var(--lhq-gold);


}





.lhq-product-content h3{


margin:0;


font-size:

52px;


line-height:

1.08;


letter-spacing:

-.04em;


font-weight:600;


}





.lhq-product-description{


margin:

26px 0 40px;


font-size:

18px;


color:

rgba(255,255,255,.75);


}









.lhq-product-media{


order:2;


}





.lhq-product-media img{


width:100%;


height:auto;


object-fit:contain;


}











/* =================================================
09. SL016 FEATURE ICON SYSTEM

================================================= */



.lhq-product-features{


display:flex;


gap:24px;


margin-bottom:42px;


}





.lhq-feature-item{


display:flex;


align-items:center;


gap:12px;


}





.lhq-feature-item img{


width:34px;


height:34px;


object-fit:contain;


}





.lhq-feature-item strong{


display:block;


font-size:

24px;


line-height:

1;


font-weight:600;


}



.lhq-feature-item span{


display:block;


margin-top:5px;


font-size:

13px;


color:

rgba(255,255,255,.65);


}












/* =================================================
10. OUTDOOR APPLICATION CARD GRID

V01-V04

Apple Product Card Style

================================================= */




.lhq-applications{


max-width:

1280px;


margin:

0 auto;


padding:

120px 40px;


}





.lhq-section-header{


text-align:center;


margin-bottom:

60px;


}





.lhq-section-header h2{


font-size:

48px;


margin:0;


letter-spacing:

-.04em;


}





.lhq-section-header p{


margin-top:18px;


font-size:

18px;


color:

rgba(255,255,255,.65);


}











.lhq-card-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:

24px;


}









.lhq-card{


position:relative;


display:block;


overflow:hidden;


border-radius:

28px;


aspect-ratio:

16 / 10;


background:#111;


transition:

transform .4s ease;


}




.lhq-card:hover{


transform:

translateY(-6px);


}





.lhq-card img{


width:100%;


height:100%;


object-fit:cover;


transition:

transform .8s ease;


}





.lhq-card:hover img{


transform:

scale(1.04);


}









.lhq-card-overlay{


position:absolute;


left:40px;


bottom:36px;


z-index:2;


}





.lhq-card-overlay h3{


margin:0;


font-size:

32px;


font-weight:600;


letter-spacing:

-.03em;


}




.lhq-card-overlay p{


margin:

8px 0 0;


font-size:

16px;


color:

rgba(255,255,255,.8);


}





.lhq-card::after{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

0deg,

rgba(0,0,0,.65),

transparent 60%

);


}


/* =================================================
11. V05 FUTURE HOME

Brand Vision Section

================================================= */


.lhq-future{


height:

min(760px,85vh);


}



.lhq-future .lhq-editorial-content{


bottom:110px;


}





.lhq-future-tags{


display:flex;


justify-content:center;


gap:14px;


margin-top:32px;


}



.lhq-future-tags span{


padding:

10px 22px;


border-radius:

999px;


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.2);


font-size:

14px;


backdrop-filter:

blur(12px);


}









/* =================================================
12. FOOTER

================================================= */



.lhq-footer{


background:

#050505;


padding:

70px 40px 40px;


border-top:

1px solid rgba(255,255,255,.1);


}





.lhq-footer-container{


max-width:

1280px;


margin:auto;


display:flex;


flex-direction:column;


gap:40px;


}




.lhq-footer-brand img{


width:

130px;


}





.lhq-footer-brand p{


margin-top:

18px;


font-size:

16px;


color:

rgba(255,255,255,.6);


}








.lhq-footer-links{


display:flex;


gap:

32px;


}



.lhq-footer-links a{


font-size:

14px;


color:

rgba(255,255,255,.75);


transition:

opacity .3s ease;


}





.lhq-footer-links a:hover{


opacity:.5;


}





.lhq-copyright{


font-size:

13px;


color:

rgba(255,255,255,.45);


margin:0;


}









/* =================================================
13. SMOOTH BRAND ANIMATION

================================================= */



.lhq-reveal{


opacity:0;


transform:

translateY(40px);


animation:

lhqReveal .9s ease forwards;


}





@keyframes lhqReveal{


from{


opacity:0;


transform:

translateY(40px);


}



to{


opacity:1;


transform:

translateY(0);


}


}







.lhq-card,
.lhq-btn,
.lhq-text-link{


will-change:

transform,opacity;


}









/* =================================================
14. ACCESSIBILITY

Reduced Motion

================================================= */



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


*,
*::before,
*::after{


animation-duration:

0.01ms!important;


animation-iteration-count:

1!important;


scroll-behavior:auto!important;


transition-duration:

0.01ms!important;


}



}









/* =================================================
15. FOCUS ACCESSIBILITY

================================================= */


a:focus-visible,
button:focus-visible{


outline:

2px solid var(--lhq-gold);


outline-offset:

4px;


}









/* =================================================
16. IPHONE SAFE AREA

================================================= */



.lhq-header{


padding-top:

env(safe-area-inset-top);


}





.lhq-footer{


padding-bottom:

calc(

40px +

env(safe-area-inset-bottom)

);


}









/* =================================================
17. MOBILE RESPONSIVE

================================================= */



@media(max-width:768px){



.lhq-container{


padding:

0 20px;


}




.lhq-nav-container{


padding:

0 20px;


}





.lhq-logo img{


width:

100px;


}





.lhq-nav{


display:none;


}







.lhq-hero{


height:

720px;


}



.lhq-hero-overlay{


left:

24px;


right:

24px;


bottom:

80px;


}



.lhq-hero-overlay h1{


font-size:

42px;


}



.lhq-hero-overlay p{


font-size:

17px;


}





.lhq-editorial{


height:

620px;


}





.lhq-editorial-content{


bottom:

60px;


}



.lhq-editorial-content h2{


font-size:

36px;


}



.lhq-editorial-content p{


font-size:

16px;


}









/* PRODUCT MOBILE */


.lhq-product{


display:flex;


flex-direction:column;


padding:

70px 24px;


gap:

40px;


}





.lhq-product-content{


order:2;


}



.lhq-product-media{


order:1;


}




.lhq-product-content h3{


font-size:

38px;


}





.lhq-product-features{


display:flex;


flex-direction:column;


gap:

18px;


}





.lhq-feature-item{


gap:

14px;


}





/* APPLICATION GRID */


.lhq-applications{


padding:

80px 24px;


}



.lhq-section-header h2{


font-size:

36px;


}





.lhq-card-grid{


grid-template-columns:

1fr;


gap:

20px;


}





.lhq-card{


aspect-ratio:

4 / 3;


border-radius:

22px;


}





.lhq-card-overlay{


left:

24px;


bottom:

24px;


}





.lhq-card-overlay h3{


font-size:

26px;


}





.lhq-future-tags{


flex-direction:

column;


align-items:center;


}





.lhq-footer{


padding:

50px 24px;


}





.lhq-footer-links{


flex-wrap:

wrap;


gap:

20px;


}



}









/* =================================================
18. SMALL PHONE OPTIMIZATION

iPhone SE / compact devices

================================================= */



@media(max-width:390px){



.lhq-hero-overlay h1{


font-size:

36px;


}



.lhq-editorial-content h2{


font-size:

32px;


}



.lhq-product-content h3{


font-size:

32px;


}


}









/* =================================================
19. FINAL IMAGE PROTECTION

Prevent oversized images

================================================= */



.lhq-hero,
.lhq-editorial,
.lhq-card,
.lhq-product-media{


overflow:hidden;


}




.lhq-hero img,
.lhq-editorial img,
.lhq-card img{


user-select:none;


-webkit-user-drag:none;


}