/* Dar Al Mathaq — Obsidian & Gold visual system v2 */
:root {
  --ink: #080808;
  --ink-soft: #11110f;
  --ivory: #0d0d0c;
  --paper: #121210;
  --gold: #c9a45c;
  --gold-light: #f0d58d;
  --olive: #8c7b4e;
  --wine: #b48a42;
  --text: #f4efe4;
  --muted: #a9a192;
  --line: rgba(222, 190, 118, .18);
  --white: #fffdf7;
  --shadow-sm: 0 18px 46px rgba(0,0,0,.32);
  --shadow-lg: 0 38px 100px rgba(0,0,0,.54);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
}

body {
  background: #080808;
  color: var(--text);
  background-image: radial-gradient(circle at 50% -10%, rgba(201,164,92,.08), transparent 30%);
}
::selection { background: var(--gold); color: #080808; }

.utility-bar { background:#050505; border-bottom:1px solid rgba(255,255,255,.05); color:#bdb5a8; }
.site-header { background:rgba(7,7,7,.88); border-bottom:1px solid rgba(201,164,92,.16); box-shadow:0 14px 40px rgba(0,0,0,.2); }
.site-header__inner { min-height:82px; }
.brand { gap:13px; }
.brand__mark { position:relative; width:48px; height:48px; border-color:rgba(240,213,141,.55); background:linear-gradient(145deg,rgba(201,164,92,.17),rgba(201,164,92,.02)); box-shadow:inset 0 0 0 4px #080808, 0 0 0 1px rgba(201,164,92,.12); }
.brand__mark::after { content:""; position:absolute; inset:-5px; border:1px solid rgba(201,164,92,.13); border-radius:50%; }
.brand strong { color:#fffaf0; font-size:1.02rem; letter-spacing:.02em; }
.brand small { color:#9c8d72; letter-spacing:.28em; }
.main-nav a { padding:9px 2px; color:#bdb5aa; font-weight:500; }
.main-nav a.is-active::after { bottom:-8px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.cart-action { min-height:38px; padding:0 12px; border:1px solid rgba(201,164,92,.16); border-radius:99px; }
.cart-action b { background:linear-gradient(135deg,#f0d58d,#a87e35); box-shadow:0 3px 12px rgba(201,164,92,.25); }

.button { position:relative; overflow:hidden; min-height:52px; border-radius:99px; padding-inline:28px; letter-spacing:.01em; box-shadow:none; isolation:isolate; }
.button::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:-45%; width:32%; transform:skewX(-22deg); background:rgba(255,255,255,.23); transition:left .55s ease; }
.button:hover::before { left:118%; }
.button--primary { border-color:#ddbf76; background:linear-gradient(135deg,#f0d58d 0%,#c69d4e 47%,#9c742f 100%); color:#090909; box-shadow:0 10px 30px rgba(185,140,61,.18), inset 0 1px rgba(255,255,255,.4); }
.button--primary:hover { background:linear-gradient(135deg,#f8e4ab,#d2aa5c 48%,#a87c33); box-shadow:0 15px 36px rgba(201,164,92,.27); }
.button--ghost { border-color:rgba(240,213,141,.35); background:rgba(255,255,255,.025); backdrop-filter:blur(8px); }
.button--ghost:hover { background:rgba(201,164,92,.08); border-color:var(--gold-light); }
.button--dark { border:1px solid var(--gold); background:transparent; color:var(--gold-light); }
.button--light { border-color:#f1d794; background:#f1d794; color:#080808; }
.text-link { color:var(--gold-light); transition:gap .18s ease,color .18s ease; }
.eyebrow { color:var(--gold-light); letter-spacing:.11em; }
.eyebrow::before { width:42px; background:linear-gradient(90deg,transparent,currentColor); }
.eyebrow--dark { color:var(--gold); }

.hero { min-height:760px; background:#080808; }
.hero::before { opacity:.28; background-size:64px 64px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 35%,rgba(8,8,8,.4) 70%,#080808 100%); }
.hero__glow { width:680px; height:680px; left:-180px; background:rgba(201,164,92,.11); filter:blur(80px); }
.hero__grid { z-index:2; min-height:760px; grid-template-columns:1.02fr .98fr; }
.hero__content { position:relative; z-index:3; }
.hero h1 { max-width:700px; color:#fffaf0; font-weight:600; line-height:1.32; text-shadow:0 12px 35px rgba(0,0,0,.3); }
.hero h1 em { background:linear-gradient(110deg,#a97b30,#f1d997 52%,#b68435); color:transparent; background-clip:text; -webkit-background-clip:text; }
.hero__lead { color:#bdb4a6; line-height:2; }
.hero__proof { border-color:rgba(201,164,92,.16); }
.hero__proof div { border-color:rgba(201,164,92,.13); }
.hero__proof strong { color:#ead18f; font-size:1.12rem; }
.hero__visual { isolation:isolate; }
.hero__visual::before { inset:28px -28px -28px 28px; border-color:rgba(240,213,141,.25); }
.hero__visual::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55)); pointer-events:none; }
.hero__image { height:560px; filter:contrast(1.03) saturate(.92); box-shadow:0 45px 110px rgba(0,0,0,.65); }
.floating-note { z-index:3; left:-18px; bottom:38px; padding:21px 23px; border:1px solid rgba(240,213,141,.24); border-radius:0 18px 0 18px; background:rgba(10,10,9,.89); color:#f7efe1; backdrop-filter:blur(18px); }
.floating-note small { color:#d6b86f; }.floating-note span { color:#9f978b; }

.section,.section--light { position:relative; background:#0a0a09; }
.section--light { background:#0e0e0c; border-block:1px solid rgba(201,164,92,.08); }
.section-heading h2,.story h2,.branches h2 { color:#fffaf0; font-weight:600; }
.section-heading p:last-child { color:#a9a192; }
.category-grid { gap:14px; }
.category-grid a { position:relative; overflow:hidden; padding:31px 18px; border-color:rgba(201,164,92,.16); border-radius:18px 0 18px 0; background:linear-gradient(155deg,#171714,#0d0d0c); }
.category-grid a::after { content:""; position:absolute; inset:auto -30px -50px auto; width:100px; height:100px; border:1px solid rgba(201,164,92,.1); border-radius:50%; }
.category-grid a:hover { border-color:rgba(240,213,141,.55); background:linear-gradient(155deg,#1c1b17,#10100e); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.category-grid span { border:1px solid rgba(201,164,92,.28); background:rgba(201,164,92,.07); color:var(--gold-light); }
.category-grid strong { color:#f5ecdf; }.category-grid small { color:#8f887d; }

.dish-grid { gap:20px; }
.dish-card { border-color:rgba(201,164,92,.13); border-radius:22px 0 22px 0; background:#11110f; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.dish-card:hover { border-color:rgba(201,164,92,.42); box-shadow:0 30px 70px rgba(0,0,0,.4); }
.dish-card__visual { filter:saturate(.72) brightness(.78); }
.dish-card__visual--2 { filter:hue-rotate(40deg) saturate(.6) brightness(.78); }.dish-card__visual--3 { filter:hue-rotate(75deg) saturate(.55) brightness(.76); }.dish-card__visual--4 { filter:hue-rotate(320deg) saturate(.6) brightness(.82); }
.dish-card__visual span { border:1px solid rgba(201,164,92,.22); border-radius:99px; background:rgba(8,8,8,.78); color:#e8cb83; backdrop-filter:blur(8px); }
.dish-card h3 { color:#fff8ea; }.dish-card p { color:#9e968a; }.dish-card footer { border-color:rgba(201,164,92,.12); }.dish-card footer strong { color:#e8ca80; }
.add-button { border-color:#d0ad62; background:linear-gradient(135deg,#d7b66c,#9d732f); color:#080808; box-shadow:0 8px 20px rgba(201,164,92,.16); }.add-button:hover { background:#f0d58d; transform:rotate(90deg); }

.story { background:radial-gradient(circle at 18% 45%,rgba(201,164,92,.1),transparent 35%),#070707; }
.story__visual { border-radius:160px 160px 0 0; background:linear-gradient(150deg,rgba(201,164,92,.15),transparent 52%),radial-gradient(circle at 45% 35%,#6f4d31 0 10%,#31241b 11% 24%,#17130f 25% 50%,#080808 51%); box-shadow:inset 0 0 0 1px rgba(201,164,92,.16),0 35px 90px rgba(0,0,0,.42); }
.story__visual::after { border-color:rgba(240,213,141,.2); border-radius:140px 140px 0 0; }
.story__stamp { background:linear-gradient(145deg,#f0d58d,#a87a31); box-shadow:0 15px 45px rgba(0,0,0,.35); }
.feature-list li { border-color:rgba(201,164,92,.13); }.feature-list small { color:#948d82; }
.steps-grid { gap:14px; border:0; background:transparent; }
.steps-grid article { position:relative; overflow:hidden; border:1px solid rgba(201,164,92,.14); border-radius:20px 0; background:linear-gradient(150deg,#161613,#0d0d0c); }
.steps-grid article::after { content:""; position:absolute; top:-50px; left:-50px; width:120px; height:120px; border:1px solid rgba(201,164,92,.08); border-radius:50%; }
.steps-grid h3 { color:#fff6e8; }.steps-grid p { color:#999185; }
.offer-section { background:#080808; }
.offer-card { border:1px solid rgba(240,213,141,.24); border-radius:30px 0; background:radial-gradient(circle at 18% 50%,rgba(201,164,92,.18),transparent 30%),linear-gradient(120deg,#191510,#090909 66%); box-shadow:0 40px 100px rgba(0,0,0,.4); }
.offer-card::after { border-color:rgba(240,213,141,.12); }
.quote-card { padding:48px; border-inline:1px solid rgba(201,164,92,.18); background:linear-gradient(90deg,transparent,rgba(201,164,92,.035),transparent); }
.quote-card blockquote { color:#f7efe2; }
.branch-card { border-color:rgba(201,164,92,.18); border-radius:18px 0; background:#141411; box-shadow:var(--shadow-sm); }
.map-placeholder { border:1px solid rgba(201,164,92,.18); background-color:#171611; filter:sepia(.55) brightness(.65); }

.site-footer { background:#050505; border-top:1px solid rgba(201,164,92,.16); }
.footer-grid h2 { color:#f3dfab; }.footer-grid a:hover { color:var(--gold-light); }.social-links a { border-color:rgba(201,164,92,.28); color:#e8ca80; }.social-links a:hover { background:var(--gold); color:#080808; }
.footer-bottom { border-color:rgba(201,164,92,.12); }.environment-badge { border-color:rgba(201,164,92,.3); color:#d6ba77; }

/* Luxury forms */
.auth-page,.simple-page { background:radial-gradient(circle at 15% 20%,rgba(201,164,92,.1),transparent 28%),#090909; }
.auth-shell { overflow:hidden; border:1px solid rgba(201,164,92,.22); border-radius:32px 0; background:#10100e; box-shadow:0 55px 130px rgba(0,0,0,.58); }
.auth-promo { background:linear-gradient(145deg,rgba(201,164,92,.13),transparent 50%),#080808; }
.auth-promo::before { content:""; position:absolute; inset:26px; border:1px solid rgba(201,164,92,.16); border-radius:22px 0; pointer-events:none; }
.auth-promo::after { border-color:rgba(240,213,141,.16); }
.auth-promo--register { background:linear-gradient(145deg,rgba(201,164,92,.17),transparent 48%),#080808; }
.auth-promo h1 { position:relative; color:#fff9ed; }
.auth-promo > p,.auth-promo ul { position:relative; }
.auth-promo li { border-color:rgba(201,164,92,.12); }
.auth-form-wrap { background:linear-gradient(145deg,#151512,#0e0e0c); }
.form-heading h1,.form-heading h2 { color:#fff8e9; }.form-heading > p:last-child { color:#9e968b; }
.field label { color:#ddd4c5; letter-spacing:.015em; }
.field input,.field textarea { min-height:54px; padding-inline:18px; border:1px solid rgba(201,164,92,.2); border-radius:14px 0 14px 0; background:rgba(5,5,5,.58); color:#fff9ed; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.field input::placeholder,.field textarea::placeholder { color:#69645c; }
.field input:hover,.field textarea:hover { border-color:rgba(201,164,92,.38); }
.field input:focus,.field textarea:focus { border-color:#d6b567; background:#090909; box-shadow:0 0 0 4px rgba(201,164,92,.09),0 12px 28px rgba(0,0,0,.18); }
.check-field { color:#9d9589; }.check-field input { appearance:none; display:grid; place-content:center; flex:none; width:19px; height:19px; border:1px solid rgba(201,164,92,.45); border-radius:5px; background:#090909; }.check-field input::before { content:""; width:9px; height:9px; border-radius:2px; transform:scale(0); background:linear-gradient(135deg,#f0d58d,#a77a31); transition:transform .12s ease; }.check-field input:checked::before { transform:scale(1); }
.form-note { padding:10px; border:1px dashed rgba(201,164,92,.18); border-radius:10px; color:#817a70; }
.narrow-card { border:1px solid rgba(201,164,92,.25); border-top:3px solid var(--gold); border-radius:26px 0; background:linear-gradient(145deg,#171714,#0d0d0c); box-shadow:0 45px 110px rgba(0,0,0,.5); }
.form-heading { position:relative; }.form-heading__number { position:absolute; top:-18px; left:0; color:rgba(201,164,92,.12); font:700 4.8rem/1 Georgia,serif; pointer-events:none; }
.password-wrap { position:relative; }.password-wrap input { padding-left:76px; }.password-wrap button { position:absolute; left:9px; top:50%; min-width:56px; min-height:36px; transform:translateY(-50%); border:0; border-right:1px solid rgba(201,164,92,.2); background:transparent; color:#d5b76f; font-size:.68rem; font-weight:700; }
.password-meter { display:flex; align-items:center; gap:5px; margin-top:7px; }.password-meter i { width:32px; height:3px; border-radius:9px; background:rgba(201,164,92,.16); }.password-meter i:first-child { background:var(--gold); }.password-meter span { margin-right:5px; color:#777168; font-size:.62rem; }
.button--full { justify-content:space-between; padding-inline:24px; }.button--full b { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:rgba(0,0,0,.14); font-size:1rem; }
.secure-note { display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border:1px solid rgba(201,164,92,.12); border-radius:12px 0; background:rgba(201,164,92,.035); }.secure-note > span { color:var(--gold); font-size:.65rem; }.secure-note p { margin:0; color:#817a70; font-size:.65rem; }.secure-note strong { color:#c1b6a4; }

@media (max-width:1020px) {
  .main-nav { background:rgba(7,7,7,.98); }
  .hero__image { height:500px; }
}
@media (max-width:760px) {
  .site-header__inner { min-height:70px; }
  .brand__mark { width:41px; height:41px; }
  .hero::after { background:linear-gradient(180deg,transparent 42%,#080808 89%); }
  .hero__image { height:430px; }
  .auth-shell { border-radius:22px 0; }
  .auth-promo::before { inset:18px; }
  .category-grid a { border-radius:15px 0; }
}
@media (max-width:430px) {
  .hero__image { height:360px; }
  .hero__proof span { font-size:.61rem; }
  .auth-promo { min-height:300px; padding:45px 30px; }
  .auth-form-wrap { padding:36px 22px; }
  .quote-card { padding:35px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .button::before { display:none; }
}
