/* =======================================================
   MADAR PREMIUM STYLE.CSS
   VERSION 2.0
======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root{

--gold:#C9A962;
--gold-light:#e0c989;
--gold-dark:#94753b;

--bg:#080808;
--bg2:#101010;
--card:#161616;

--border:#2a2a2a;

--white:#ffffff;
--text:#d8d8d8;
--gray:#999999;

--radius:20px;

--shadow:0 15px 45px rgba(0,0,0,.45);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Cairo',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

line-height:1.7;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1350px,92%);

margin:auto;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

backdrop-filter:blur(20px);

background:rgba(8,8,8,.75);

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

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.logo{

display:flex;

align-items:center;

gap:15px;

font-size:28px;

font-weight:900;

color:var(--gold);

}

.logo img{

height:52px;

}

nav{

display:flex;

gap:40px;

}

nav a{

color:#d0d0d0;

font-weight:600;

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--gold);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

.contact-btn{

background:var(--gold);

color:black;

padding:14px 28px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.contact-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(201,169,98,.3);

}

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

.hero{

position:relative;

min-height:auto;

padding-top:90px;

padding-bottom:20px;

scroll-margin-top:100px;

background:#080808;

}

.hero-stage{

position:relative;

width:min(100%,1400px);

margin:16px auto 0;

padding:0 20px;

line-height:0;

}

.hero-image-bg{

width:100%;

height:auto;

display:block;

border-radius:18px;

}

.hero-content{

position:absolute;

top:0;

right:20px;

bottom:0;

width:46%;

display:flex;

align-items:center;

justify-content:flex-end;

padding:40px 30px;

line-height:normal;

pointer-events:none;

}

.hero-text{

max-width:520px;

text-align:right;

pointer-events:auto;

}

.hero-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at 75% 45%,rgba(201,169,98,.12),transparent 35%),

linear-gradient(to bottom,#080808,#101010);

z-index:-2;

}

.hero-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero-text h1{

font-size:clamp(36px,4.2vw,58px);

line-height:1.1;

font-weight:900;

margin:25px 0;

}

.hero-text span{

color:var(--gold);

}

.hero-text p{

font-size:20px;

max-width:550px;

color:var(--text);

margin-bottom:40px;

}

.badge{

display:inline-block;

padding:10px 18px;

background:rgba(201,169,98,.12);

border:1px solid rgba(201,169,98,.25);

border-radius:999px;

color:var(--gold);

font-weight:700;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:60px;

}

.btn{

padding:16px 34px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:var(--gold);

color:black;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(201,169,98,.3);

}

.btn-outline{

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

color:var(--white);

background:transparent;

}

.btn-outline:hover{

border-color:var(--gold);

color:var(--gold);

background:rgba(201,169,98,.08);

}

.hero-info{

display:flex;

gap:60px;

}

.hero-info h3{

font-size:34px;

color:var(--gold);

}

.hero-info span{

color:var(--gray);

}

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:850px;

animation:float 5s ease-in-out infinite;

filter:

drop-shadow(0 40px 70px rgba(0,0,0,.45));

}

.glow{

position:absolute;

width:550px;

height:550px;

background:radial-gradient(circle,var(--gold),transparent 70%);

opacity:.18;

filter:blur(90px);

}

/* ===========================
FEATURED
=========================== */

.featured{

padding:70px 0;

}

.featured-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.featured-left img{

width:100%;

max-width:420px;

height:auto;

display:block;

margin:auto;

}

.featured-image img{

width:100%;

max-width:420px;

}

.section-label{

color:var(--gold);

font-weight:700;

}

.featured h2{

font-size:44px;

margin:15px 0;

}

.featured p{

color:var(--text);

font-size:18px;

margin-bottom:35px;

}

.spec-grid{

display:grid;

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

gap:20px;

margin-bottom:35px;

}

.spec{

background:var(--card);

padding:25px;

border-radius:18px;

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

transition:.3s;

}

.spec:hover{

border-color:var(--gold);

transform:translateY(-6px);

}

.spec h4{

font-size:30px;

color:var(--gold);

}

.price{

font-size:42px;

font-weight:900;

margin-bottom:30px;

}

/* continue... */

/* ===========================
CATEGORIES
=========================== */

.categories{

padding:120px 0;

background:#0d0d0d;

scroll-margin-top:100px;

}

.section-title{

text-align:center;

font-size:58px;

font-weight:900;

margin-bottom:70px;

}

.category-grid{

display:grid;

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

gap:35px;

}

.category-card{

position:relative;

display:block;

height:420px;

overflow:hidden;

border-radius:24px;

cursor:pointer;

background:#161616;

transition:.4s;

text-decoration:none;

color:inherit;

}

.category-card.active{

outline:3px solid var(--gold);

box-shadow:0 0 0 4px rgba(201,169,98,.25);

}

.category-card img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.category-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(to top,
rgba(0,0,0,.85),
rgba(0,0,0,.1));

z-index:1;

}

.category-card:hover img{

transform:scale(1.08);

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.overlay{

position:absolute;

bottom:40px;

right:40px;

z-index:2;

}

.overlay h3{

font-size:36px;

font-weight:800;

}

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

.products{

padding:130px 0;

scroll-margin-top:100px;

}

.section-header{

text-align:center;

margin-bottom:80px;

}

.section-subtitle{

color:var(--gold);

font-weight:700;

letter-spacing:2px;

}

.section-header h2{

font-size:58px;

margin:15px 0;

}

.section-header p{

color:var(--text);

font-size:18px;

}

.products-grid{

display:grid;

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

gap:30px;

}

.product-card{

background:var(--card);

border-radius:22px;

overflow:hidden;

transition:.4s;

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

cursor:pointer;

}

}

.product-card:hover{

transform:translateY(-10px);

border-color:var(--gold);

box-shadow:0 25px 60px rgba(0,0,0,.5);

}

.product-image{

height:260px;

display:flex;

align-items:center;

justify-content:center;

background:#101010;

padding:30px;

overflow:hidden;

}

.product-image img{

max-height:220px;

transition:.4s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-content{

padding:30px;

}

.product-category{

font-size:13px;

color:var(--gold);

font-weight:700;

}

.product-content h3{

margin:12px 0;

font-size:28px;

}

.product-specs{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:20px 0;

}

.product-specs span{

padding:8px 14px;

border-radius:30px;

background:#111;

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

font-size:13px;

}

.product-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:30px;

}

.product-footer h4{

font-size:30px;

color:var(--gold);

}

.product-footer .product-quickview{

padding:12px 24px;

font-size:14px;

white-space:nowrap;

}

.product-footer .product-quickview:hover{

background:#d9b872;

transform:translateY(-3px);

box-shadow:0 12px 28px rgba(200,163,95,.35);

}

/* ===========================
WHY MADAR
=========================== */

.why{

padding:120px 0;

background:#101010;

}

.why-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.why-card{

background:#171717;

padding:45px 30px;

border-radius:22px;

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

transition:.4s;

text-align:center;

}

.why-card:hover{

transform:translateY(-8px);

border-color:var(--gold);

}

.why-icon{

width:75px;

height:75px;

margin:auto;

margin-bottom:30px;

border-radius:50%;

background:rgba(201,169,98,.08);

display:flex;

align-items:center;

justify-content:center;

}

.why-icon svg{

width:34px;

height:34px;

stroke:var(--gold);

fill:none;

stroke-width:2;

stroke-linecap:round;

stroke-linejoin:round;

}

.why-icon svg.icon-filled{

fill:var(--gold);

stroke:none;

}

.why-card h3{

font-size:26px;

margin-bottom:15px;

}

.why-card p{

color:var(--text);

font-size:16px;

line-height:1.8;

}

/* ===========================
CONTACT
=========================== */

.contact{

padding:130px 0;

}

.contact-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

background:#111;

border-radius:30px;

padding:70px;

}

.contact-left h2{

font-size:55px;

margin-bottom:20px;

}

.contact-left p{

color:var(--text);

margin-bottom:40px;

}

.contact-info div{

margin-bottom:30px;

}

.contact-info h4{

color:var(--gold);

margin-bottom:6px;

}

.contact-right form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-right input,

.contact-right textarea{

background:#181818;

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

padding:18px;

border-radius:16px;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}

.contact-right input:focus,

.contact-right textarea:focus{

border-color:var(--gold);

}

.contact-right textarea{

min-height:180px;

resize:none;

}

.contact-right button{

height:60px;

background:var(--gold);

border:none;

border-radius:16px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.contact-right button:hover{

transform:translateY(-4px);

}

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

footer{

padding:80px 0 30px;

background:#050505;

border-top:1px solid #1d1d1d;

}

.footer-top{

display:grid;

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

gap:60px;

margin-bottom:60px;

}

.footer-top img{

height:60px;

margin-bottom:20px;

}

.footer-top h3{

font-size:34px;

margin-bottom:15px;

color:var(--gold);

}

.footer-top h4{

margin-bottom:25px;

font-size:20px;

}

.footer-top a{

display:block;

margin-bottom:15px;

color:var(--text);

transition:.3s;

}

.footer-top a:hover{

color:var(--gold);

}

.footer-bottom{

padding-top:30px;

border-top:1px solid #1d1d1d;

text-align:center;

color:var(--gray);

}

/* ===========================
ANIMATIONS
=========================== */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:none;

}

/* ===========================
RESPONSIVE
=========================== */

@media (max-width:1400px){

.hero-text h1{

font-size:62px;

}

.hero-image img{

width:700px;

}

.products-grid{

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

}

}

@media(max-width:1100px){

.hero-content{

width:50%;

padding:30px 20px;

}

.hero-text{

max-width:100%;

}

.hero-text h1{

font-size:clamp(32px,3.8vw,48px);

}

.hero-text p{

font-size:17px;

margin-bottom:28px;

}

.hero-buttons{

margin-bottom:40px;

}

.hero-info h3{

font-size:28px;

}

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-text{

order:2;

}

.hero-image{

order:1;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

}

.featured-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.products-grid{

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

}

.why-grid{

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

}

.contact-box{

grid-template-columns:1fr;

}

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:900px){

.hero-stage{

padding:0 12px;

}

.hero-image-bg{

border-radius:12px;

}

.hero-content{

position:static;

width:100%;

padding:24px 0 0;

justify-content:center;

pointer-events:auto;

}

.hero-text{

text-align:center;

max-width:680px;

margin:0 auto;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

}

}

@media(max-width:768px){

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-info{

justify-content:center;

flex-wrap:wrap;

gap:30px;

}

.header{

padding:0 15px;

}

.header .container{

height:75px;

}

.logo img{

height:42px;

}

.logo h2{

font-size:24px;

}

nav{

display:none;

}

.contact-btn{

display:none;

}

.hero{

padding-top:100px;

min-height:auto;

padding-bottom:80px;

}

.hero-text h1{

font-size:48px;

}

.hero-text p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

text-align:center;

}

.hero-info{

flex-direction:column;

gap:25px;

}

.hero-image img{

width:100%;

max-width:520px;

}

.section-title{

font-size:42px;

}

.section-header h2{

font-size:42px;

}

.featured h2{

font-size:44px;

}

.products-grid{

grid-template-columns:1fr;

}

.product-card{

max-width:420px;

margin:auto;

width:100%;

}

.why-grid{

grid-template-columns:1fr;

}

.footer-top{

grid-template-columns:1fr;

text-align:center;

}

.contact-box{

padding:35px;

}

.contact-left h2{

font-size:42px;

}

}

@media(max-width:500px){

.container{

width:92%;

}

.hero-text h1{

font-size:38px;

line-height:1.2;

}

.hero-text p{

font-size:16px;

}

.badge{

font-size:13px;

padding:8px 15px;

}

.hero-image img{

max-width:380px;

}

.section-title{

font-size:34px;

}

.section-header h2{

font-size:34px;

}

.featured h2{

font-size:36px;

}

.price{

font-size:34px;

}

.product-content{

padding:22px;

}

.product-footer{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.contact-box{

padding:25px;

}

.contact-left h2{

font-size:34px;

}

.contact-right button{

height:56px;

}

}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--gold-light);

}

/* ===========================
SELECTION
=========================== */

::selection{

background:var(--gold);

color:#000;

}

/* ===========================
SMOOTH FADE ANIMATION
=========================== */

.reveal{

opacity:0;

transform:translateY(60px);

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

}

.reveal.active{

opacity:1;

transform:none;

}

/* ===========================
HOVER EFFECTS
=========================== */

button,
.btn,
.product-card,
.category-card,
.spec,
.why-card{

will-change:transform;

}

button:active,

.btn:active{

transform:scale(.96);

}

/* ===========================
IMAGE SHADOW
=========================== */

.hero-image img,
.featured-image img,
.product-image img{

user-select:none;

pointer-events:none;

}

/* ===========================
QUICK VIEW MODAL
=========================== */

body.quickview-open{

overflow:hidden;

}

.quickview{

position:fixed;

inset:0;

z-index:2000;

display:flex;

align-items:center;

justify-content:center;

padding:24px;

opacity:0;

visibility:hidden;

transition:opacity 300ms ease, visibility 300ms ease;

}

.quickview.is-open{

opacity:1;

visibility:visible;

}

.quickview__overlay{

position:absolute;

inset:0;

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

}

.quickview__dialog{

position:relative;

width:100%;

max-width:1000px;

max-height:calc(100vh - 48px);

overflow:auto;

background:linear-gradient(145deg,#141414 0%,#0a0a0a 100%);

border:1px solid rgba(200,163,95,.18);

border-radius:24px;

box-shadow:0 40px 100px rgba(0,0,0,.65);

transform:scale(.95);

transition:transform 300ms ease;

}

.quickview.is-open .quickview__dialog{

transform:scale(1);

}

.quickview__close{

position:absolute;

top:20px;

left:20px;

z-index:3;

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

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

color:#fff;

cursor:pointer;

transition:transform 300ms ease, border-color 300ms ease, background 300ms ease;

}

.quickview__close:hover{

transform:rotate(90deg) scale(1.05);

border-color:#C8A35F;

background:rgba(200,163,95,.12);

color:#C8A35F;

}

.quickview__layout{

display:grid;

grid-template-columns:45% 55%;

min-height:520px;

direction:ltr;

}

.quickview__body{

display:flex;

flex-direction:column;

padding:48px 40px 40px;

text-align:right;

direction:rtl;

}

.quickview__media{

position:relative;

display:flex;

align-items:center;

justify-content:center;

padding:48px 32px;

background:radial-gradient(circle at 50% 60%,rgba(200,163,95,.14),transparent 65%);

border-right:1px solid rgba(255,255,255,.05);

overflow:hidden;

}

.quickview__glow{

position:absolute;

width:280px;

height:280px;

border-radius:50%;

background:radial-gradient(circle,rgba(200,163,95,.28),transparent 70%);

filter:blur(8px);

pointer-events:none;

}

.quickview__image{

position:relative;

z-index:1;

width:100%;

max-height:380px;

object-fit:contain;

transition:transform 300ms ease;

}

.quickview__media:hover .quickview__image{

animation:quickview-float 3s ease-in-out infinite;

}

@keyframes quickview-float{

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

50%{ transform:translateY(-10px); }

}

.quickview__category{

color:#C8A35F;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:12px;

}

.quickview__title{

font-size:clamp(32px,4vw,44px);

font-weight:900;

margin-bottom:16px;

line-height:1.15;

}

.quickview__desc{

color:var(--text);

font-size:16px;

line-height:1.8;

margin-bottom:28px;

}

.quickview__specs{

display:grid;

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

gap:12px;

margin-bottom:32px;

}

.quickview__spec{

display:flex;

flex-direction:column;

gap:6px;

padding:16px 18px;

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

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

border-radius:14px;

transition:border-color 300ms ease, background 300ms ease;

}

.quickview__spec:hover{

border-color:rgba(200,163,95,.35);

background:rgba(200,163,95,.06);

}

.quickview__spec-label{

color:var(--gray);

font-size:13px;

font-weight:600;

}

.quickview__spec-value{

color:#fff;

font-size:16px;

font-weight:700;

}

.quickview__price{

font-size:clamp(28px,3vw,38px);

font-weight:900;

color:#C8A35F;

margin-bottom:24px;

}

.quickview__actions{

display:flex;

justify-content:center;

margin-top:auto;

}

.quickview__btn{

padding:16px 24px;

border-radius:50px;

font-weight:700;

font-size:15px;

text-align:center;

cursor:pointer;

transition:transform 300ms ease, box-shadow 300ms ease, background 300ms ease;

}

.quickview__btn--primary{

width:320px;

max-width:100%;

background:#C8A35F;

color:#0a0a0a;

border:1px solid #C8A35F;

}

.quickview__btn--primary:hover{

background:#d9b872;

transform:translateY(-3px);

box-shadow:0 16px 36px rgba(200,163,95,.35);

}

@media(max-width:900px){

.quickview{

padding:16px;

}

.quickview__layout{

grid-template-columns:1fr;

min-height:auto;

}

.quickview__media{

border-right:none;

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

padding:36px 24px;

min-height:280px;

}

.quickview__body{

padding:32px 24px 28px;

}

.quickview__specs{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.quickview__close{

top:14px;

left:14px;

width:40px;

height:40px;

}

.quickview__title{

font-size:28px;

}

}

/* ===========================
RESPONSIVE SYSTEM (APPENDED)
Desktop above 1200px remains unchanged.
=========================== */

.nav-toggle,
.nav-backdrop,
.site-nav .nav-cta{
display:none;
}

@media (max-width:1200px){

.container{
width:min(92%,1120px);
}

.hero-stage{
padding:0 16px;
}

.featured-grid{
gap:40px;
}

.products-grid{
grid-template-columns:repeat(3,1fr);
}

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

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

}

@media (max-width:992px){

html,
body{
overflow-x:hidden;
}

.nav-toggle{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
width:48px;
height:48px;
padding:0;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
background:rgba(255,255,255,.04);
cursor:pointer;
z-index:1002;
transition:border-color .3s ease, background .3s ease;
}

.nav-toggle__line{
display:block;
width:22px;
height:2px;
background:#fff;
border-radius:2px;
transition:transform .3s ease, opacity .3s ease;
}

.nav-toggle.is-open .nav-toggle__line:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__line:nth-child(2){
opacity:0;
}

.nav-toggle.is-open .nav-toggle__line:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

.header-cta{
display:none;
}

.site-nav .nav-cta{
display:inline-flex;
justify-content:center;
align-items:center;
width:100%;
margin-top:12px;
min-height:48px;
}

.nav-backdrop{
display:block;
position:fixed;
inset:0;
z-index:1000;
background:rgba(0,0,0,.55);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
opacity:0;
visibility:hidden;
transition:opacity .3s ease, visibility .3s ease;
}

.nav-backdrop.is-open{
opacity:1;
visibility:visible;
}

.site-nav{
position:fixed;
top:0;
right:0;
width:min(320px,86vw);
height:100vh;
height:100dvh;
padding:100px 28px 32px;
display:flex;
flex-direction:column;
gap:8px;
background:rgba(10,10,10,.98);
border-left:1px solid rgba(200,163,95,.15);
box-shadow:-20px 0 60px rgba(0,0,0,.45);
z-index:1001;
transform:translateX(100%);
visibility:hidden;
transition:transform .3s ease, visibility .3s ease;
}

.site-nav.is-open{
transform:translateX(0);
visibility:visible;
}

.site-nav a{
display:block;
padding:14px 16px;
border-radius:12px;
font-size:17px;
font-weight:600;
color:#ececec;
transition:background .3s ease, color .3s ease;
}

.site-nav a:hover{
background:rgba(200,163,95,.1);
color:var(--gold);
}

.site-nav a::after{
display:none;
}

body.nav-open{
overflow:hidden;
}

.header .container{
position:relative;
}

.hero-content{
width:52%;
padding:32px 24px;
}

.hero-text h1{
font-size:clamp(30px,4.5vw,46px);
}

.hero-text p{
font-size:17px;
margin-bottom:32px;
}

.featured-grid{
grid-template-columns:1fr;
gap:36px;
}

.category-grid{
grid-template-columns:1fr 1fr;
gap:24px;
}

.products-grid{
grid-template-columns:repeat(2,1fr);
gap:24px;
}

.product-card{
display:flex;
flex-direction:column;
height:100%;
}

.product-content{
flex:1;
display:flex;
flex-direction:column;
}

.product-footer{
margin-top:auto;
}

.contact-box{
grid-template-columns:1fr;
}

}

@media (max-width:768px){

.hero{
padding-top:90px;
padding-bottom:16px;
}

.hero-stage{
margin-top:12px;
padding:0 12px;
}

.hero-image-bg{
border-radius:14px;
}

.hero-content{
position:static;
width:100%;
padding:24px 0 0;
}

.hero-text{
max-width:100%;
margin:0 auto;
text-align:center;
}

.hero-text h1{
font-size:clamp(28px,7vw,40px);
}

.hero-text p{
max-width:100%;
font-size:16px;
line-height:1.75;
}

.hero-buttons{
flex-direction:column;
align-items:stretch;
gap:12px;
margin-bottom:36px;
}

.hero-buttons .btn{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-info{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
justify-items:center;
text-align:center;
}

.hero-info h3{
font-size:26px;
}

.hero-info span{
font-size:13px;
}

.section-title,
.section-header h2{
font-size:clamp(30px,7vw,42px);
}

.section-header{
margin-bottom:56px;
}

.section-header p{
font-size:16px;
}

.categories,
.featured,
.why,
.products,
.contact{
padding:90px 0;
}

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

.category-card{
height:320px;
}

.products-grid{
grid-template-columns:1fr;
max-width:460px;
margin:0 auto;
}

.product-image img{
max-height:200px;
width:auto;
max-width:100%;
object-fit:contain;
}

.product-footer .product-quickview{
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
}

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

.footer-top{
grid-template-columns:1fr;
text-align:center;
}

.quickview{
padding:12px;
align-items:flex-end;
}

.quickview__dialog{
max-height:92vh;
max-height:92dvh;
border-radius:20px 20px 0 0;
}

.quickview__layout{
grid-template-columns:1fr;
min-height:auto;
}

.quickview__media{
padding:32px 20px;
min-height:240px;
border-right:none;
border-bottom:1px solid rgba(255,255,255,.05);
}

.quickview__image{
max-height:260px;
object-fit:contain;
}

.quickview__body{
padding:28px 20px 24px;
}

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

.quickview__price{
margin-bottom:20px;
}

.quickview__btn--primary{
width:100%;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
}

.quickview__close{
top:12px;
left:12px;
width:44px;
height:44px;
}

}

@media (max-width:576px){

.container{
width:92%;
}

.hero-stage{
padding:0 10px;
}

.hero-text h1{
font-size:clamp(26px,8vw,34px);
}

.hero-info{
grid-template-columns:1fr;
gap:12px;
}

.featured-left img{
max-width:100%;
}

.featured h2{
font-size:34px;
}

.product-content{
padding:24px;
}

.product-content h3{
font-size:24px;
}

.product-footer{
flex-direction:column;
align-items:stretch;
gap:14px;
}

.product-footer .product-quickview{
width:100%;
}

.contact-box{
padding:28px 20px;
}

.contact-left h2{
font-size:32px;
}

}

@media (max-width:480px){

.hero-text h1{
font-size:30px;
}

.badge{
font-size:13px;
padding:8px 14px;
}

.section-title,
.section-header h2{
font-size:30px;
}

.category-card{
height:280px;
}

.overlay{
bottom:24px;
right:24px;
}

.overlay h3{
font-size:28px;
}

.quickview__title{
font-size:26px;
}

.quickview__desc{
font-size:15px;
}

.quickview__body{
padding:24px 16px 20px;
}

}

@media (max-width:430px){

.header .container{
height:72px;
}

.logo img{
height:40px;
}

.logo h2{
font-size:22px;
}

.hero-info h3{
font-size:24px;
}

}

@media (max-width:390px){

.hero-text h1{
font-size:28px;
}

.hero-text p{
font-size:15px;
}

.product-specs span{
font-size:12px;
padding:7px 12px;
}

.why-card{
padding:32px 22px;
}

.why-card h3{
font-size:22px;
}

}

@media (max-width:375px){

.section-title,
.section-header h2{
font-size:28px;
}

.category-card{
height:250px;
}

}

@media (max-width:360px){

.container{
width:94%;
}

.hero-buttons .btn,
.product-footer .product-quickview,
.quickview__btn--primary,
.contact-btn,
.site-nav .nav-cta{
min-height:48px;
}

.nav-toggle{
width:44px;
height:44px;
}

}

/* ===========================
MOBILE PROPORTION REFINEMENTS
Tighter spacing for phones & tablets only.
=========================== */

@media (max-width:768px){

.hero{
padding-top:82px;
padding-bottom:8px;
}

.hero-stage{
margin-top:8px;
padding:0 10px;
}

.hero-image-bg{
max-height:min(38vw,210px);
width:100%;
height:auto;
object-fit:contain;
object-position:center;
}

.hero-content{
padding:14px 0 0;
}

.hero-text h1{
font-size:clamp(24px,6.5vw,34px);
margin:12px 0 10px;
line-height:1.15;
}

.hero-text p{
font-size:14px;
line-height:1.65;
margin-bottom:14px;
}

.badge{
font-size:12px;
padding:7px 12px;
margin-bottom:4px;
}

.hero-buttons{
gap:10px;
margin-bottom:18px;
}

.hero-buttons .btn{
min-height:52px;
max-height:56px;
padding:12px 22px;
font-size:14px;
}

.hero-info{
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.hero-info h3{
font-size:22px;
}

.hero-info span{
font-size:11px;
}

.categories,
.featured,
.why,
.products,
.contact{
padding:72px 0;
}

.section-header{
margin-bottom:44px;
}

.section-title,
.section-header h2{
font-size:clamp(26px,6vw,36px);
}

.section-header p{
font-size:15px;
}

.products-grid{
max-width:380px;
gap:18px;
}

.product-image{
height:195px;
padding:16px 14px;
}

.product-image img{
max-height:155px;
}

.product-content{
padding:18px 20px 20px;
}

.product-content h3{
margin:6px 0 8px;
font-size:22px;
}

.product-specs{
margin:10px 0 12px;
gap:7px;
}

.product-specs span{
padding:6px 11px;
font-size:12px;
}

.product-footer{
margin-top:10px;
gap:10px;
}

.product-footer h4{
font-size:24px;
}

.product-footer .product-quickview{
min-height:52px;
max-height:56px;
padding:10px 20px;
font-size:13px;
}

.category-card{
height:260px;
}

.quickview{
padding:8px;
}

.quickview__dialog{
max-height:90vh;
max-height:90dvh;
}

.quickview__media{
padding:24px 16px;
min-height:200px;
}

.quickview__image{
max-height:200px;
}

.quickview__body{
padding:22px 18px 18px;
}

.quickview__title{
font-size:clamp(22px,5.5vw,28px);
margin-bottom:10px;
}

.quickview__desc{
font-size:14px;
line-height:1.65;
margin-bottom:18px;
}

.quickview__specs{
gap:10px;
margin-bottom:18px;
}

.quickview__spec{
padding:12px 14px;
}

.quickview__price{
font-size:clamp(24px,5vw,30px);
margin-bottom:16px;
}

.quickview__btn--primary{
min-height:52px;
max-height:56px;
padding:12px 20px;
}

}

@media (max-width:576px){

.hero{
padding-top:78px;
padding-bottom:6px;
}

.hero-image-bg{
max-height:min(36vw,185px);
}

.hero-content{
padding:12px 0 0;
}

.hero-text h1{
font-size:clamp(22px,7vw,30px);
margin:10px 0 8px;
}

.hero-text p{
font-size:13px;
margin-bottom:12px;
}

.hero-buttons{
margin-bottom:14px;
}

.hero-info{
grid-template-columns:repeat(3,1fr);
gap:8px;
}

.hero-info h3{
font-size:20px;
}

.product-content{
padding:16px 18px 18px;
}

.product-content h3{
font-size:20px;
}

.products-grid{
max-width:360px;
}

.product-image{
height:175px;
padding:14px 12px;
}

.product-image img{
max-height:135px;
}

.featured,
.categories,
.why,
.products,
.contact{
padding:64px 0;
}

}

@media (max-width:480px){

.hero-image-bg{
max-height:min(34vw,170px);
}

.hero-text h1{
font-size:26px;
}

.section-title,
.section-header h2{
font-size:26px;
}

.category-card{
height:230px;
}

.quickview__media{
padding:20px 14px;
min-height:180px;
}

.quickview__image{
max-height:175px;
}

.quickview__body{
padding:18px 14px 16px;
}

.quickview__spec-label{
font-size:12px;
}

.quickview__spec-value{
font-size:14px;
}

}

@media (max-width:390px){

.hero-image-bg{
max-height:158px;
}

.hero-text h1{
font-size:24px;
}

.hero-buttons .btn,
.product-footer .product-quickview,
.quickview__btn--primary{
min-height:52px;
padding:11px 18px;
}

.products-grid{
max-width:340px;
}

.product-image{
height:165px;
}

.product-image img{
max-height:125px;
}

}

@media (max-width:360px){

.hero-info h3{
font-size:18px;
}

.hero-info span{
font-size:10px;
}

}

/* ===========================
MOBILE PRODUCT CARDS
Premium Apple/Tesla-style layout. Mobile only.
=========================== */

@media (max-width:768px){

.products-grid{
grid-template-columns:1fr;
max-width:380px;
margin:0 auto;
gap:28px;
}

.product-card{
display:flex;
flex-direction:column;
height:auto;
max-width:380px;
margin:0 auto;
width:100%;
}

.product-image{
height:auto;
min-height:0;
padding:22px 22px 10px;
background:
linear-gradient(180deg,rgba(200,163,95,.04) 0%,transparent 55%),
#101010;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.product-image img{
max-height:182px;
max-width:90%;
width:auto;
height:auto;
object-fit:contain;
margin:0 auto;
display:block;
}

.product-content{
display:flex;
flex-direction:column;
flex:1;
padding:14px 22px 22px;
gap:12px;
}

.product-category{
margin:0;
font-size:12px;
letter-spacing:.4px;
}

.product-content h3{
margin:0;
font-size:23px;
font-weight:800;
line-height:1.2;
}

.product-specs{
margin:0;
gap:10px;
row-gap:10px;
}

.product-specs span{
padding:7px 13px;
font-size:12px;
}

.product-footer{
margin:6px 0 0;
display:flex;
flex-direction:column;
align-items:stretch;
gap:14px;
width:100%;
}

.product-footer h4{
margin:0;
font-size:26px;
line-height:1;
}

.product-footer .product-quickview{
width:100%;
min-height:52px;
max-height:none;
padding:13px 22px;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
white-space:normal;
}

}

@media (max-width:576px){

.products-grid{
max-width:360px;
gap:24px;
}

.product-image{
padding:20px 20px 8px;
}

.product-image img{
max-height:170px;
}

.product-content{
padding:12px 20px 20px;
gap:11px;
}

.product-content h3{
font-size:21px;
}

.product-footer{
gap:12px;
}

.product-footer h4{
font-size:24px;
}

}

@media (max-width:390px){

.products-grid{
max-width:340px;
}

.product-image img{
max-height:158px;
}

.product-content{
padding:10px 20px 20px;
}

}

/* ===========================
END OF FILE
=========================== */