/* =================================================
LUNQHAL BRAND HOMEPAGE V1.3.3
FINAL PRODUCTION CSS
Merged Base + Scoped Correction Patch
================================================= */

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

LUNQHAL BRAND HOMEPAGE V1.3

APPLE EDITORIAL LAYOUT SYSTEM

CSS PRODUCTION BUILD

PART 1/3

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


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


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

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

margin:0;

background:#000;

color:#fff;

font-family:

-apple-system,

BlinkMacSystemFont,

"SF Pro Display",

"Helvetica Neue",

Arial,

sans-serif;


-webkit-font-smoothing:antialiased;


}


img{

display:block;

max-width:100%;

}


a{

color:inherit;

text-decoration:none;

}


button{

font-family:inherit;

}



/* =================================================
02. DESIGN TOKENS
================================================= */


:root{


--lhq-black:#000000;


--lhq-white:#ffffff;


--lhq-gray:#86868b;


--lhq-light-gray:#d2d2d7;


--lhq-gold:#C9A24A;


--lhq-card:#111111;



--lhq-container:1200px;



--lhq-radius:18px;



--lhq-btn-radius:22px;



--lhq-section-space:120px;



}


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

Apple Content Width

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


.lhq-container{


width:100%;


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


margin:0 auto;


padding-left:24px;

padding-right:24px;


}



/* =================================================
04. GLOBAL SECTION

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


.lhq-section{


padding-top:var(--lhq-section-space);


padding-bottom:var(--lhq-section-space);


}



.lhq-section-large{


padding-top:160px;


padding-bottom:160px;


}



/* =================================================
05. TYPOGRAPHY SYSTEM

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


h1,
h2,
h3,
p{


margin:0;


}




.lhq-title-xl{


font-size:64px;


line-height:1.05;


font-weight:600;


letter-spacing:-0.045em;


}



.lhq-title-lg{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.035em;


}



.lhq-title-md{


font-size:36px;


line-height:1.15;


font-weight:600;


}



.lhq-body{


font-size:18px;


line-height:1.6;


color:var(--lhq-light-gray);


letter-spacing:-0.01em;


}



.lhq-small{


font-size:14px;


color:var(--lhq-gray);


}




/* =================================================
06. HEADER

Apple Style Navigation

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


.lhq-header{


position:fixed;


top:0;


left:0;


width:100%;


height:52px;


z-index:999;



background:

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



backdrop-filter:

blur(20px);


-webkit-backdrop-filter:

blur(20px);



}



.lhq-nav-container{


height:52px;


display:flex;


align-items:center;


justify-content:space-between;


}



/* Logo */


.lhq-logo{


display:flex;


align-items:center;


height:24px;


}



.lhq-logo img{


height:24px;


width:auto;


}




/* Navigation */


.lhq-nav{


display:flex;


align-items:center;


gap:36px;


font-size:14px;


color:#d6d6d6;


}



.lhq-nav a{


transition:

color .3s ease;


}



.lhq-nav a:hover{


color:#fff;


}



/* =================================================
07. BUTTON SYSTEM

Apple Pill Button

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



.lhq-btn{


display:inline-flex;


align-items:center;


justify-content:center;



height:44px;


padding:

0 26px;



border-radius:

var(--lhq-btn-radius);



background:

#fff;



color:#000;



font-size:15px;


font-weight:500;



transition:

all .3s ease;


}



.lhq-btn:hover{


transform:

translateY(-2px);



opacity:.85;


}



.lhq-btn-outline{


background:

transparent;


border:

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


color:#fff;


}




/* =================================================
08. HERO H01

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



.lhq-hero{


position:relative;


width:100%;


overflow:hidden;


}




.lhq-hero picture,


.lhq-hero img{


width:100%;


}



.lhq-hero img{


height:auto;


}





/* Hero Overlay */


.lhq-hero-overlay{


position:absolute;



left:6.7%;


top:31%;



width:420px;



}




.lhq-hero-overlay h1{


font-size:56px;


line-height:1.05;


font-weight:600;



letter-spacing:-0.04em;


margin-bottom:24px;


}




.lhq-hero-overlay p{


font-size:18px;


line-height:1.6;


color:#ddd;


margin-bottom:36px;


}



/* =================================================
09. EDITORIAL MODULE

H02 / H03

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


.lhq-editorial{


position:relative;


max-width:1200px;


margin:

120px auto 0;


overflow:hidden;


border-radius:

var(--lhq-radius);


}



.lhq-editorial-media{


width:100%;


}



.lhq-editorial-media img{


width:100%;


height:auto;


border-radius:

var(--lhq-radius);


}





/* Overlay Content */


.lhq-editorial-content{


position:absolute;


left:6%;


bottom:12%;


width:420px;


}



.lhq-editorial-content h2{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.035em;


margin-bottom:22px;


}



.lhq-editorial-content p{


font-size:18px;


line-height:1.6;


color:#ddd;


margin-bottom:30px;


}




/* Text Link */


.lhq-link{


font-size:17px;


color:#fff;


transition:.3s;


}



.lhq-link:hover{


color:var(--lhq-gold);


}


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

10. H04 PRODUCT MODULE

SL016 PRODUCT EXPERIENCE

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



.lhq-product{


max-width:1200px;


margin:

160px auto;


display:grid;


grid-template-columns:

1fr 1fr;



align-items:center;



gap:80px;


padding:

0 24px;



}



/* Product Image */


.lhq-product-image{


width:100%;


}



.lhq-product-image img{


width:100%;


border-radius:

var(--lhq-radius);



}





/* Product Content */


.lhq-product-content{


max-width:520px;


}



.lhq-product-content h2{


font-size:22px;


font-weight:500;


color:

var(--lhq-gold);



letter-spacing:.02em;


margin-bottom:18px;


}



.lhq-product-content h3{


font-size:52px;


line-height:1.08;


font-weight:600;


letter-spacing:-0.04em;



margin-bottom:24px;


}



.lhq-product-content p{


font-size:18px;


line-height:1.6;


color:#d2d2d7;



margin-bottom:40px;


}



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

SL016 FEATURE SPEC SYSTEM

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



.lhq-product-specs{


display:flex;


gap:48px;


margin-bottom:44px;



}



.lhq-product-specs div{


display:flex;


flex-direction:column;


gap:8px;


}



.lhq-product-specs strong{


font-size:38px;


line-height:1;


font-weight:600;



color:

var(--lhq-gold);


}



.lhq-product-specs span{


font-size:15px;


color:

#b0b0b0;



}





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

11. OUTDOOR APPLICATION GRID

V01-V04

APPLE CARD SYSTEM

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



.lhq-applications{


max-width:1200px;


margin:

160px auto;


padding:

0 24px;


}





.lhq-section-header{


text-align:center;


margin-bottom:70px;


}



.lhq-section-header h2{


font-size:48px;


line-height:1.1;


font-weight:600;


letter-spacing:-0.04em;


margin-bottom:18px;


}




.lhq-section-header p{


font-size:18px;


color:#aaa;


}




/* Grid */


.lhq-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);



gap:

24px;


}





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

Application Card

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



.lhq-card{


position:relative;


height:620px;



overflow:hidden;


border-radius:

var(--lhq-radius);



background:

var(--lhq-card);


}



.lhq-card img{


width:100%;


height:100%;


object-fit:cover;



transition:

transform .8s cubic-bezier(.2,.8,.2,1);


}



.lhq-card:hover img{


transform:

scale(1.04);


}





/* Dark gradient for text readability */


.lhq-card::after{


content:"";


position:absolute;


left:0;


bottom:0;


width:100%;


height:45%;



background:

linear-gradient(

transparent,

rgba(0,0,0,.75)

);



pointer-events:none;


}





/* Card Content */


.lhq-card-content{


position:absolute;


left:40px;


bottom:42px;


z-index:2;


max-width:360px;


}



.lhq-card-content h3{


font-size:32px;


line-height:1.1;


font-weight:600;



margin-bottom:12px;


}



.lhq-card-content p{


font-size:16px;


line-height:1.5;



color:#ddd;



margin-bottom:20px;


}



.lhq-card-content a{


font-size:16px;


color:#fff;



transition:.3s;


}



.lhq-card-content a:hover{


color:

var(--lhq-gold);


}



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

12. V05 FUTURE HOME

BRAND VISION MODULE

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



.lhq-future{


position:relative;


max-width:1200px;


margin:

160px auto;



overflow:hidden;


border-radius:

var(--lhq-radius);


}



.lhq-future img{


width:100%;


height:auto;


border-radius:

var(--lhq-radius);


}



/* Overlay */


.lhq-future-content{


position:absolute;


left:50%;


bottom:12%;


transform:

translateX(-50%);



width:600px;


text-align:center;


}



.lhq-future-content h2{


font-size:56px;


line-height:1.05;


font-weight:600;



letter-spacing:-0.045em;



margin-bottom:22px;


}



.lhq-future-content p{


font-size:20px;


line-height:1.5;


color:#ddd;


margin-bottom:36px;


}





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

13. FOOTER SYSTEM

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



.lhq-footer{


margin-top:160px;


padding:

80px 0;



border-top:

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



background:#000;


}




.lhq-footer img{


height:28px;


width:auto;


margin-bottom:24px;


}



.lhq-footer p{


font-size:15px;


color:#999;


}





.lhq-footer-links{


display:flex;


gap:36px;


margin:

40px 0;


}



.lhq-footer-links a{


font-size:14px;


color:#aaa;



transition:.3s;


}



.lhq-footer-links a:hover{


color:#fff;


}



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

14. GLOBAL HOVER MICRO INTERACTION

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



.lhq-card,


.lhq-btn,


.lhq-link{


-webkit-tap-highlight-color:

transparent;


}





.lhq-card:hover{


cursor:pointer;


}



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

15. LARGE SCREEN OPTIMIZATION

1440px+

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



@media(min-width:1440px){



.lhq-hero-overlay{


left:

calc(

(100vw - 1200px)/2

);


}



}



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

16. SMOOTH BRAND ANIMATION SYSTEM

Apple Style Motion

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


/*
基础动画原则：

- 快速响应
- 不夸张
- 强调高级感

Duration:

0.3s - 0.8s

*/




.lhq-animate{


opacity:0;


transform:

translateY(30px);



transition:

opacity .8s ease,

transform .8s cubic-bezier(.2,.8,.2,1);



}




.lhq-animate.active{


opacity:1;


transform:none;


}





/* 图片进入动画 */


.lhq-image-reveal{


overflow:hidden;


}




.lhq-image-reveal img{


transform:

scale(1.05);


transition:

transform 1.2s cubic-bezier(.2,.8,.2,1);



}




.lhq-image-reveal.active img{


transform:

scale(1);


}






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

17. SCROLL REVEAL SYSTEM

配合 brand.js

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



.lhq-reveal{


opacity:0;


transform:

translateY(40px);


transition:


opacity .9s ease,


transform .9s ease;


}



.lhq-reveal.is-visible{


opacity:1;


transform:none;


}






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

18. REDUCED MOTION ACCESSIBILITY

用户关闭动画时

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



@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;


}



.lhq-reveal,
.lhq-animate{


opacity:1;


transform:none;


}



}





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

19. FOCUS ACCESSIBILITY

Keyboard Navigation

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



a:focus-visible,


button:focus-visible{


outline:

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



outline-offset:

4px;



border-radius:

6px;


}





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

20. MOBILE RESPONSIVE FRAMEWORK

基础接口

Desktop First

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



@media(max-width:1024px){



.lhq-nav{


gap:20px;


}



.lhq-product{


grid-template-columns:

1fr;



gap:50px;


}



.lhq-grid{


grid-template-columns:

1fr;


}



}




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

21. TABLET

768px

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



@media(max-width:768px){



:root{


--lhq-section-space:

80px;


}



/* Container */


.lhq-container{


padding-left:

20px;


padding-right:

20px;


}





/* Header */


.lhq-header{


height:

48px;


}



.lhq-nav{


display:none;


}





.lhq-logo img{


height:

22px;


}







/* Typography */


.lhq-title-xl{


font-size:

42px;


}



.lhq-title-lg{


font-size:

36px;


}



.lhq-title-md{


font-size:

28px;


}



.lhq-body{


font-size:

16px;


}





/* Hero */


.lhq-hero-overlay{


left:

24px;


right:

24px;


top:

auto;


bottom:

60px;


width:auto;


}



.lhq-hero-overlay h1{


font-size:

42px;


}





/* Editorial */


.lhq-editorial{


margin-top:

80px;


border-radius:

14px;


}




.lhq-editorial-content{


position:

absolute;


left:

24px;


bottom:

36px;


width:

calc(100% - 48px);


}




.lhq-editorial-content h2{


font-size:

36px;


}




/* Product */


.lhq-product{


margin:

100px auto;


padding:

0 20px;


}



.lhq-product-content h3{


font-size:

38px;


}



.lhq-product-specs{


gap:

24px;


flex-wrap:

wrap;


}




.lhq-product-specs strong{


font-size:

30px;


}





/* Application Cards */


.lhq-applications{


margin:

100px auto;


}



.lhq-grid{


gap:

16px;


}



.lhq-card{


height:

480px;


border-radius:

16px;


}



.lhq-card-content{


left:

24px;


bottom:

28px;


}




.lhq-card-content h3{


font-size:

28px;


}





/* Future */


.lhq-future-content{


width:

calc(100% - 40px);


bottom:

50px;


}



.lhq-future-content h2{


font-size:

38px;


}



}






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

22. SMALL PHONE

iPhone 390px

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



@media(max-width:430px){



.lhq-btn{


height:

42px;


padding:

0 22px;


}



.lhq-hero-overlay h1{


font-size:

36px;


}




.lhq-card{


height:

420px;


}



.lhq-future-content h2{


font-size:

32px;


}



}




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

23. IPHONE SAFE AREA SUPPORT

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



@supports(padding:max(0px)){



.lhq-header{


padding-top:

env(safe-area-inset-top);


}



.lhq-footer{


padding-bottom:

calc(

80px +

env(safe-area-inset-bottom)

);


}



body{


padding-bottom:

env(safe-area-inset-bottom);


}



}




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

24. CLOUDFLARE PERFORMANCE OPTIMIZATION

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



/*

图片优化：

HTML:

loading="lazy"

fetchpriority="high"

用于Hero

*/



.lhq-card img,


.lhq-editorial img,


.lhq-product img{


content-visibility:auto;


}




/*

GPU acceleration

*/

.lhq-card,


.lhq-editorial,


.lhq-product{


contain:

layout paint;


}




/*

减少重绘

*/

.lhq-card img,


.lhq-btn{


will-change:

transform;


}





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

25. PRINT RESET

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



@media print{


.lhq-header{


display:none;


}


}



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

END

LUNQHAL BRAND HOMEPAGE V1.3 CSS

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

/* =================================================
V1.3.3 CORRECTION PATCH
Appended after base styles so scoped corrections take precedence.
================================================= */

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

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 1/3

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



/* =========================
01 GLOBAL VARIABLES
========================= */


:root {


--lhq-black:#000;


--lhq-dark:#050505;


--lhq-white:#fff;


--lhq-gray:#86868b;


--lhq-container:

1440px;


--lhq-padding:

48px;


--lhq-radius:

28px;


--lhq-transition:

cubic-bezier(.4,0,.2,1);



}




* {


box-sizing:border-box;


}





html {


scroll-behavior:smooth;


}





body {


margin:0;


background:#000;


color:#fff;


font-family:

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


}







/* =========================
02 HEADER FINAL SYSTEM
========================= */



.lhq-header {


position:fixed;


top:0;


left:0;


width:100%;


height:72px;


z-index:1000;


background:

rgba(0,0,0,.72);


backdrop-filter:

blur(20px);


-webkit-backdrop-filter:

blur(20px);


border-bottom:

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


}





.lhq-header-inner {


height:100%;


max-width:

1440px;


margin:auto;


padding:

0 var(--lhq-padding);


display:flex;


align-items:center;


justify-content:space-between;


}





/* Logo */


.lhq-logo {


display:flex;


align-items:center;


}





.lhq-logo img {


width:120px;


height:auto;


display:block;


}





/* Navigation */


.lhq-navigation {


display:flex;


align-items:center;


gap:42px;


}





.lhq-navigation a {


color:

rgba(255,255,255,.88);


text-decoration:none;


font-size:14px;


font-weight:400;


letter-spacing:.02em;


transition:

color .3s ease;


}





.lhq-navigation a:hover {


color:#fff;


}





/* Mobile Button */


.lhq-menu-button {


display:none;


background:none;


border:0;


padding:8px;


}





.lhq-menu-button span {


display:block;


width:22px;


height:1px;


background:#fff;


margin:5px 0;


}









/* =========================
03 HERO H01 SYSTEM

2400×840

NO CROP

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





.lhq-hero {


position:relative;


width:100%;


overflow:hidden;


}





.lhq-hero picture {


display:block;


width:100%;


}





.lhq-hero img {


display:block;


width:100%;


height:auto;


object-fit:contain;


}








/* H01 Overlay */


.lhq-hero-overlay {


position:absolute;


left:

max(48px,calc((100vw - 1440px)/2));


bottom:90px;


max-width:560px;


z-index:2;


}





.lhq-hero-overlay h1 {


margin:0 0 22px;


font-size:

64px;


line-height:

1.05;


font-weight:

600;


letter-spacing:

-.04em;


}





.lhq-hero-overlay p {


margin:0 0 34px;


font-size:

22px;


line-height:

1.45;


color:

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


}





/* =========================
04 BUTTON SYSTEM

APPLE STYLE

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


.lhq-btn {


display:inline-flex;


align-items:center;


justify-content:center;


height:48px;


padding:

0 28px;


border-radius:

999px;


background:#fff;


color:#000;


font-size:15px;


font-weight:500;


text-decoration:none;


transition:

transform .3s ease,
background .3s ease;


}





.lhq-btn:hover {


transform:

translateY(-2px);


background:#f5f5f5;


}









/* =========================
05 EDITORIAL IMAGE SYSTEM

H02/H03/V05

2400×1350

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





.lhq-editorial {


position:relative;


margin:

120px auto;


max-width:

1440px;


border-radius:

var(--lhq-radius);


overflow:hidden;


}





.lhq-media {


position:relative;


width:100%;


}





.lhq-media picture {


display:block;


}





.lhq-media img {


display:block;


width:100%;


height:auto;


object-fit:contain;


background:#000;


}






/* Editorial Overlay */


.lhq-editorial-overlay {


position:absolute;


left:64px;


bottom:64px;


max-width:560px;


z-index:2;


}





.lhq-editorial-overlay h2 {


margin:0 0 18px;


font-size:

52px;


line-height:

1.08;


letter-spacing:

-.03em;


}





.lhq-editorial-overlay p {


margin:0 0 28px;


font-size:

20px;


line-height:

1.45;


color:

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


}


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

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 2/3

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







/* =========================
06 H04 SL016 PRODUCT SYSTEM

PREMIUM PRODUCT SHOWCASE

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





.lhq-product {


position:relative;


max-width:1440px;


margin:

120px auto;


padding:

80px;


display:grid;


grid-template-columns:

42% 58%;


align-items:center;


gap:40px;


background:#080808;


border-radius:

28px;


overflow:hidden;


}







/* Product Copy */


.lhq-product-copy {


position:relative;


z-index:2;


}





.lhq-product-copy > span {


display:block;


margin-bottom:20px;


font-size:14px;


letter-spacing:.2em;


color:

rgba(255,255,255,.55);


text-transform:uppercase;


}





.lhq-product-copy h2 {


margin:0 0 22px;


font-size:

56px;


line-height:

1.05;


letter-spacing:

-.04em;


font-weight:600;


}





.lhq-product-copy p {


margin:0 0 42px;


max-width:520px;


font-size:

20px;


line-height:

1.5;


color:

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


}







/* Product Image */


.lhq-product-media {


width:100%;


overflow:hidden;


}





.lhq-product-media picture {


display:block;


}





.lhq-product-media img {


display:block;


width:100%;


height:auto;


object-fit:contain;


}









/* =========================
07 SL016 FEATURE ICON SYSTEM

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





.lhq-feature-rail {


display:flex;


gap:20px;


margin-bottom:42px;


}





.lhq-feature {


width:120px;


min-height:120px;


padding:

18px;


border-radius:

18px;


background:

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


display:flex;


flex-direction:column;


justify-content:center;


align-items:flex-start;


transition:

transform .3s ease,
background .3s ease;


}





.lhq-feature:hover {


transform:

translateY(-5px);


background:

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


}





.lhq-feature img {


width:28px;


height:28px;


margin-bottom:14px;


object-fit:contain;


}





.lhq-feature strong {


font-size:

26px;


line-height:1;


font-weight:600;


}





.lhq-feature span {


margin-top:8px;


font-size:

13px;


color:

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


}











/* =========================
08 GALLERY SYSTEM

V01-V04

APPLE CARD GRID

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





.lhq-gallery {


max-width:

1440px;


margin:

120px auto;


padding:

0 48px;


}





.lhq-gallery-header {


text-align:center;


margin-bottom:60px;


}





.lhq-gallery-header h2 {


margin:0 0 16px;


font-size:

52px;


letter-spacing:

-.04em;


}





.lhq-gallery-header p {


margin:0;


font-size:

20px;


color:

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


}









/* 2 × 2 GRID */


.lhq-gallery-grid {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:28px;


}









/* Card */


.lhq-gallery-card {


position:relative;


display:block;


height:

520px;


border-radius:

28px;


overflow:hidden;


background:#111;


text-decoration:none;


}





.lhq-gallery-card picture {


display:block;


width:100%;


height:100%;


}





.lhq-gallery-card img {


display:block;


width:100%;


height:100%;


object-fit:cover;


background:#111;


transition:

transform .8s cubic-bezier(.2,.8,.2,1);


}








/* Image Hover */


.lhq-gallery-card:hover img {


transform:

scale(1.04);


}









/* =========================
09 OVERLAY PROTECTION

TEXT READABILITY

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





.lhq-hero::after,


.lhq-editorial::after,


.lhq-gallery-card::after,


.lhq-future::after {


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

180deg,

transparent 35%,

rgba(0,0,0,.65) 100%

);


pointer-events:none;


}









/* Gallery Text Overlay */


.lhq-gallery-overlay {


position:absolute;


left:40px;


bottom:36px;


z-index:2;


}





.lhq-gallery-overlay h3 {


margin:0 0 12px;


font-size:

36px;


line-height:

1.1;


letter-spacing:

-.03em;


}





.lhq-gallery-overlay p {


margin:0;


font-size:

17px;


line-height:

1.45;


color:

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


}











/* =========================
10 CARD MOTION SYSTEM

PREMIUM INTERACTION

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





.lhq-gallery-card {


transition:

transform .35s ease,
box-shadow .35s ease;


}





.lhq-gallery-card:hover {


transform:

translateY(-6px);


box-shadow:

0 20px 60px rgba(0,0,0,.45);


}





.lhq-product {


transition:

transform .35s ease;


}





.lhq-product:hover {


transform:

translateY(-3px);


}


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

LUNQHAL BRAND HOMEPAGE V1.3.2

FINAL PRODUCTION CORRECTION PATCH

PART 3/3

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







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

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





.lhq-future {


position:relative;


max-width:

1440px;


margin:

120px auto;


border-radius:

28px;


overflow:hidden;


}





.lhq-future picture {


display:block;


}





.lhq-future img {


display:block;


width:100%;


height:auto;


object-fit:contain;


background:#000;


}





.lhq-future-overlay {


position:absolute;


left:64px;


bottom:64px;


max-width:620px;


z-index:2;


}





.lhq-future-overlay h2 {


margin:0 0 20px;


font-size:

56px;


line-height:

1.05;


letter-spacing:

-.04em;


}





.lhq-future-overlay p {


margin:0 0 32px;


font-size:

20px;


line-height:

1.5;


color:

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


}







.lhq-future-tags {


display:flex;


gap:14px;


flex-wrap:wrap;


}





.lhq-future-tags span {


padding:

10px 18px;


border-radius:

999px;


background:

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


backdrop-filter:

blur(12px);


font-size:

14px;


border:

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


}









/* =========================
12 FOOTER SYSTEM

PREMIUM BRAND FOOTER

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





.lhq-footer {


margin-top:

160px;


padding:

80px 48px 40px;


background:#050505;


border-top:

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


}





.lhq-footer-inner {


max-width:

1440px;


margin:auto;


}





.lhq-footer-brand {


margin-bottom:

60px;


}





.lhq-footer-brand img {


width:

140px;


height:auto;


}





.lhq-footer-brand p {


margin-top:20px;


font-size:

18px;


color:

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


}







.lhq-footer-columns {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:40px;


padding-bottom:

60px;


border-bottom:

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


}





.lhq-footer-column {


display:flex;


flex-direction:column;


gap:14px;


}





.lhq-footer-column h4 {


margin:0 0 10px;


font-size:

14px;


color:#fff;


}





.lhq-footer-column a {


font-size:

14px;


color:

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


text-decoration:none;


transition:

color .3s ease;


}





.lhq-footer-column a:hover {


color:#fff;


}





.lhq-footer-bottom {


padding-top:

32px;


display:flex;


justify-content:space-between;


align-items:center;


font-size:

13px;


color:

rgba(255,255,255,.5);


}





.lhq-footer-legal {


display:flex;


gap:28px;


}





.lhq-footer-legal a {


color:

rgba(255,255,255,.5);


text-decoration:none;


}









/* =========================
13 MOBILE RESPONSIVE

768px

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





@media(max-width:768px){





:root {


--lhq-padding:

20px;


}







/* HEADER */


.lhq-header {


height:

64px;


}





.lhq-header-inner {


padding:

0 20px;


}





.lhq-logo img {


width:

96px;


}





.lhq-navigation {


display:none;


}





.lhq-menu-button {


display:block;


}









/* HERO */


.lhq-hero-overlay {


left:

24px;


right:

24px;


bottom:

40px;


}





.lhq-hero-overlay h1 {


font-size:

38px;


}





.lhq-hero-overlay p {


font-size:

17px;


}









/* EDITORIAL */


.lhq-editorial {


margin:

60px 20px;


border-radius:

20px;


}





.lhq-editorial-overlay {


left:

24px;


right:

24px;


bottom:

30px;


}





.lhq-editorial-overlay h2 {


font-size:

34px;


}





.lhq-editorial-overlay p {


font-size:

16px;


}









/* PRODUCT */


.lhq-product {


margin:

60px 20px;


padding:

30px;


display:flex;


flex-direction:column-reverse;


gap:40px;


}





.lhq-product-copy h2 {


font-size:

38px;


}





.lhq-product-copy p {


font-size:

16px;


}








.lhq-feature-rail {


gap:

12px;


}





.lhq-feature {


width:

100px;


min-height:

100px;


}





.lhq-feature strong {


font-size:

22px;


}









/* GALLERY */


.lhq-gallery {


padding:

0 20px;


margin:

70px auto;


}





.lhq-gallery-grid {


grid-template-columns:

1fr;


gap:

18px;


}





.lhq-gallery-card {


height:

420px;


}





.lhq-gallery-overlay {


left:

24px;


bottom:

24px;


}





.lhq-gallery-overlay h3 {


font-size:

30px;


}







/* FUTURE */


.lhq-future {


margin:

60px 20px;


}





.lhq-future-overlay {


left:

24px;


bottom:

30px;


}





.lhq-future-overlay h2 {


font-size:

38px;


}





.lhq-future-tags span {


font-size:

12px;


padding:

8px 14px;


}









/* FOOTER */


.lhq-footer {


padding:

60px 20px 30px;


}





.lhq-footer-columns {


grid-template-columns:

1fr 1fr;


gap:

32px;


}





.lhq-footer-bottom {


flex-direction:column;


align-items:flex-start;


gap:

20px;


}







}





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

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





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



* {


animation:none!important;


transition:none!important;


scroll-behavior:auto!important;


}



}





/* Keyboard Focus */


a:focus-visible,


button:focus-visible {


outline:

2px solid #fff;


outline-offset:

4px;


}









/* =========================
15 FINAL CLEANUP

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





img {


max-width:100%;


}





picture {


overflow:hidden;


}





a {


-webkit-tap-highlight-color:

transparent;


}





button {


cursor:pointer;


}


/* =========================
H03 OUTDOOR POSITION PATCH
========================= */


.lhq-outdoor .lhq-editorial-overlay{

top:80px;

left:80px;

bottom:auto;

}


/* =========================
SL016 IMAGE SCALE
========================= */


.lhq-sl016 .lhq-product-media img{


transform:scale(1.3);


}



/* =========================
V05 FUTURE CENTER
========================= */


.lhq-future-home .lhq-future-overlay{


left:50%;

top:50%;

bottom:auto;

transform:

translate(-50%,-50%);

text-align:center;


}