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

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:contain;


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;


}