أوماي

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OMAÉ — حقائب فاخرة ناعمة</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Tajawal:wght@300;400;500;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--cream: #F5F0E8;
--cream-light: #FAF7F2;
--cream-dark: #EDE6D8;
--black: #0A0A0A;
--gold: #C9A84C;
--gold-light: #DFC070;
--gold-pale: #F0E4C0;
--warm-gray: #8A8078;
--text-light: #B8AD9E;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
background: var(–cream-light);
color: var(–black);
font-family: ‘Montserrat’, sans-serif;
overflow-x: hidden;
cursor: none;
}

/* CUSTOM CURSOR */
.cursor {
width: 8px; height: 8px;
background: var(–gold);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none; z-index: 9999;
transform: translate(-50%,-50%);
transition: transform .1s;
}
.cursor-ring {
width: 32px; height: 32px;
border: 1px solid var(–gold);
border-radius: 50%;
position: fixed; top: 0; left: 0;
pointer-events: none; z-index: 9998;
transform: translate(-50%,-50%);
transition: all .15s ease;
opacity: 0.6;
}
a:hover ~ .cursor-ring, button:hover ~ .cursor-ring { transform: translate(-50%,-50%) scale(2); }

/* LANG TOGGLE */
.lang-bar {
position: fixed; top: 0; width: 100%; z-index: 500;
background: var(–black);
display: flex; justify-content: center; align-items: center;
padding: 8px 0; gap: 24px;
}
.lang-bar p { font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.lang-btn {
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
background: none; border: none; color: var(–gold); cursor: pointer;
font-family: ‘Montserrat’, sans-serif; font-weight: 600;
padding: 2px 8px; border-bottom: 1px solid transparent;
transition: all .2s;
}
.lang-btn.active { border-bottom-color: var(–gold); }
.lang-btn:hover { color: var(–gold-light); }

/* NAV */
nav {
position: fixed; top: 33px; width: 100%; z-index: 400;
display: flex; justify-content: space-between; align-items: center;
padding: 24px 64px;
transition: all .4s;
}
nav.scrolled {
background: rgba(250, 247, 242, 0.96);
backdrop-filter: blur(20px);
padding: 16px 64px;
border-bottom: 1px solid rgba(201,168,76,0.15);
}
.nav-logo img {
height: 48px;
filter: brightness(0); /* dark version */
transition: filter .3s;
}
nav:not(.scrolled) .nav-logo img { filter: none; }
.nav-center { display: flex; gap: 40px; list-style: none; }
.nav-center a {
font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
text-decoration: none; color: var(–black); font-weight: 500;
position: relative; padding-bottom: 2px;
}
.nav-center a::after {
content: ‘’; position: absolute; bottom: 0; left: 0;
width: 0; height: 1px; background: var(–gold);
transition: width .3s;
}
.nav-center a:hover::after { width: 100%; }
.nav-center a:hover { color: var(–gold); }
.nav-right { display: flex; gap: 16px; align-items: center; }
.nav-icon { width: 20px; height: 20px; color: var(–black); cursor: pointer; transition: color .2s; }
.nav-icon:hover { color: var(–gold); }
.nav-shop-btn {
background: var(–gold); color: white;
border: none; padding: 10px 24px;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
font-family: ‘Montserrat’, sans-serif; font-weight: 600;
cursor: pointer; transition: all .3s;
}
.nav-shop-btn:hover { background: var(–black); }

/* HERO */
.hero {
min-height: 100vh;
padding-top: 100px;
display: grid; grid-template-columns: 1fr 1fr;
position: relative; overflow: hidden;
}
.hero::before {
content: ‘’;
position: absolute; inset: 0;
background: linear-gradient(135deg, var(–cream-light) 0%, var(–cream) 100%);
z-index: 0;
}

.hero-left {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
padding: 80px 80px 80px 120px;
animation: fadeUp .9s ease both;
}
.hero-season {
display: flex; align-items: center; gap: 16px;
margin-bottom: 40px;
}
.hero-season-line { width: 40px; height: 1px; background: var(–gold); }
.hero-season-text {
font-size: 10px; letter-spacing: 5px; color: var(–gold);
text-transform: uppercase; font-weight: 600;
}
.hero-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(52px, 5.5vw, 82px);
font-weight: 300; line-height: 1.1;
color: var(–black); margin-bottom: 12px;
}
.hero-title em {
font-style: italic; color: var(–gold);
}
.hero-subtitle-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 18px; font-weight: 300;
color: var(–warm-gray); margin-bottom: 36px;
direction: rtl;
}
.hero-desc {
font-size: 13px; line-height: 2; color: var(–warm-gray);
max-width: 380px; margin-bottom: 52px; font-weight: 300; letter-spacing: 0.5px;
}
.hero-desc-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 14px; color: var(–warm-gray); direction: rtl;
line-height: 2; margin-bottom: 8px;
}
.hero-actions { display: flex; gap: 16px; align-items: center; }
.btn-primary {
background: var(–black); color: white;
padding: 16px 40px; font-size: 11px; letter-spacing: 3px;
text-transform: uppercase; font-weight: 600;
border: none; cursor: pointer; transition: all .3s;
font-family: ‘Montserrat’, sans-serif;
text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(–gold); transform: translateY(-2px); }
.btn-ghost {
background: transparent; color: var(–black);
padding: 16px 40px; font-size: 11px; letter-spacing: 3px;
text-transform: uppercase; font-weight: 600;
border: 1px solid rgba(0,0,0,0.25); cursor: pointer; transition: all .3s;
font-family: ‘Montserrat’, sans-serif;
text-decoration: none; display: inline-block;
}
.btn-ghost:hover { border-color: var(–gold); color: var(–gold); }

.hero-right {
position: relative; z-index: 1;
overflow: hidden;
}
.hero-img-wrap {
width: 100%; height: 100%; position: relative;
background: var(–cream-dark);
display: flex; align-items: center; justify-content: center;
}
.hero-img-overlay-gold {
position: absolute; bottom: 0; left: 0; right: 0;
height: 40%; background: linear-gradient(to top, rgba(201,168,76,0.08), transparent);
}
.hero-product-mock {
width: 60%; max-width: 380px;
aspect-ratio: 3/4;
background: linear-gradient(145deg, #E8E0D0, #D4C8B0);
border-radius: 2px;
display: flex; align-items: center; justify-content: center;
position: relative;
box-shadow: 40px 40px 80px rgba(0,0,0,0.12);
animation: float 6s ease-in-out infinite;
}
.hero-product-logo {
width: 80px; opacity: 0.3;
}
.hero-tag {
position: absolute; bottom: -20px; right: -20px;
background: white; padding: 20px 24px;
box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.hero-tag-price {
font-family: ‘Cormorant Garamond’, serif;
font-size: 28px; color: var(–black);
}
.hero-tag-label { font-size: 9px; letter-spacing: 3px; color: var(–gold); text-transform: uppercase; }

.hero-scroll {
position: absolute; bottom: 40px; left: 120px; z-index: 3;
display: flex; align-items: center; gap: 12px;
animation: fadeUp 1.2s ease .6s both;
}
.hero-scroll-line { width: 40px; height: 1px; background: var(–text-light); }
.hero-scroll-text { font-size: 9px; letter-spacing: 4px; color: var(–text-light); text-transform: uppercase; }

/* TICKER */
.ticker {
background: var(–cream-dark);
padding: 14px 0; overflow: hidden;
border-top: 1px solid rgba(201,168,76,0.2);
border-bottom: 1px solid rgba(201,168,76,0.2);
}
.ticker-track {
display: flex; gap: 64px; white-space: nowrap;
animation: ticker 25s linear infinite;
}
.ticker-item {
font-size: 10px; letter-spacing: 5px; color: var(–warm-gray);
text-transform: uppercase; flex-shrink: 0; font-weight: 500;
}
.ticker-sep { color: var(–gold); }

/* EDITORIAL SECTION */
.editorial {
display: grid; grid-template-columns: 1fr 1fr;
min-height: 80vh;
}
.editorial-img {
background: var(–cream-dark);
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.editorial-img-inner {
width: 70%; aspect-ratio: 2/3;
background: linear-gradient(160deg, #DDD6C8, #C8BEA8);
box-shadow: 30px 30px 60px rgba(0,0,0,0.1);
display: flex; align-items: center; justify-content: center;
}
.editorial-content {
display: flex; flex-direction: column; justify-content: center;
padding: 100px 100px 100px 80px;
}
.section-label {
font-size: 10px; letter-spacing: 5px; text-transform: uppercase;
color: var(–gold); font-weight: 600; margin-bottom: 28px;
display: flex; align-items: center; gap: 16px;
}
.section-label::before { content: ‘’; width: 30px; height: 1px; background: var(–gold); }
.editorial-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(38px, 4vw, 56px); font-weight: 300;
line-height: 1.2; margin-bottom: 10px;
}
.editorial-title-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 20px; font-weight: 300;
color: var(–warm-gray); margin-bottom: 28px;
direction: rtl;
}
.editorial-text {
font-size: 13px; line-height: 2.1; color: var(–warm-gray);
max-width: 380px; margin-bottom: 12px; font-weight: 300;
}
.editorial-text-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 13px; color: var(–text-light); direction: rtl;
line-height: 2; margin-bottom: 40px;
}
.editorial-link {
display: inline-flex; align-items: center; gap: 12px;
font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
color: var(–black); font-weight: 600; text-decoration: none;
transition: gap .3s;
}
.editorial-link:hover { gap: 20px; color: var(–gold); }
.editorial-link-arrow { font-size: 18px; }

/* COLLECTION GRID */
.collection { padding: 100px 80px; background: var(–cream-light); }
.collection-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 60px;
}
.collection-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(36px, 4vw, 52px); font-weight: 300;
}
.collection-title-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 16px; font-weight: 300; color: var(–warm-gray);
direction: rtl; margin-top: 6px;
}
.collection-filter {
display: flex; gap: 8px;
}
.filter-btn {
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
background: none; border: 1px solid transparent;
padding: 8px 20px; cursor: pointer; color: var(–warm-gray);
font-family: ‘Montserrat’, sans-serif; font-weight: 500;
transition: all .2s;
}
.filter-btn.active, .filter-btn:hover {
border-color: var(–gold); color: var(–gold);
}

.products-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.product-card {
background: white; cursor: pointer;
transition: transform .4s; position: relative;
overflow: hidden;
}
.product-card:hover { transform: translateY(-6px); z-index: 2; }
.product-card:nth-child(2) { margin-top: 40px; }
.product-card:nth-child(4) { margin-top: 20px; }

.product-img {
aspect-ratio: 3/4; position: relative;
background: var(–cream-dark); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.product-img-mock {
width: 55%; aspect-ratio: 1/1.3;
transition: transform .5s;
}
.product-card:hover .product-img-mock { transform: scale(1.04); }
.product-img-bg {
position: absolute; inset: 0;
transition: opacity .4s;
}
.product-img-bg-1 { background: linear-gradient(145deg, #E8E0D0, #D4C8B0); }
.product-img-bg-2 { background: linear-gradient(145deg, #D8D4CC, #C4C0B8); }
.product-img-bg-3 { background: linear-gradient(145deg, #E0D8CC, #CBBFAF); }
.product-img-bg-4 { background: linear-gradient(145deg, #DCDAD6, #C8C4BC); }

.product-quick {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(250,247,242,0.97);
padding: 14px; text-align: center;
transform: translateY(100%); transition: transform .3s;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
font-weight: 600; color: var(–black);
}
.product-card:hover .product-quick { transform: translateY(0); }

.product-badge {
position: absolute; top: 16px; right: 16px;
font-size: 9px; letter-spacing: 2px; padding: 5px 12px;
text-transform: uppercase; font-weight: 600;
}
.badge-new { background: var(–gold); color: white; }
.badge-sold { background: var(–black); color: white; }

.product-info { padding: 20px 20px 24px; }
.product-brand { font-size: 9px; letter-spacing: 4px; color: var(–gold); text-transform: uppercase; margin-bottom: 6px; }
.product-name {
font-family: ‘Cormorant Garamond’, serif;
font-size: 20px; font-weight: 400; margin-bottom: 3px;
}
.product-name-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 12px; color: var(–text-light); direction: rtl; margin-bottom: 14px;
}
.product-bottom { display: flex; justify-content: space-between; align-items: center; }
.product-price {
font-family: ‘Cormorant Garamond’, serif;
font-size: 22px; font-weight: 500;
}
.product-price-sub { font-size: 11px; color: var(–text-light); font-family: ‘Montserrat’, sans-serif; font-weight: 300; }
.product-wishlist {
width: 32px; height: 32px;
border: 1px solid rgba(0,0,0,0.1);
background: none; cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: all .2s;
}
.product-wishlist:hover { border-color: var(–gold); color: var(–gold); }

/* MATERIALS / CRAFT */
.craft {
background: var(–black); padding: 100px 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
align-items: center;
}
.craft-text .section-label { color: var(–gold); }
.craft-text .section-label::before { background: var(–gold); }
.craft-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(38px, 4vw, 56px); font-weight: 300;
color: white; line-height: 1.2; margin-bottom: 10px;
}
.craft-title-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 20px; font-weight: 300; color: rgba(255,255,255,0.4);
direction: rtl; margin-bottom: 28px;
}
.craft-desc {
font-size: 13px; line-height: 2.1; color: rgba(255,255,255,0.5);
font-weight: 300; margin-bottom: 12px;
}
.craft-desc-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 13px; color: rgba(255,255,255,0.3);
direction: rtl; line-height: 2; margin-bottom: 48px;
}
.craft-features { display: flex; flex-direction: column; gap: 16px; }
.craft-feat {
display: flex; align-items: center; gap: 20px;
padding: 20px; border: 1px solid rgba(201,168,76,0.1);
transition: border-color .3s;
}
.craft-feat:hover { border-color: rgba(201,168,76,0.3); }
.craft-feat-icon {
width: 36px; height: 36px; flex-shrink: 0;
border: 1px solid rgba(201,168,76,0.3);
color: var(–gold); display: flex; align-items: center;
justify-content: center; font-size: 14px;
}
.craft-feat-en { font-size: 13px; font-weight: 500; color: white; }
.craft-feat-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 12px; color: rgba(255,255,255,0.3);
direction: rtl;
}

.craft-visual {
display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.craft-tile {
aspect-ratio: 1;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(201,168,76,0.08);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
transition: background .3s;
}
.craft-tile:hover { background: rgba(201,168,76,0.05); }
.craft-tile:nth-child(2) { margin-top: 40px; }
.craft-tile:nth-child(3) { margin-top: -40px; }
.craft-num {
font-family: ‘Cormorant Garamond’, serif;
font-size: 42px; color: var(–gold); font-weight: 300;
}
.craft-num-label { font-size: 9px; letter-spacing: 4px; color: rgba(255,255,255,0.3); text-transform: uppercase; }

/* TESTIMONIALS */
.testimonials { padding: 100px 80px; background: var(–cream); }
.testimonials .section-header { text-align: center; margin-bottom: 64px; }
.test-section-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(36px, 4vw, 52px); font-weight: 300; margin-bottom: 8px;
}
.test-section-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 16px; font-weight: 300; color: var(–warm-gray); direction: rtl;
}
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.test-card {
background: white; padding: 40px;
position: relative; overflow: hidden;
transition: transform .3s;
}
.test-card::before {
content: ‘”’;
font-family: ‘Cormorant Garamond’, serif;
font-size: 120px; color: rgba(201,168,76,0.08);
position: absolute; top: -20px; left: 20px;
line-height: 1;
}
.test-card:hover { transform: translateY(-4px); }
.test-stars { color: var(–gold); font-size: 12px; letter-spacing: 3px; margin-bottom: 20px; }
.test-en { font-size: 13px; line-height: 1.9; color: var(–warm-gray); margin-bottom: 10px; font-style: italic; font-weight: 300; }
.test-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 13px; color: var(–text-light); direction: rtl;
line-height: 1.9; margin-bottom: 28px;
}
.test-divider { width: 30px; height: 1px; background: var(–gold); margin-bottom: 20px; }
.test-author-name { font-size: 13px; font-weight: 600; }
.test-author-name-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 12px; color: var(–text-light); direction: rtl;
}
.test-author-city { font-size: 10px; letter-spacing: 2px; color: var(–gold); text-transform: uppercase; }

/* INSTAGRAM STRIP */
.insta-strip { padding: 80px 0 0; background: var(–cream-light); }
.insta-header { text-align: center; margin-bottom: 40px; padding: 0 80px; }
.insta-handle {
font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
color: var(–gold); margin-bottom: 12px; font-weight: 600;
}
.insta-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: 36px; font-weight: 300;
}
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.insta-tile {
aspect-ratio: 1;
background: var(–cream-dark); position: relative; overflow: hidden;
cursor: pointer;
}
.insta-tile:nth-child(2n) { background: #DDD8D0; }
.insta-tile:nth-child(3n) { background: #D4CEC4; }
.insta-overlay {
position: absolute; inset: 0;
background: rgba(10,10,10,0.5);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s;
}
.insta-tile:hover .insta-overlay { opacity: 1; }
.insta-icon { color: white; font-size: 24px; }

/* CTA BANNER */
.cta-banner {
background: var(–cream-dark);
padding: 120px 80px;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
position: relative; overflow: hidden;
}
.cta-banner::after {
content: ‘OMAÉ’;
font-family: ‘Cormorant Garamond’, serif;
font-size: 200px; font-weight: 300; color: rgba(201,168,76,0.06);
position: absolute; right: -40px; bottom: -40px;
letter-spacing: 20px; pointer-events: none;
}
.cta-text .section-label::before { background: var(–gold); }
.cta-title {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(42px, 5vw, 66px); font-weight: 300;
line-height: 1.1; margin-bottom: 10px;
}
.cta-title-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 22px; font-weight: 300; color: var(–warm-gray);
direction: rtl; margin-bottom: 32px;
}
.cta-desc { font-size: 13px; line-height: 2; color: var(–warm-gray); font-weight: 300; max-width: 380px; margin-bottom: 12px; }
.cta-desc-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 13px; color: var(–text-light); direction: rtl;
line-height: 2; margin-bottom: 48px;
}
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-wa {
display: inline-flex; align-items: center; gap: 10px;
background: #25D366; color: white;
padding: 16px 36px; font-size: 11px; letter-spacing: 3px;
text-transform: uppercase; font-weight: 600; border: none;
cursor: pointer; transition: all .3s;
font-family: ‘Montserrat’, sans-serif; text-decoration: none;
}
.btn-wa:hover { background: #1DAA57; transform: translateY(-2px); }

.cta-logo-wrap {
display: flex; align-items: center; justify-content: center;
position: relative;
}
.cta-logo-ring {
width: 300px; height: 300px; border-radius: 50%;
border: 1px solid rgba(201,168,76,0.2);
display: flex; align-items: center; justify-content: center;
animation: spin 20s linear infinite;
}
.cta-logo-ring-inner {
width: 220px; height: 220px; border-radius: 50%;
border: 1px solid rgba(201,168,76,0.4);
display: flex; align-items: center; justify-content: center;
animation: spin-reverse 15s linear infinite;
}
.cta-logo-center img { width: 120px; }

/* FOOTER */
footer {
background: var(–black); padding: 80px 80px 40px;
}
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 60px;
padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand img { width: 120px; margin-bottom: 20px; }
.footer-brand-desc {
font-size: 12px; line-height: 1.9; color: rgba(255,255,255,0.35);
font-weight: 300; max-width: 260px; margin-bottom: 12px;
}
.footer-brand-desc-ar {
font-family: ‘Tajawal’, sans-serif;
font-size: 12px; color: rgba(255,255,255,0.2); direction: rtl;
line-height: 1.9;
}
.footer-col-title {
font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
color: var(–gold); font-weight: 600; margin-bottom: 24px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none;
transition: color .2s; letter-spacing: 0.5px;
}
.footer-links a:hover { color: var(–gold); }
.footer-links-ar a {
font-family: ‘Tajawal’, sans-serif;
direction: rtl; font-size: 13px;
}
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.2); letter-spacing: 1px; }
.footer-socials { display: flex; gap: 16px; }
.footer-social {
width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.4); font-size: 12px; text-decoration: none;
transition: all .2s;
}
.footer-social:hover { border-color: var(–gold); color: var(–gold); }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes spin-reverse { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }

/* FADE IN ON SCROLL */
.reveal { opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* MOBILE */
@media (max-width: 900px) {
nav { padding: 16px 24px; }
.nav-center { display: none; }
.hero { grid-template-columns: 1fr; }
.hero-left { padding: 60px 32px 40px; }
.hero-right { height: 400px; }
.editorial { grid-template-columns: 1fr; }
.editorial-content { padding: 60px 32px; }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.product-card:nth-child(2), .product-card:nth-child(4) { margin-top: 0; }
.craft { grid-template-columns: 1fr; padding: 60px 32px; gap: 48px; }
.craft-visual { display: none; }
.test-grid { grid-template-columns: 1fr; }
.cta-banner { grid-template-columns: 1fr; padding: 60px 32px; }
.cta-logo-wrap { display: none; }
.insta-grid { grid-template-columns: repeat(3, 1fr); }
.collection { padding: 60px 24px; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
footer { padding: 60px 24px 32px; }
.testimonials { padding: 60px 24px; }
}
</style>

</head>
<body>

<div class="lang-bar">
<p>OMAÉ — حقائب فاخرة ناعمة</p>
<button class="lang-btn active" onclick="setLang('en')">EN</button>
<span style="color:rgba(255,255,255,0.2)">|</span>
<button class="lang-btn" onclick="setLang('ar')">عربي</button>
</div>

<nav id="mainNav">
<div class="nav-logo">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Ctext x='0' y='48' font-family='Georgia,serif' font-size='52' font-weight='300' fill='%23C9A84C' letter-spacing='8'%3EOMAÉ%3C/text%3E%3C/svg%3E" alt="OMAÉ">
</div>
<ul class="nav-center">
<li><a href="#collection" data-en="Collection" data-ar="المجموعة">المجموعة</a></li>
<li><a href="#craft" data-en="Craft" data-ar="الصناعة">الصناعة</a></li>
<li><a href="#" data-en="Lookbook" data-ar="لوك بوك">لوك بوك</a></li>
<li><a href="#" data-en="About" data-ar="عنّا">عنّا</a></li>
</ul>
<div class="nav-right">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<button class="nav-shop-btn" data-en="Shop Now" data-ar="تسوقي الآن">تسوقي الآن</button>
</div>
</nav>

<section class="hero">
<div class="hero-left">
<div class="hero-season">
<div class="hero-season-line"></div>
<span class="hero-season-text" data-en="SS 2025 Collection" data-ar="مجموعة ربيع/صيف ٢٠٢٥">مجموعة ربيع/صيف ٢٠٢٥</span>
</div>
<h1 class="hero-title">
Carry <em>Art.</em><br>
Wear <em>Grace.</em>
</h1>
<p class="hero-subtitle-ar">احملي فناً. ارتدي أناقة.</p>
<p class="hero-desc" data-en="Where craftsmanship meets contemporary design. Each OMAÉ piece is a statement of refined taste, crafted for the woman who knows her worth.">
Where craftsmanship meets contemporary design. Each OMAÉ piece is a statement of refined taste, crafted for the woman who knows her worth.
</p>
<p class="hero-desc-ar">حيث تلتقي الحرفية بالتصميم المعاصر. كل قطعة OMAÉ هي تعبير عن ذوق رفيع</p>
<div class="hero-actions">
<a href="#collection" class="btn-primary" data-en="Explore Collection" data-ar="استكشفي المجموعة">استكشفي المجموعة</a>
<a href="#craft" class="btn-ghost" data-en="Our Story" data-ar="قصتنا">قصتنا</a>
</div>
</div>

<div class="hero-right">
<div class="hero-img-wrap">
<div class="hero-img-overlay-gold"></div>
<div class="hero-product-mock">
<svg class="hero-product-logo" viewBox="0 0 200 60" fill="none">
<text x="0" y="48" font-family="Georgia,serif" font-size="40" fill="rgba(201,168,76,0.5)" letter-spacing="6">OMAÉ</text>
</svg>
<div class="hero-tag">
<div class="hero-tag-price">3,200 EGP</div>
<div class="hero-tag-label" data-en="New Arrival" data-ar="وصل حديثاً">وصل حديثاً</div>
</div>
</div>
</div>
</div>

<div class="hero-scroll">
<div class="hero-scroll-line"></div>
<span class="hero-scroll-text" data-en="Scroll to Explore" data-ar="اسحبي للاكتشاف">اسحبي للاكتشاف</span>
</div>
</section>

<div class="ticker">
<div class="ticker-track">
<span class="ticker-item">SOFT LUXURY BAGS</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">حقائب فاخرة</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">FREE DELIVERY ACROSS EGYPT</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">توصيل مجاني</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">CASH ON DELIVERY</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">دفع عند الاستلام</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">PREMIUM QUALITY</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">جودة استثنائية</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">SOFT LUXURY BAGS</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">حقائب فاخرة</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">FREE DELIVERY ACROSS EGYPT</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">توصيل مجاني</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">CASH ON DELIVERY</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">دفع عند الاستلام</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">PREMIUM QUALITY</span><span class="ticker-sep"> ✦ </span>
<span class="ticker-item">جودة استثنائية</span><span class="ticker-sep"> ✦ </span>
</div>
</div>

<section class="editorial reveal">
<div class="editorial-img">
<div class="editorial-img-inner">
<svg viewBox="0 0 120 80" width="60" fill="none">
<text x="0" y="64" font-family="Georgia,serif" font-size="64" fill="rgba(201,168,76,0.3)" letter-spacing="4">O</text>
</svg>
</div>
</div>
<div class="editorial-content">
<p class="section-label" data-en="Our Philosophy" data-ar="فلسفتنا">فلسفتنا</p>
<h2 class="editorial-title">Beyond the Bag.<br>A Statement.</h2>
<p class="editorial-title-ar">أكثر من حقيبة. إنها تعبير عنك.</p>
<p class="editorial-text" data-en="OMAÉ was born from a belief that luxury should be accessible without compromising on beauty. Each design tells a story of femininity, strength, and modern elegance.">
OMAÉ was born from a belief that luxury should be accessible without compromising on beauty. Each design tells a story of femininity, strength, and modern elegance.
</p>
<p class="editorial-text-ar">OMAÉ وُلدت من إيمان بأن الفخامة يجب أن تكون في متناول يدك دون المساومة على الجمال</p>
<a href="#" class="editorial-link" data-en="Read Our Story →" data-ar="اقرأي قصتنا ←">اقرأي قصتنا <span class="editorial-link-arrow">→</span></a>
</div>
</section>

<section class="collection reveal" id="collection">
<div class="collection-header">
<div>
<h2 class="collection-title" data-en="New Arrivals" data-ar="وصل حديثاً">وصل حديثاً</h2>
<p class="collection-title-ar">أحدث ما وصلنا</p>
</div>
<div class="collection-filter">
<button class="filter-btn active" data-en="All" data-ar="الكل">الكل</button>
<button class="filter-btn" data-en="Tote" data-ar="توت">توت</button>
<button class="filter-btn" data-en="Clutch" data-ar="كلتش">كلتش</button>
<button class="filter-btn" data-en="Crossbody" data-ar="كروس">كروس</button>
</div>
</div>

<div class="products-grid">

<div class="product-card">
<div class="product-img">
<div class="product-img-bg product-img-bg-1" style="position:absolute;inset:0;"></div>
<svg viewBox="0 0 80 100" width="90" style="position:relative;z-index:1;transition:transform .5s">
<rect x="10" y="30" width="60" height="65" rx="3" fill="rgba(201,168,76,0.2)" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
<path d="M25 30 C25 15 55 15 55 30" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1.5"/>
<circle cx="40" cy="62" r="4" fill="none" stroke="rgba(201,168,76,0.5)" stroke-width="1"/>
</svg>
<div class="product-quick" data-en="Quick Shop" data-ar="اشتري الآن">اشتري الآن</div>
<span class="product-badge badge-new" data-en="New" data-ar="جديد">جديد</span>
</div>
<div class="product-info">
<p class="product-brand">OMAÉ</p>
<h3 class="product-name">La Douce Tote</h3>
<p class="product-name-ar">توت لا دوس</p>
<div class="product-bottom">
<div>
<div class="product-price">3,200</div>
<div class="product-price-sub">EGP — جنيه</div>
</div>
<button class="product-wishlist">♡</button>
</div>
</div>
</div>

```

<div class="product-card">
<div class="product-img">
<div class="product-img-bg product-img-bg-2" style="position:absolute;inset:0;"></div>
<svg viewBox="0 0 80 80" width="90" style="position:relative;z-index:1;">
<rect x="5" y="20" width="70" height="55" rx="35" fill="rgba(201,168,76,0.15)" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
<path d="M20 20 C20 8 60 8 60 20" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1.5"/>
<line x1="30" y1="47" x2="50" y2="47" stroke="rgba(201,168,76,0.3)" stroke-width="1"/>
<div class="product-quick" data-en="Quick Shop" data-ar="اشتري الآن">اشتري الآن</div>
<span class="product-badge badge-new" data-en="New" data-ar="جديد">جديد</span>
</div>
<div class="product-info">
<p class="product-brand">OMAÉ</p>
<h3 class="product-name">Lune Clutch</h3>
<p class="product-name-ar">كلتش لون</p>
<div class="product-bottom">
<div>
<div class="product-price">1,800</div>
<div class="product-price-sub">EGP — جنيه</div>
</div>
<button class="product-wishlist">♡</button>
</div>
</div>
</div>

<div class="product-card">
<div class="product-img">
<div class="product-img-bg product-img-bg-3" style="position:absolute;inset:0;"></div>
<svg viewBox="0 0 80 100" width="90" style="position:relative;z-index:1;">
<rect x="15" y="25" width="50" height="70" rx="2" fill="rgba(201,168,76,0.15)" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
<path d="M30 25 L30 10 L50 10 L50 25" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1.5"/>
<rect x="30" y="52" width="20" height="12" rx="6" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
</svg>
<div class="product-quick" data-en="Quick Shop" data-ar="اشتري الآن">اشتري الآن</div>
</div>
<div class="product-info">
<p class="product-brand">OMAÉ</p>
<h3 class="product-name">Cèdre Mini</h3>
<p class="product-name-ar">ميني سيدر</p>
<div class="product-bottom">
<div>
<div class="product-price">2,600</div>
<div class="product-price-sub">EGP — جنيه</div>
</div>
<button class="product-wishlist">♡</button>
</div>
</div>
</div>

<div class="product-card">
<div class="product-img">
<div class="product-img-bg product-img-bg-4" style="position:absolute;inset:0;"></div>
<svg viewBox="0 0 80 90" width="90" style="position:relative;z-index:1;">
<ellipse cx="40" cy="60" rx="32" ry="26" fill="rgba(201,168,76,0.15)" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
<path d="M20 60 C10 40 10 20 40 18 C70 20 70 40 60 60" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1.5"/>
<circle cx="40" cy="60" r="5" fill="none" stroke="rgba(201,168,76,0.4)" stroke-width="1"/>
</svg>
<div class="product-quick" data-en="Quick Shop" data-ar="اشتري الآن">Quick Shop</div>
<span class="product-badge badge-sold" data-en="Hot" data-ar="الأكثر طلباً">Hot</span>
</div>
<div class="product-info">
<p class="product-brand">OMAÉ</p>
<h3 class="product-name">Or Bucket</h3>
<p class="product-name-ar">باكيت أور</p>
<div class="product-bottom">
<div>
<div class="product-price">4,500</div>
<div class="product-price-sub">EGP — جنيه</div>
</div>
<button class="product-wishlist">♡</button>
</div>
</div>
</div>
```

</div>
</section>

<section class="craft reveal" id="craft">
<div class="craft-text">
<p class="section-label" data-en="Why OMAÉ" data-ar="ليه OMAÉ">Why OMAÉ</p>
<h2 class="craft-title">The Art of<br>Soft Luxury</h2>
<p class="craft-title-ar">فن الفخامة الناعمة</p>
<p class="craft-desc" data-en="Every OMAÉ bag is a testament to uncompromising quality. We source only the finest materials, ensuring each piece feels as luxurious as it looks.">
Every OMAÉ bag is a testament to uncompromising quality. We source only the finest materials, ensuring each piece feels as luxurious as it looks.
</p>
<p class="craft-desc-ar">كل حقيبة OMAÉ هي شهادة على الجودة التي لا تساوم. نختار أفضل المواد فقط</p>
<div class="craft-features">
<div class="craft-feat">
<div class="craft-feat-icon">✦</div>
<div>
<p class="craft-feat-en" data-en="Premium Materials">Premium Materials</p>
<p class="craft-feat-ar">خامات فاخرة من الدرجة الأولى</p>
</div>
</div>
<div class="craft-feat">
<div class="craft-feat-icon">🛡</div>
<div>
<p class="craft-feat-en" data-en="Quality Guaranteed">Quality Guaranteed</p>
<p class="craft-feat-ar">ضمان الجودة التام</p>
</div>
</div>
<div class="craft-feat">
<div class="craft-feat-icon">🚀</div>
<div>
<p class="craft-feat-en" data-en="Nationwide Delivery">Nationwide Delivery</p>
<p class="craft-feat-ar">توصيل لكل محافظات مصر</p>
</div>
</div>
<div class="craft-feat">
<div class="craft-feat-icon">💳</div>
<div>
<p class="craft-feat-en" data-en="Cash on Delivery">Cash on Delivery</p>
<p class="craft-feat-ar">دفع عند الاستلام — مفيش مخاطرة</p>
</div>
</div>
</div>
</div>

<div class="craft-visual">
<div class="craft-tile"><div class="craft-num">+500</div><div class="craft-num-label">Happy Clients</div></div>
<div class="craft-tile"><div class="craft-num">100%</div><div class="craft-num-label">Quality Promise</div></div>
<div class="craft-tile"><div class="craft-num">3</div><div class="craft-num-label">Day Delivery</div></div>
<div class="craft-tile"><div class="craft-num">24/7</div><div class="craft-num-label">Support</div></div>
</div>
</section>

<section class="testimonials reveal">
<div class="section-header">
<p class="section-label" style="justify-content:center;">
<span data-en="Happy Clients" data-ar="عملاء سعداء">Happy Clients</span>
</p>
<h2 class="test-section-title" data-en="What They're Saying" data-ar="بيقولوا عننا إيه">What They're Saying</h2>
<p class="test-section-ar">آراء عملائنا</p>
</div>
<div class="test-grid">
<div class="test-card">
<div class="test-stars">★★★★★</div>
<p class="test-en">"Absolutely stunning quality. The bag arrived beautifully packaged and exceeded every expectation."</p>
<p class="test-ar">"جودة مذهلة فعلاً. الحقيبة وصلت في تغليف جميل وفاقت كل توقعاتي"</p>
<div class="test-divider"></div>
<p class="test-author-name">Nour Ahmed</p>
<p class="test-author-name-ar">نور أحمد</p>
<p class="test-author-city">Cairo</p>
</div>
<div class="test-card">
<div class="test-stars">★★★★★</div>
<p class="test-en">"I was hesitant to order online but cash on delivery made it easy. The bag is gorgeous!"</p>
<p class="test-ar">"كنت خايفة أطلب أونلاين بس الدفع عند الاستلام خلاني أاتمن. الحقيبة جميلة جداً!"</p>
<div class="test-divider"></div>
<p class="test-author-name">Yasmine Mahmoud</p>
<p class="test-author-name-ar">ياسمين محمود</p>
<p class="test-author-city">Alexandria</p>
</div>
<div class="test-card">
<div class="test-stars">★★★★★</div>
<p class="test-en">"Every friend asked where I got it. OMAÉ is not just a bag, it's a conversation starter."</p>
<p class="test-ar">"كل صحباتي سألوني عنها. OMAÉ مش بس حقيبة، دي نقطة بداية محادثة"</p>
<div class="test-divider"></div>
<p class="test-author-name">Sara Hassan</p>
<p class="test-author-name-ar">سارة حسن</p>
<p class="test-author-city">Mansoura</p>
</div>
</div>
</section>

<div class="insta-strip reveal">
<div class="insta-header">
<p class="insta-handle">@omae.bags</p>
<h2 class="insta-title" data-en="As Seen on Instagram" data-ar="شوفينا على إنستجرام">As Seen on Instagram</h2>
</div>
<div class="insta-grid">
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
<div class="insta-tile"><div class="insta-overlay"><span class="insta-icon">♡</span></div></div>
</div>
</div>

<section class="cta-banner reveal">
<div class="cta-text">
<p class="section-label" data-en="Get In Touch" data-ar="تواصلي معنا">Get In Touch</p>
<h2 class="cta-title">Your Perfect<br><em style="font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold)">Bag</em> Awaits</h2>
<p class="cta-title-ar">حقيبتك المثالية بتستناكي</p>
<p class="cta-desc" data-en="Not sure which style suits you? Our team is ready to help you find your perfect OMAÉ match via WhatsApp.">
Not sure which style suits you? Our team is ready to help you find your perfect OMAÉ match via WhatsApp.
</p>
<p class="cta-desc-ar">مش عارفة أنهي موديل يناسبك؟ فريقنا جاهز يساعدك تلاقي قطعتك المثالية على واتساب</p>
<div class="cta-buttons">
<a href="https://wa.me/201XXXXXXXXX" class="btn-wa">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
<span data-en="Chat on WhatsApp" data-ar="تواصلي على واتساب">Chat on WhatsApp</span>
</a>
<a href="#collection" class="btn-primary" data-en="Shop Now" data-ar="تسوقي الآن">Shop Now</a>
</div>
</div>
<div class="cta-logo-wrap">
<div class="cta-logo-ring">
<div class="cta-logo-ring-inner">
<div class="cta-logo-center">
<svg viewBox="0 0 200 200" width="120">
<circle cx="100" cy="100" r="90" fill="none" stroke="rgba(201,168,76,0.3)" stroke-width="1"/>
<text x="50%" y="48%" font-family="Georgia,serif" font-size="38" fill="rgba(201,168,76,0.7)" text-anchor="middle" dominant-baseline="middle" letter-spacing="4">OMAÉ</text>
<text x="50%" y="65%" font-family="Montserrat,sans-serif" font-size="8" fill="rgba(201,168,76,0.4)" text-anchor="middle" letter-spacing="3">SOFT LUXURY BAGS</text>
</svg>
</div>
</div>
</div>
</div>
</section>

<footer>
<div class="footer-top">
<div class="footer-brand">
<svg viewBox="0 0 160 50" width="120" style="display:block;margin-bottom:20px">
<text x="0" y="42" font-family="Georgia,serif" font-size="44" font-weight="300" fill="rgba(201,168,76,0.8)" letter-spacing="6">OMAÉ</text>
</svg>
<p class="footer-brand-desc">Soft luxury bags for the modern Egyptian woman. Where artistry meets everyday elegance.</p>
<p class="footer-brand-desc-ar">حقائب فاخرة للمرأة المصرية العصرية</p>
</div>
<div>
<p class="footer-col-title" data-en="Shop" data-ar="تسوقي">Shop</p>
<ul class="footer-links footer-links-ar">
<li><a href="#" data-en="New Arrivals" data-ar="وصل حديثاً">New Arrivals</a></li>
<li><a href="#" data-en="Tote Bags" data-ar="حقائب توت">Tote Bags</a></li>
<li><a href="#" data-en="Clutches" data-ar="كلتش">Clutches</a></li>
<li><a href="#" data-en="Crossbody" data-ar="كروس بودي">Crossbody</a></li>
</ul>
</div>
<div>
<p class="footer-col-title" data-en="Help" data-ar="مساعدة">Help</p>
<ul class="footer-links footer-links-ar">
<li><a href="#" data-en="Shipping Info" data-ar="معلومات التوصيل">Shipping Info</a></li>
<li><a href="#" data-en="Returns" data-ar="الإرجاع">Returns</a></li>
<li><a href="#" data-en="Size Guide" data-ar="دليل المقاسات">Size Guide</a></li>
<li><a href="#" data-en="FAQ" data-ar="أسئلة شائعة">FAQ</a></li>
</ul>
</div>
<div>
<p class="footer-col-title" data-en="Connect" data-ar="تواصلي">Connect</p>
<ul class="footer-links">
<li><a href="#">TikTok</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">WhatsApp</a></li>
<li><a href="#" data-en="Contact Us" data-ar="تواصلي معنا">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copy">© 2025 OMAÉ Soft Luxury Bags. All rights reserved.</p>
<div class="footer-socials">
<a href="#" class="footer-social">T</a>
<a href="#" class="footer-social">IG</a>
<a href="#" class="footer-social">WA</a>
</div>
</div>
</footer>

// Nav scroll
window.addEventListener('scroll', () => {
document.getElementById('mainNav').classList.toggle('scrolled', window.scrollY > 80);
});

// Scroll reveal
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Language toggle
function setLang(lang) {
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
document.querySelector(`.lang-btn[onclick="setLang('${lang}')"]`).classList.add('active');

const isAr = lang === 'ar';
document.documentElement.lang = lang;
document.documentElement.dir = isAr ? 'rtl' : 'ltr';

document.querySelectorAll('[data-en]').forEach(el => {
el.textContent = isAr ? (el.getAttribute('data-ar') || el.getAttribute('data-en')) : el.getAttribute('data-en');
});

// Show/hide Arabic elements
document.querySelectorAll('.hero-subtitle-ar, .hero-desc-ar, .editorial-title-ar, .editorial-text-ar, .collection-title-ar, .craft-title-ar, .craft-desc-ar, .craft-feat-ar, .cta-title-ar, .cta-desc-ar, .footer-brand-desc-ar, .product-name-ar, .test-ar, .test-author-name-ar, .test-section-ar').forEach(el => {
el.style.display = isAr ? 'block' : 'none';
});
}

// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});

// Init: hide AR elements
document.querySelectorAll('.hero-subtitle-ar, .hero-desc-ar, .editorial-title-ar, .editorial-text-ar, .collection-title-ar, .craft-title-ar, .craft-desc-ar, .craft-feat-ar, .cta-title-ar, .cta-desc-ar, .footer-brand-desc-ar, .product-name-ar, .test-ar, .test-author-name-ar, .test-section-ar').forEach(el => {
el.style.display = 'none';
});
</script>

</body>
</html>