*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#C5A355;
--gold-light:#D4B96A;
--gold-dark:#A8893E;
--ivory:#FFFDF5;
--beige:#F5F0E8;
--beige-dark:#EDE5D5;
--white:#FFFFFF;
--text-dark:#2D2A26;
--text-medium:#5A5550;
--green-wa:#25D366;
--green-wa-dark:#1EBE5A;
}
html{scroll-behavior:smooth}
body{
font-family:'Tajawal',sans-serif;
background:var(--ivory);
color:var(--text-dark);
line-height:1.7;
overflow-x:hidden;
}

/* Zellij pattern overlay */
.zellij-bg{
position:relative;
}
.zellij-bg::before{
content:'';
position:absolute;
inset:0;
opacity:.04;
background-image:
  repeating-linear-gradient(0deg,transparent,transparent 40px,var(--gold) 40px,var(--gold) 41px),
  repeating-linear-gradient(90deg,transparent,transparent 40px,var(--gold) 40px,var(--gold) 41px),
  repeating-linear-gradient(45deg,transparent,transparent 28px,var(--gold) 28px,var(--gold) 29px),
  repeating-linear-gradient(-45deg,transparent,transparent 28px,var(--gold) 28px,var(--gold) 29px);
pointer-events:none;
z-index:0;
}
.zellij-bg>*{position:relative;z-index:1}

.container{
max-width:720px;
margin:0 auto;
padding:0 20px;
}

/* ===== HERO ===== */
.hero{
background:linear-gradient(180deg,var(--white) 0%,var(--beige) 100%);
padding:24px 0 40px;
text-align:center;
}
.brand-bar{
padding:0 20px 16px;
border-bottom:1px solid rgba(197,163,85,.15);
margin-bottom:24px;
}
.brand-name{
font-size:32px;
font-weight:900;
color:var(--gold);
letter-spacing:1px;
margin-bottom:2px;
}
.brand-tagline{
font-size:14px;
color:var(--text-medium);
font-weight:400;
}
.hero-image-wrap{
margin:0 auto 24px;
max-width:400px;
border-radius:20px;
overflow:hidden;
box-shadow:0 12px 40px rgba(197,163,85,.15);
}
.hero-image-wrap img{
display:block;
border-radius:20px;
}
.hero h1{
font-size:28px;
font-weight:800;
color:var(--text-dark);
margin-bottom:12px;
line-height:1.5;
}
.hero-sub{
font-size:16px;
color:var(--text-medium);
max-width:500px;
margin:0 auto 20px;
padding:0 10px;
line-height:1.8;
}
.hero-price{
font-size:36px;
font-weight:900;
color:var(--gold-dark);
margin-bottom:4px;
}
.hero-price-sub{
font-size:15px;
color:var(--text-medium);
margin-bottom:24px;
font-weight:500;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:none;
border-radius:14px;
font-family:'Tajawal',sans-serif;
font-weight:700;
font-size:17px;
cursor:pointer;
text-decoration:none;
min-height:52px;
padding:14px 28px;
transition:all .2s ease;
}
.btn-gold{
background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
color:var(--white);
box-shadow:0 4px 16px rgba(197,163,85,.35);
}
.btn-gold:hover{
box-shadow:0 6px 24px rgba(197,163,85,.5);
transform:translateY(-1px);
}
.btn-wa{
background:var(--green-wa);
color:var(--white);
box-shadow:0 4px 16px rgba(37,211,102,.3);
}
.btn-wa:hover{
background:var(--green-wa-dark);
transform:translateY(-1px);
}
.hero-btns{
display:flex;
flex-direction:column;
gap:12px;
padding:0 20px;
max-width:400px;
margin:0 auto;
}
.hero-btns .btn{width:100%}

/* ===== GALLERY ===== */
.gallery-section{
padding:40px 0 32px;
background:var(--white);
}
.section-title{
text-align:center;
font-size:24px;
font-weight:800;
color:var(--text-dark);
margin-bottom:24px;
}
.carousel-wrapper{
position:relative;
overflow:hidden;
}
.carousel-track{
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
padding:0 20px 16px;
scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{
flex:0 0 85%;
max-width:360px;
scroll-snap-align:center;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.carousel-slide img{
display:block;
border-radius:16px;
}
.carousel-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:8px;
}
.carousel-dot{
width:8px;height:8px;
border-radius:50%;
background:var(--beige-dark);
border:none;
cursor:pointer;
transition:all .2s;
padding:0;
}
.carousel-dot.active{
background:var(--gold);
width:24px;
border-radius:4px;
}

/* ===== WHY SECTION ===== */
.why-section{
padding:40px 0;
background:var(--beige);
}
.cards-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
padding:0 20px;
max-width:720px;
margin:0 auto;
}
.card{
background:var(--white);
border-radius:16px;
padding:20px 16px;
text-align:center;
box-shadow:0 2px 12px rgba(0,0,0,.04);
border:1px solid rgba(197,163,85,.1);
}
.card-icon{
font-size:28px;
margin-bottom:8px;
display:block;
}
.card-title{
font-size:15px;
font-weight:700;
color:var(--text-dark);
margin-bottom:6px;
}
.card-text{
font-size:13px;
color:var(--text-medium);
line-height:1.7;
}

/* ===== PRODUCT DESC ===== */
.product-desc{
padding:40px 0;
background:var(--white);
}
.product-desc .section-title{margin-bottom:16px}
.product-desc-text{
text-align:center;
font-size:16px;
color:var(--text-medium);
max-width:560px;
margin:0 auto 24px;
padding:0 20px;
line-height:1.9;
}
.occasions-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
padding:0 20px;
}
.occasion-tag{
background:var(--beige);
border:1px solid rgba(197,163,85,.2);
border-radius:30px;
padding:8px 18px;
font-size:13px;
font-weight:600;
color:var(--gold-dark);
white-space:nowrap;
}

/* ===== SPECIAL OFFER ===== */
.offer-section{
padding:40px 0;
background:linear-gradient(135deg,#F7EDD5 0%,#EDE0C0 50%,#F0E4C8 100%);
text-align:center;
}
.offer-badge{
display:inline-block;
background:linear-gradient(135deg,var(--gold),var(--gold-dark));
color:var(--white);
font-size:16px;
font-weight:700;
padding:8px 24px;
border-radius:30px;
margin-bottom:16px;
}
.offer-price{
font-size:48px;
font-weight:900;
color:var(--gold-dark);
margin-bottom:4px;
}
.offer-sub{
font-size:17px;
color:var(--text-dark);
font-weight:600;
margin-bottom:16px;
}
.offer-features{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin-bottom:24px;
}
.offer-feat{
font-size:15px;
color:var(--text-dark);
font-weight:500;
}

/* ===== ORDER FORM ===== */
.order-section{
padding:40px 0;
background:var(--ivory);
}
.order-section .section-title{margin-bottom:6px}
.order-subtitle{
text-align:center;
font-size:14px;
color:var(--text-medium);
margin-bottom:24px;
padding:0 20px;
}
.order-form{
max-width:480px;
margin:0 auto;
padding:0 20px;
}
.form-group{
margin-bottom:16px;
}
.form-group label{
display:block;
font-size:14px;
font-weight:600;
color:var(--text-dark);
margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
border:1.5px solid var(--beige-dark);
border-radius:12px;
padding:14px 16px;
font-family:'Tajawal',sans-serif;
font-size:15px;
color:var(--text-dark);
background:var(--white);
transition:border-color .2s;
direction:rtl;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(197,163,85,.12);
}
.form-group textarea{
resize:vertical;
min-height:80px;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.btn-submit{
width:100%;
font-size:18px;
min-height:56px;
margin-top:8px;
}
.success-msg{
display:none;
text-align:center;
padding:32px 20px;
max-width:480px;
margin:0 auto;
}
.success-msg.show{display:block}
.success-msg h3{
font-size:22px;
color:var(--gold-dark);
margin-bottom:12px;
}
.success-msg p{
font-size:15px;
color:var(--text-medium);
line-height:1.8;
}

/* ===== WHATSAPP SECTION ===== */
.whatsapp-section{
padding:40px 0;
background:var(--white);
text-align:center;
}
.whatsapp-section .section-title{margin-bottom:8px}
.wa-text{
font-size:15px;
color:var(--text-medium);
margin-bottom:12px;
padding:0 20px;
}
.wa-phone{
font-size:20px;
font-weight:700;
color:var(--text-dark);
direction:ltr;
margin-bottom:20px;
letter-spacing:1px;
}
.wa-btn-wrap{
padding:0 20px;
max-width:400px;
margin:0 auto;
}
.wa-btn-wrap .btn{width:100%;font-size:18px}

/* ===== TRUST BAR ===== */
.trust-bar{
padding:24px 0;
background:var(--beige);
overflow:hidden;
}
.trust-strip{
display:flex;
gap:24px;
overflow-x:auto;
padding:0 20px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.trust-strip::-webkit-scrollbar{display:none}
.trust-item{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
font-size:13px;
font-weight:600;
color:var(--text-dark);
flex-shrink:0;
background:var(--white);
padding:10px 18px;
border-radius:30px;
border:1px solid rgba(197,163,85,.12);
}
.trust-icon{font-size:18px}

/* ===== FINAL CTA ===== */
.final-cta{
padding:48px 0;
background:linear-gradient(180deg,var(--ivory) 0%,var(--beige) 100%);
text-align:center;
}
.final-cta .section-title{margin-bottom:8px}
.final-cta-text{
font-size:16px;
color:var(--text-medium);
margin-bottom:24px;
}
.final-btns{
display:flex;
flex-direction:column;
gap:12px;
max-width:380px;
margin:0 auto;
padding:0 20px;
}
.final-btns .btn{width:100%}

/* ===== FOOTER ===== */
.site-footer{
padding:24px 20px;
background:var(--text-dark);
text-align:center;
color:rgba(255,255,255,.6);
}
.footer-brand{
font-size:22px;
font-weight:800;
color:var(--gold-light);
margin-bottom:4px;
}
.footer-tagline{
font-size:13px;
color:rgba(255,255,255,.45);
margin-bottom:8px;
}
.footer-copy{
font-size:12px;
color:rgba(255,255,255,.35);
}

/* ===== DECORATIVE DIVIDER ===== */
.gold-divider{
height:2px;
background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
max-width:200px;
margin:0 auto;
}

/* ===== DESKTOP ===== */
@media(min-width:768px){
.hero h1{font-size:36px}
.hero-sub{font-size:18px}
.hero-btns{flex-direction:row;max-width:520px}
.carousel-slide{flex:0 0 45%;max-width:320px}
.cards-grid{grid-template-columns:repeat(4,1fr);max-width:800px;padding:0 40px}
.container{padding:0 40px}
.final-btns{flex-direction:row;max-width:520px}
.offer-price{font-size:56px}
}

/* Floating WhatsApp */
.float-wa{
position:fixed;
bottom:20px;
left:20px;
z-index:999;
width:56px;height:56px;
border-radius:50%;
background:var(--green-wa);
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(37,211,102,.4);
text-decoration:none;
transition:transform .2s;
}
.float-wa:hover{transform:scale(1.1)}
.float-wa svg{width:28px;height:28px;fill:white}

/* Animations */
@keyframes fadeUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.animate-in{animation:fadeUp .5s ease forwards}