:root{
  --black: #0b0a08;
  --panel: #17140f;
  --panel-2: #1f1a12;
  --gold: #c9a24b;
  --gold-light: #e8cd82;
  --gold-dim: #8a6f30;
  --emerald: #14352a;
  --emerald-light: #2a5c46;
  --ivory: #f6f1e6;
  --ivory-dim: #cfc6b0;
  --line: rgba(201,162,75,0.25);
  --shadow: 0 20px 50px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(201,162,75,0.35), 0 18px 40px rgba(201,162,75,0.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--black); color:var(--ivory); font-family:'Cairo',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html.lang-ar body{ direction:rtl; }
h1,h2,h3,.display{ font-family:'Marcellus','Amiri',serif; font-weight:400; letter-spacing:0.02em; }
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3{ font-family:'Amiri','Marcellus',serif; font-weight:700; letter-spacing:0; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.en{display:inline;} .ar{display:none;}
html.lang-ar .en{display:none;} html.lang-ar .ar{display:inline;}
.en-block{display:block;} .ar-block{display:none;}
html.lang-ar .en-block{display:none;} html.lang-ar .ar-block{display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(11,10,8,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:46px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--gold-dim); }
.brand .name{ font-family:'Marcellus',serif; font-size:19px; letter-spacing:0.12em; color:var(--gold-light); text-transform:uppercase; line-height:1.1; }
.brand .name small{ display:block; font-size:10px; letter-spacing:0.28em; color:var(--ivory-dim); font-family:'Cairo',sans-serif; margin-top:2px; text-transform:none; }
nav.links{ display:flex; gap:30px; font-size:14.5px; }
nav.links a{ color:var(--ivory-dim); position:relative; padding:4px 0; transition:.25s; }
nav.links a:hover, nav.links a.active{ color:var(--gold-light); }
nav.links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.lang-toggle{ display:flex; border:1px solid var(--gold-dim); border-radius:20px; overflow:hidden; font-size:12.5px; }
.lang-toggle button{ background:transparent; border:none; color:var(--ivory-dim); padding:7px 15px; cursor:pointer; font-family:'Cairo',sans-serif; transition:.25s; }
.lang-toggle button.active{ background:var(--gold); color:var(--black); font-weight:700; }
.icon-btn{ position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s; }
.icon-btn:hover{ border-color:var(--gold); transform:translateY(-2px); }
.icon-btn svg{ width:17px; height:17px; stroke:var(--ivory-dim); }
.icon-btn:hover svg{ stroke:var(--gold-light); }
.cart-count{ position:absolute; top:-6px; right:-6px; background:var(--gold); color:var(--black); font-size:10px; font-weight:700; border-radius:50%; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* ---------- flash messages ---------- */
.flash-stack{ padding-top:16px; display:grid; gap:10px; }
.flash{ padding:12px 16px; border-radius:4px; font-size:13.5px; border:1px solid var(--line); animation:slideDown .35s ease; }
.flash-success{ background:rgba(42,92,70,0.25); color:var(--ivory); }
.flash-error{ background:rgba(180,60,60,0.18); color:#f3c9c9; border-color:rgba(200,90,90,0.4); }
.flash-info{ background:rgba(201,162,75,0.1); }
@keyframes slideDown{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:2px; font-size:14px; cursor:pointer; border:1px solid transparent; transition:.3s cubic-bezier(.2,.8,.2,1); font-weight:600; background:transparent; position:relative; overflow:hidden; }
button{ font-family:'Cairo',sans-serif; }
.btn-gold{ background:var(--gold); color:var(--black); }
.btn-gold:hover{ background:var(--gold-light); box-shadow:var(--glow); transform:translateY(-2px); }
.btn-gold:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ border-color:var(--gold-dim); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:90px 0 70px; background:radial-gradient(ellipse at 20% 0%, rgba(201,162,75,0.12), transparent 55%), radial-gradient(ellipse at 85% 30%, rgba(42,92,70,0.2), transparent 55%), var(--black); border-bottom:1px solid var(--line); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><g fill="none" stroke="%23c9a24b" stroke-opacity="0.06" stroke-width="1"><circle cx="110" cy="110" r="90"/><circle cx="110" cy="110" r="60"/><path d="M110 20 L134 86 L200 110 L134 134 L110 200 L86 134 L20 110 L86 86 Z"/></g></svg>'); background-size:220px 220px; opacity:.7; animation:driftBg 40s linear infinite; }
@keyframes driftBg{ from{background-position:0 0;} to{background-position:220px 220px;} }
.hero-inner{ position:relative; text-align:center; max-width:760px; margin:0 auto; }
.eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold-light); font-size:12.5px; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:20px; animation:fadeUp .6s ease both; }
.eyebrow .line{ width:34px; height:1px; background:var(--gold-dim); }
.hero h1{ font-size:46px; line-height:1.15; margin:0 0 20px; animation:fadeUp .7s .05s ease both; }
.hero p.lead{ color:var(--ivory-dim); font-size:16px; line-height:1.85; max-width:600px; margin:0 auto 30px; animation:fadeUp .7s .12s ease both; }
.hero .cta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; animation:fadeUp .7s .2s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

/* ---------- category strip ---------- */
.cat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:50px 0 70px; }
.cat-card{ position:relative; border:1px solid var(--line); padding:34px 26px; text-align:center; background:linear-gradient(180deg, rgba(201,162,75,0.04), transparent); transition:.35s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.cat-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(201,162,75,0.16), transparent 60%); opacity:0; transition:.35s; }
.cat-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:var(--shadow); }
.cat-card:hover::before{ opacity:1; }
.cat-card img.cat-icon{ width:56px; height:56px; margin:0 auto 16px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(201,162,75,0.25)); transition:.4s; }
.cat-card:hover img.cat-icon{ transform:scale(1.12) rotate(-3deg); }
.cat-card h3{ font-size:19px; color:var(--gold-light); margin:0 0 8px; }
.cat-card p{ font-size:12.5px; color:var(--ivory-dim); margin:0; }

/* ---------- section ---------- */
.section{ padding:80px 0; }
.section.alt{ background:var(--panel); }
.sec-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.sec-head h2{ font-size:34px; margin:0 0 12px; }
.sec-head p{ color:var(--ivory-dim); font-size:15px; line-height:1.8; }

/* ---------- product grid & cards ---------- */
.grid-products{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:26px; }
.pcard{ background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; position:relative; opacity:0; transform:translateY(24px); transition:border-color .3s, box-shadow .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.pcard.in-view{ opacity:1; transform:translateY(0); }
.pcard:hover{ border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-8px); }
.pcard .badge{ position:absolute; top:14px; inset-inline-start:14px; z-index:2; background:var(--gold); color:var(--black); font-size:10.5px; font-weight:700; letter-spacing:0.05em; padding:5px 11px; text-transform:uppercase; animation:pulseBadge 2.4s ease-in-out infinite; }
@keyframes pulseBadge{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,0.5);} 50%{ box-shadow:0 0 0 6px rgba(201,162,75,0);} }
.pcard .pimg{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#0f0d0a; position:relative; }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.pcard:hover .pimg img{ transform:scale(1.08); }
.pcard .pimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(201,162,75,0.12) 50%, transparent 60%); background-size:250% 250%; background-position:120% 120%; opacity:0; transition:opacity .4s; pointer-events:none; }
.pcard:hover .pimg::after{ opacity:1; animation:shine 1.1s ease forwards; }
@keyframes shine{ from{background-position:120% 120%;} to{background-position:-20% -20%;} }
.pcard .pbody{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pcard .cat-tag{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:8px; }
.pcard h3{ font-size:17px; margin:0 0 8px; line-height:1.4; font-family:'Cairo',sans-serif; font-weight:600; }
.pcard p.desc{ font-size:13px; color:var(--ivory-dim); line-height:1.7; margin:0 0 16px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pcard .rating{ font-size:12px; color:var(--gold-light); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.pcard .pfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.price{ font-size:17px; color:var(--gold-light); font-weight:700; }
.price .was{ font-size:12px; color:var(--ivory-dim); text-decoration:line-through; margin-inline-start:6px; font-weight:400; }
.buy-btn{ border:1px solid var(--gold-dim); color:var(--gold-light); font-size:12px; padding:9px 16px; cursor:pointer; background:transparent; transition:.25s; font-weight:600; }
.buy-btn:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); transform:translateY(-2px); }
.buy-btn.added{ background:var(--emerald-light); border-color:var(--emerald-light); color:var(--ivory); }

/* ---------- product detail ---------- */
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding:60px 0; }
.product-gallery .main-img{ border:1px solid var(--line); aspect-ratio:1/1; overflow:hidden; background:#0f0d0a; }
.product-gallery .main-img img{ width:100%; height:100%; object-fit:cover; animation:fadeUp .5s ease both; }
.product-gallery .thumbs{ display:flex; gap:10px; margin-top:12px; }
.product-gallery .thumbs img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); cursor:pointer; transition:.25s; }
.product-gallery .thumbs img:hover, .product-gallery .thumbs img.active{ border-color:var(--gold); }
.product-info h1{ font-size:32px; margin:0 0 12px; }
.product-info .price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
.product-info .price-row .price{ font-size:26px; }
.product-info p.desc{ color:var(--ivory-dim); line-height:1.9; margin-bottom:24px; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty-stepper button{ width:34px; height:38px; background:transparent; border:none; color:var(--gold-light); font-size:16px; cursor:pointer; }
.qty-stepper button:hover{ background:var(--panel-2); }
.qty-stepper input{ width:44px; text-align:center; background:transparent; border:none; color:var(--ivory); font-size:14px; }
.trust-mini{ display:flex; gap:20px; margin-top:26px; flex-wrap:wrap; font-size:12.5px; color:var(--ivory-dim); }
.trust-mini span{ display:flex; align-items:center; gap:6px; }
.trust-mini svg{ width:16px; height:16px; stroke:var(--gold); }

/* ---------- cart / checkout ---------- */
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; padding:60px 0; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table thead th{ text-align:start; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dim); font-weight:600; padding-bottom:16px; border-bottom:1px solid var(--line); }
.cart-item td{ padding:20px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-prod{ display:flex; align-items:center; gap:16px; }
.cart-prod img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--line); flex:none; }
.cart-prod-name{ font-size:14.5px; color:var(--ivory); font-weight:600; margin-bottom:4px; }
.cart-prod-cat{ font-size:11.5px; color:var(--ivory-dim); }
.cart-price{ color:var(--gold-light); font-weight:700; font-size:14.5px; }
.remove-link{ font-size:12px; color:var(--ivory-dim); cursor:pointer; border-bottom:1px dotted var(--ivory-dim); background:none; border-top:none; border-left:none; border-right:none; padding:0; }
.remove-link:hover{ color:#e88; border-color:#e88; }
.summary-card{ background:var(--panel); border:1px solid var(--line); padding:28px 24px; position:sticky; top:100px; }
.summary-card h3{ font-size:18px; margin:0 0 20px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ivory-dim); padding:10px 0; border-bottom:1px solid var(--line); }
.summary-row span:last-child{ color:var(--ivory); }
.summary-total{ display:flex; justify-content:space-between; padding:18px 0 4px; font-size:17px; font-weight:700; }
.summary-total span:last-child{ color:var(--gold-light); }
.empty-cart{ text-align:center; padding:80px 20px; color:var(--ivory-dim); }

.checkout-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; padding:60px 0; }
.form-section{ margin-bottom:34px; }
.form-section h3{ font-size:16px; color:var(--gold-light); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.form-section h3 .num{ width:24px; height:24px; border-radius:50%; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:12px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group.full{ grid-column:1 / -1; }
.form-group label{ font-size:12px; color:var(--ivory-dim); }
.form-group input, .form-group select{ background:var(--panel); border:1px solid var(--line); color:var(--ivory); padding:12px 14px; font-size:13.5px; border-radius:2px; outline:none; transition:.25s; }
.form-group input:focus, .form-group select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,0.12); }
.form-error{ font-size:11.5px; color:#e88; }
.pay-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.pay-option{ border:1px solid var(--line); padding:16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:.25s; }
.pay-option:hover{ border-color:var(--gold-dim); }
.pay-option.selected{ border-color:var(--gold); background:rgba(201,162,75,0.06); }
.pay-option .plabel{ font-size:13.5px; color:var(--ivory); font-weight:600; }
.pay-option .psub{ font-size:11.5px; color:var(--ivory-dim); }
.confirmation{ text-align:center; padding:100px 20px; }
.confirmation .check-anim{ width:90px; height:90px; margin:0 auto 26px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; animation:popIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes popIn{ from{ transform:scale(0.5); opacity:0;} to{ transform:scale(1); opacity:1;} }
.confirmation .check-anim svg{ width:40px; height:40px; stroke:var(--gold-light); }

/* ---------- footer ---------- */
footer{ background:var(--black); padding-top:60px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--line); }
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ font-size:13px; color:var(--ivory-dim); line-height:1.8; max-width:280px; }
.foot-col h4{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); margin:0 0 16px; font-weight:700; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-col a{ font-size:13.5px; color:var(--ivory-dim); transition:.25s; }
.foot-col a:hover{ color:var(--gold-light); }
.foot-social{ display:flex; gap:10px; margin-top:14px; }
.foot-social a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.foot-social svg{ width:15px; height:15px; stroke:var(--ivory-dim); }
.foot-social a:hover{ border-color:var(--gold); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12px; color:var(--ivory-dim); flex-wrap:wrap; gap:10px; }
.pay-icons{ display:flex; gap:10px; }
.pay-icons span{ border:1px solid var(--line); padding:5px 10px; font-size:10.5px; color:var(--ivory-dim); }

@media (max-width:980px){
  nav.links{ display:none; }
  .cat-strip{ grid-template-columns:1fr; }
  .product-detail{ grid-template-columns:1fr; }
  .cart-layout, .checkout-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .grid-products{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .foot-grid{ grid-template-columns:1fr; }
}

/* ---------- scroll-reveal sections ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.cat-strip .cat-card, .review-grid .review-card{ opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.reveal.in-view .cat-strip .cat-card, .reveal.in-view .review-grid .review-card{ opacity:1; transform:translateY(0); }

/* ---------- ad carousel (homepage) ---------- */
.ad-carousel-wrap{ padding:36px 0 0; background:var(--black); }
.ad-carousel{ position:relative; border:1px solid var(--line); overflow:hidden; background:var(--panel); }
/* Force the track to always lay out slides left-to-right, regardless of
   page language. The slider's index math (translateX(-index*100%)) assumes
   LTR order; without this, html.lang-ar's direction:rtl cascades onto this
   flex container and visually reverses slide order, which makes prev/next
   feel inverted and desyncs the dots from what's actually showing. */
.ad-track{ display:flex; direction:ltr; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
/* Each slide can still flow RTL internally for correct Arabic text
   alignment and mirrored image/info layout — this only affects content
   inside the slide, not its position among siblings in .ad-track. */
html.lang-ar .ad-slide{ direction:rtl; }
.ad-slide{ position:relative; min-width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding:34px 48px; direction:ltr; }
.ad-slide img{ width:100%; max-height:280px; object-fit:contain; justify-self:center; filter:drop-shadow(0 12px 30px rgba(0,0,0,0.5)); animation:floatSlide 4s ease-in-out infinite; }
@keyframes floatSlide{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.ad-slide-info{ text-align:start; }
.ad-badge{ display:inline-block; background:var(--gold); color:var(--black); font-size:10.5px; font-weight:700; letter-spacing:0.06em; padding:5px 12px; text-transform:uppercase; margin-bottom:14px; }
.ad-slide-info h3{ font-size:24px; margin:0 0 12px; color:var(--ivory); }
.ad-slide-info .price{ font-size:20px; }
/* direction:ltr + unicode-bidi:bidi-override are required here: the ‹ and ›
   characters are Unicode "mirrored" glyphs, so browsers auto-swap which
   arrow they render when the surrounding context is RTL (same mechanism
   that flips parentheses in Arabic text). Without this override, the
   "prev" button silently renders as › and "next" renders as ‹ whenever
   html.lang-ar is active, even though left:/right: positioning is correct. */
.ad-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-dim); background:rgba(11,10,8,0.7); color:var(--gold-light); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; z-index:3; direction:ltr; unicode-bidi:bidi-override; }
.ad-nav:hover{ border-color:var(--gold); background:var(--panel-2); }
.ad-prev{ left:14px; } .ad-next{ right:14px; }
.ad-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; direction:ltr; }
.ad-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-dim); background:transparent; cursor:pointer; padding:0; transition:.25s; }
.ad-dot.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.2); }
@media (max-width:760px){
  .ad-slide{ grid-template-columns:1fr; padding:26px 24px 60px; text-align:center; }
  .ad-slide-info{ text-align:center; }
  .ad-slide img{ max-height:200px; }
}

/* ---------- about band (why us) ---------- */
.about-band{ background:linear-gradient(135deg, var(--emerald), var(--emerald-light)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0; }
.about-inner h2{ font-size:30px; margin:0 0 18px; }
.about-inner p{ color:rgba(246,241,230,0.85); font-size:15px; line-height:1.9; margin:0 0 24px; }
.feat-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.feat-list li{ display:flex; gap:12px; align-items:center; font-size:14px; }
.feat-list .rosette{ width:16px; height:16px; flex:none; }
.feat-list .rosette path{ fill:var(--gold-light); }

/* ---------- reviews ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card{ background:var(--panel); border:1px solid var(--line); padding:26px 24px; transition:.3s; }
.review-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.review-card .stars{ color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:12px; }
.review-card p{ font-size:13.5px; color:var(--ivory-dim); line-height:1.85; margin:0 0 16px; }
.review-card .who{ display:flex; align-items:center; gap:12px; }
.review-card .avatar{ width:36px; height:36px; border-radius:50%; background:var(--panel-2); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-family:'Marcellus',serif; color:var(--gold-light); font-size:14px; flex:none; }
.review-card .who-meta strong{ display:block; font-size:13px; color:var(--ivory); font-weight:600; }
.review-card .who-meta span{ display:block; font-size:11px; color:var(--ivory-dim); }

@media (max-width:980px){
  .about-inner{ grid-template-columns:1fr; padding:50px 0; }
  .review-grid{ grid-template-columns:1fr; }
}