/* Saima Dehn Al Oud & Agarwood — Arabic-style theme */
:root{
  --bg:#120d08;
  --panel:#1a120b;
  --wood:#5c3b1a;
  --gold:#d4af37;
  --gold-soft:#c9a43a;
  --text:#f3e9d2;
  --muted:#cbb894;
  --cream:#f7f3ea;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family: "Noto Serif Bengali", "Scheherazade New", Georgia, serif;
  background:var(--bg); color:var(--text);
  line-height:1.6;
}

/* Helpers */
.container{width:min(1100px, 92%); margin:0 auto}
a{color:var(--gold); text-decoration:none}
a:hover{opacity:.9}

/* Header */
.header{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse at top, rgba(212,175,55,.20), transparent 60%),
    linear-gradient(180deg, #1d140a, #0e0a06);
  border-bottom:1px solid rgba(212,175,55,.25);
}
.header .pattern{
  position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:
    conic-gradient(from 45deg, transparent 0 10deg, #d4af37 10deg 11deg, transparent 11deg 21deg),
    conic-gradient(from 0deg, transparent 0 10deg, #d4af37 10deg 11deg, transparent 11deg 21deg);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
  mix-blend-mode: soft-light;
}
.brand{padding:84px 0 72px; text-align:center}
.brand img.logo{width:120px; height:auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));}
.brand h1{margin:14px 0 0; font-size:clamp(30px, 6vw, 60px); color:var(--gold); letter-spacing:.5px}
.brand p.tag{margin:8px 0 0; color:var(--muted)}

.badges{display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.badge{
  border:1px solid rgba(212,175,55,.35);
  color:var(--gold); padding:6px 12px; border-radius:999px;
  background:rgba(212,175,55,.08); backdrop-filter: blur(2px);
}

/* Nav */
.nav{display:flex; gap:22px; justify-content:center; margin:20px 0 0 0; flex-wrap:wrap}
.nav a{padding:10px 8px; border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--gold)}

/* Sections */
.section{padding:64px 0; border-top:1px solid rgba(212,175,55,.18);
  background:linear-gradient(180deg, transparent, rgba(212,175,55,.03));
}
.section h2{color:var(--gold); margin:0 0 10px; font-size:28px}
.section p.lead{color:var(--muted); max-width:70ch}

/* Hero */
.hero{
  margin-top:22px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:18px; overflow:hidden; background:var(--panel);
  box-shadow:var(--shadow);
}
.hero .img{position:relative; aspect-ratio: 16/7; background:#2b1d10}
.hero .img img{width:100%; height:100%; object-fit:cover; display:block; opacity:.9}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,13,8,.85), transparent 60%);
}
.hero .content{position:absolute; left:4%; top:10%; max-width:min(640px, 90%);}
.hero .title{font-size:clamp(28px,5vw,48px); color:var(--cream); margin:0 0 6px}
.hero .subtitle{color:var(--muted); margin:0 0 14px}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.05));
  color:var(--gold); text-decoration:none; font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.cta:hover{transform:translateY(-1px)}

/* Products */
.products{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px}
@media (max-width:880px){.products{grid-template-columns: 1fr}}
.card{
  background:var(--panel);
  border:1px solid rgba(212,175,55,.25); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
}
.card .image{aspect-ratio:4/3; background:#23170e; display:flex; align-items:center; justify-content:center}
.card .image img{width:100%; height:100%; object-fit:cover; display:block}
.card .content{padding:18px}
.card h3{margin:0 0 8px; color:var(--cream)}
.price{color:var(--gold); font-weight:700}
.small{font-size:.94rem; color:var(--muted)}

/* About box */
.about{
  background:var(--panel);
  border:1px solid rgba(212,175,55,.25); border-radius:16px; padding:20px;
  box-shadow:var(--shadow)
}

/* Contact */
.contact-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px}
@media (max-width:720px){.contact-grid{grid-template-columns: 1fr}}
.contact-card{
  background:var(--panel); border:1px solid rgba(212,175,55,.25);
  border-radius:14px; padding:18px; box-shadow:var(--shadow);
}
footer{padding:26px 0 44px; text-align:center; color:var(--muted)}
footer .tiny{font-size:.85rem; opacity:.9}

/* Subtle arabesque separator */
.sep{height:1px; background:linear-gradient(90deg, transparent, rgba(212,175,55,.25), transparent); margin:20px 0}