/*
 * AL DHAKIROON | Finish pass 01
 * Optional visual layer. Remove the finishing.css link to restore the original.
 * Decorative only: no product, content, route, or behavior changes.
 */

:root {
  --finish-hairline: rgba(217,191,130,.32);
  --finish-dark-shadow: 0 22px 60px rgba(0,19,15,.24);
  --finish-light-shadow: 0 14px 35px rgba(57,43,21,.075);
  --finish-panel: rgba(255,253,246,.55);
}

/* Quiet material depth instead of flat color. */
body {
  background-image:
    radial-gradient(ellipse at 83% 12%, rgba(53,105,79,.18), transparent 46%),
    linear-gradient(135deg, #092a25 0%, #06241f 100%);
}
.site-header {
  position: relative;
  background: linear-gradient(180deg, #0b332b 0%, #092a25 100%);
  box-shadow: 0 10px 30px rgba(0,17,13,.12);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/assets/geometry.svg") center / 112px repeat;
  opacity: .07;
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(217,191,130,.42) 50%, transparent 96%);
  pointer-events: none;
}
.site-header .header-inner { position: relative; }
.launch-badge {
  background: rgba(217,191,130,.035);
  border-color: rgba(217,191,130,.33);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 5px 20px rgba(0,12,10,.1);
}

/* Hero: a soft golden halo, better arch edging, and tactile controls. */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 82% 51%, rgba(196,149,72,.07), transparent 56%);
}
.hero-art { isolation: isolate; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 9% -7% 6%;
  z-index: -1;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(202,167,98,.21), rgba(27,95,73,.1) 52%, transparent 74%);
  filter: blur(24px);
  pointer-events: none;
}
.hero-photo {
  box-shadow: var(--finish-dark-shadow), inset 0 0 0 1px rgba(255,255,255,.16);
  outline: 1px solid rgba(217,191,130,.23);
  outline-offset: -5px;
}
.hero-outline {
  border-color: rgba(217,191,130,.7);
  box-shadow: 0 0 0 4px rgba(201,164,92,.035), 0 14px 34px rgba(0,14,11,.2);
}
.photo-seal {
  background: radial-gradient(circle at 30% 20%, #155345, #092a25 73%);
  border-color: rgba(217,191,130,.6);
  box-shadow: 0 0 0 5px rgba(7,59,48,.62), 0 12px 32px rgba(0,15,12,.33), inset 0 1px 0 rgba(255,255,255,.1);
}
.button {
  border-radius: 5px;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.button-gold {
  border: 1px solid rgba(255,241,189,.5);
  background: linear-gradient(135deg, #ead49f, #d9bf82 52%, #c9a45c);
  box-shadow: 0 8px 25px rgba(0,20,15,.19), inset 0 1px 0 rgba(255,255,255,.45);
}
.button-gold:hover { box-shadow: 0 12px 30px rgba(0,20,15,.27), inset 0 1px 0 rgba(255,255,255,.45); }
.button-outline {
  border-color: rgba(217,191,130,.66);
  box-shadow: inset 0 0 0 1px rgba(217,191,130,.07), 0 10px 25px rgba(0,0,0,.15);
}
.button-outline:hover { box-shadow: inset 0 0 0 1px rgba(217,191,130,.2), 0 12px 30px rgba(0,0,0,.2); }
.text-link { transition: color .2s ease, border-color .2s ease; }
.text-link:hover { border-bottom-color: rgba(217,191,130,.74); }
.hero-footnote svg { filter: drop-shadow(0 0 7px rgba(217,191,130,.28)); }
.brand-strip {
  position: relative;
  background: linear-gradient(90deg, rgba(217,191,130,.015), rgba(217,191,130,.065) 50%, rgba(217,191,130,.015));
  border-color: var(--finish-hairline);
  box-shadow: 0 9px 27px rgba(0,15,12,.08);
}
.brand-strip::after {
  content: "";
  position: absolute;
  inset-inline: 9%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,191,130,.35), transparent);
}

/* Embossed paper and faint Islamic geometry on ivory sections. */
.light-section {
  position: relative;
  isolation: isolate;
  background-color: #f3ebdd;
  background-image:
    radial-gradient(ellipse at 8% 3%, rgba(216,189,136,.13), transparent 44%),
    radial-gradient(ellipse at 95% 94%, rgba(192,164,106,.11), transparent 45%),
    linear-gradient(120deg, rgba(255,253,247,.68), rgba(243,235,221,.75));
}
.light-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/assets/geometry.svg") center / 112px repeat;
  opacity: .048;
  z-index: 0;
}
.light-section::after {
  content: "";
  position: absolute;
  inset: 15px;
  pointer-events: none;
  background-image: url("/assets/ornament.svg"), url("/assets/ornament.svg"), url("/assets/ornament.svg"), url("/assets/ornament.svg");
  background-position: top left, top right, bottom left, bottom right;
  background-size: 66px 66px;
  background-repeat: no-repeat;
  opacity: .32;
  z-index: 0;
}
.light-section > .container { position: relative; z-index: 1; }
.light-section h2 { text-shadow: 0 1px 0 rgba(255,255,255,.45); }

/* Motifs framing the main headings, never competing with the words. */
.story-inner::before,
.detail-intro::before,
.faq-layout > div:first-child::before {
  content: "";
  display: block;
  width: 68px;
  height: 15px;
  margin: 0 auto 24px;
  background: url("/assets/ornament.svg") center / 24px no-repeat;
  border-block: 1px solid rgba(201,164,92,.12);
  opacity: .7;
}
.detail-intro::before { opacity: .85; border-color: rgba(217,191,130,.16); }
.faq-layout > div:first-child::before { margin-inline: 0; }

/* Story: delicately raised miniature feature cards. */
.feature-grid { gap: 13px; }
.feature-grid article,
.feature-grid article:first-child,
.feature-grid article:last-child {
  position: relative;
  padding: 20px 18px;
  border: 1px solid rgba(157,128,79,.18);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(255,255,255,.52), rgba(255,250,238,.18));
  box-shadow: var(--finish-light-shadow), inset 0 1px 0 rgba(255,255,255,.58);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-grid article::after {
  content: "";
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(174,138,72,.43);
  border-inline-start: 1px solid rgba(174,138,72,.43);
  border-start-start-radius: 2px;
  pointer-events: none;
}
.feature-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(171,136,73,.36);
  box-shadow: 0 18px 40px rgba(57,43,21,.10);
}
.feature-number { color: #94703d; }

/* Photo gallery: a display-case frame with subtle inner engraving. */
.gallery {
  position: relative;
  border: 1px solid rgba(217,191,130,.57);
  border-radius: 7px;
  box-shadow: 0 22px 50px rgba(0,17,13,.32), 0 0 0 5px rgba(217,191,130,.045);
}
.gallery-stage::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,247,222,.48);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(39,43,26,.06);
  pointer-events: none;
}
.gallery-tabs { background: linear-gradient(180deg, #f1e8d7, #e8ddca); }
.gallery-tabs button { border-radius: 4px; transition: background .2s, color .2s, box-shadow .2s; }
.gallery-tabs button[aria-selected="true"] {
  background: linear-gradient(135deg, #104237, #092a25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 9px rgba(4,37,28,.12);
}
.gallery-tabs button:not([aria-selected="true"]):hover { background: rgba(255,255,255,.48); }
.gallery-index { padding: 3px 6px; background: rgba(245,235,215,.45); border-radius: 2px; }
.detail-copy .spec-list > div { transition: background .2s; }
.detail-copy .spec-list > div:hover { background: rgba(217,191,130,.045); }
.dimensions {
  position: relative;
  padding: 18px 17px;
  border: 1px solid rgba(217,191,130,.21);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(217,191,130,.075), rgba(217,191,130,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.dimensions > svg { filter: drop-shadow(0 0 10px rgba(217,191,130,.16)); }

/* NFC experience: each step feels carefully inset into warm paper. */
.steps { gap: 18px; }
.steps article {
  border: 1px solid rgba(153,126,78,.18);
  border-radius: 9px;
  padding: 24px 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.12));
  box-shadow: var(--finish-light-shadow), inset 0 1px 0 rgba(255,255,255,.5);
}
.steps .step-top { border-color: rgba(157,128,79,.31); }
.steps .step-top > svg { filter: drop-shadow(0 4px 7px rgba(150,117,64,.15)); }
.experience-bottom { border-color: rgba(157,128,79,.29); }

/* Gift photography: almost imperceptible double-frame and gallery lighting. */
.gift-art {
  border-color: rgba(217,191,130,.44);
  border-radius: 5px;
  background: linear-gradient(155deg, rgba(217,191,130,.08), transparent);
  box-shadow: 0 25px 65px rgba(0,13,10,.24), inset 0 0 0 4px rgba(217,191,130,.03);
}
.gift-art::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(217,191,130,.19);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.gift-photo { box-shadow: 0 10px 26px rgba(0,15,12,.22); }
.gift-spark { filter: drop-shadow(0 0 12px rgba(217,191,130,.32)); }

/* FAQ: quiet accordion surfaces, not oversized cards. */
.faq-list { border: 0; display: grid; gap: 8px; }
.faq-list details {
  border: 1px solid rgba(157,128,79,.19);
  border-radius: 6px;
  background: var(--finish-panel);
  box-shadow: 0 4px 14px rgba(66,51,30,.035);
  transition: border-color .2s, background .2s, box-shadow .2s;
  overflow: hidden;
}
.faq-list details[open] {
  border-color: rgba(157,128,79,.37);
  background: rgba(255,251,240,.83);
  box-shadow: 0 8px 24px rgba(66,51,30,.06);
}
.faq-list summary { padding-inline: 18px; }
.faq-list details > p { padding-inline: 18px; }
.faq-list summary > span { color: #936c33; }

/* Closing scene: low-contrast starwork behind the existing rings. */
.launch-section {
  background-color: var(--deep);
  background-image:
    radial-gradient(ellipse at 50% 47%, rgba(28,94,72,.23), transparent 57%),
    radial-gradient(ellipse at 50% 85%, rgba(191,151,78,.065), transparent 52%),
    url("/assets/geometry.svg");
  background-size: auto, auto, 112px;
  background-blend-mode: normal, normal, soft-light;
}
.launch-spark { filter: drop-shadow(0 0 15px rgba(217,191,130,.24)); }
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #06241f, #051c19);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,191,130,.4), transparent);
}

/* Keep the original mobile composition and comfortable tap targets. */
@media (max-width: 1000px) {
  .feature-grid { gap: 10px; }
  .feature-grid article { padding: 18px 14px; }
  .steps { gap: 14px; }
  .steps article { padding: 20px 16px; }
}
@media (max-width: 700px) {
  .hero { background: radial-gradient(ellipse at 50% 53%, rgba(196,149,72,.075), transparent 62%); }
  .hero-art::before { inset: 8% -5% 8%; filter: blur(17px); }
  .light-section::after { inset: 8px; background-size: 34px 34px; opacity: .25; }
  .story-inner::before, .detail-intro::before { margin-bottom: 16px; }
  .faq-layout > div:first-child::before { margin-bottom: 17px; }
  .feature-grid { gap: 10px; }
  .feature-grid article,
  .feature-grid article:first-child,
  .feature-grid article:last-child,
  .feature-grid article:nth-child(odd),
  .feature-grid article:nth-child(even) {
    padding: 17px 12px 19px;
    border: 1px solid rgba(157,128,79,.19);
  }
  .feature-grid article::after { top: 7px; inset-inline-start: 7px; width: 10px; height: 10px; }
  .gallery { box-shadow: 0 14px 34px rgba(0,17,13,.2), 0 0 0 4px rgba(217,191,130,.04); }
  .dimensions { gap: 22px; padding: 14px 12px; }
  .steps article { padding: 17px 15px; }
  .step-top { border-inline-color: rgba(157,128,79,.34); }
  .faq-list summary { padding: 17px 12px; min-height: 52px; }
  .faq-list details > p { padding-inline: 12px; }
  .gift-art { box-shadow: 0 14px 36px rgba(0,13,10,.2); }
}
@media (max-width: 359px) {
  .feature-grid { gap: 7px; }
  .feature-grid article,
  .feature-grid article:first-child,
  .feature-grid article:last-child,
  .feature-grid article:nth-child(odd),
  .feature-grid article:nth-child(even) { padding: 14px 9px; }
  .dimensions { gap: 14px; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-grid article, .gallery-tabs button, .faq-list details,
  .button, .text-link, .detail-copy .spec-list > div { transition: none; }
  .feature-grid article:hover, .button:hover { transform: none; }
}