/* NOIR GLOW — dark premium system. Self-hosted Tajawal (OFL, see fonts/). */
@font-face{font-family:"Tajawal";src:url("fonts/tajawal-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/tajawal-700.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/tajawal-800.woff") format("woff");font-weight:800;font-display:swap}
:root{
  --bg:#16120d; --bg2:#1e1811; --panel:#221b12; --card:#241c12;
  --cream:#f7f0e1; --cream-dim:#cfc2a8; --muted:#9d9077;
  --ember:#ef7d2e; --ember-deep:#c85a17; --amber:#e9b44c;
  --green:#7fb069; --line:rgba(247,240,225,.14);
  --ok:#7fb069; --err:#ff8f7a;
  --r:22px; --max:1140px;
  --font:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--cream);line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
.skip{position:absolute;right:12px;top:-60px;background:var(--ember);color:#fff;padding:10px 18px;border-radius:10px;z-index:200;transition:top .2s;text-decoration:none}
.skip:focus{top:12px;color:#fff}
/* ticker */
.ticker{background:linear-gradient(90deg,#2a1608,#3d1e0a,#2a1608);border-bottom:1px solid rgba(239,125,46,.35);overflow:hidden;white-space:nowrap;padding:9px 0;font-size:13.5px;font-weight:700;color:var(--amber)}
.ticker .track{display:inline-block;animation:tick 26s linear infinite}
.ticker span{margin:0 26px}
@keyframes tick{to{transform:translateX(50%)}}
[dir="rtl"] .ticker .track{animation-name:tickR}
@keyframes tickR{to{transform:translateX(-50%)}}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:800;border-radius:16px;padding:15px 30px;font-size:17px;min-height:56px;transition:transform .15s;overflow:hidden}
.btn-ember{background:linear-gradient(135deg,var(--ember),var(--ember-deep));color:#fff;box-shadow:0 12px 34px -10px rgba(239,125,46,.65)}
.btn-ember:hover{transform:translateY(-2px)}
.btn-ember::after{content:"";position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-180px) skewX(-15deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(-180px) skewX(-15deg)}90%,100%{transform:translateX(320px) skewX(-15deg)}}
/* hero */
.hero{position:relative;padding:44px 0 60px;overflow:hidden;background:radial-gradient(900px 500px at 80% 10%,rgba(239,125,46,.16),transparent 60%),var(--bg)}
.hero-grid{display:grid;gap:30px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}.hero{padding:70px 0 90px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--amber);border:1px solid rgba(233,180,76,.4);border-radius:999px;padding:6px 16px;margin:0 0 16px;background:rgba(233,180,76,.08)}
.eyebrow .dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--ember);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
h1{font-size:clamp(32px,8vw,62px);line-height:1.5;font-weight:800;margin:0 0 14px}
h1 .glow{background:linear-gradient(120deg,var(--amber),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,4.2vw,19px);color:var(--cream-dim);margin:0 0 16px;max-width:33em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.tags li{font-size:13px;font-weight:700;background:rgba(247,240,225,.08);border:1px solid var(--line);border-radius:999px;padding:5px 15px;color:var(--cream)}
.hero-price{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.hero-price .now{font-size:38px;font-weight:800;color:#fff}
.hero-price .old{color:var(--muted);text-decoration:line-through;font-size:18px}
.hero-price .save{font-size:13px;font-weight:800;color:#1d1508;background:var(--amber);border-radius:999px;padding:4px 14px}
.micro{font-size:14px;color:var(--muted);margin:0 0 18px}
.hero-cta{display:flex;flex-direction:column;gap:10px;max-width:400px}
.hero-cta .btn{width:100%}
.cod-note{text-align:center;font-size:13px;color:var(--muted);margin:0}
.hero-photo{position:relative;display:grid;justify-items:center}
.halo{position:absolute;inset:8% -6%;background:radial-gradient(closest-side,rgba(239,125,46,.4),transparent 70%);filter:blur(10px);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.65;transform:scale(1.06)}}
.float{animation:floaty 5.5s ease-in-out infinite;position:relative;z-index:1}
@keyframes floaty{50%{transform:translateY(-14px)}}
.hero-photo .arch{inline-size:min(78vw,340px);border-radius:170px 170px var(--r) var(--r);overflow:hidden;border:1px solid rgba(233,180,76,.35);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);aspect-ratio:4/5;background:var(--bg2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-badge{position:relative;z-index:2;margin-top:-26px;background:rgba(30,24,17,.92);border:1px solid rgba(233,180,76,.35);border-radius:16px;padding:10px 20px;font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center;backdrop-filter:blur(6px)}
.hero-badge b{color:var(--amber);font-size:18px}
/* trust strip */
.trust{border-block:1px solid var(--line);background:var(--bg2)}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-block:20px}
@media(min-width:820px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust div{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;color:var(--cream-dim)}
.trust svg{flex:none}
/* sections */
section.block{padding:56px 0}
.sec-head{max-width:640px;margin-bottom:30px}
.sec-eyebrow{font-size:13px;font-weight:800;color:var(--ember);margin:0 0 8px;letter-spacing:.3px}
h2{font-size:clamp(24px,5.8vw,36px);line-height:1.6;margin:0 0 8px;font-weight:800}
.sec-sub{color:var(--muted);margin:0;font-size:16px}
/* concerns */
.concern-grid{display:grid;gap:14px}
@media(min-width:760px){.concern-grid{grid-template-columns:1fr 1fr}}
.concern{background:linear-gradient(160deg,var(--panel),#191309);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,border-color .2s}
.concern:hover{transform:translateY(-4px);border-color:rgba(239,125,46,.5)}
.concern .n{font-size:13px;font-weight:800;color:var(--ember)}
.concern h3{margin:4px 0;font-size:17px}
.concern p{margin:0;font-size:14.5px;color:var(--cream-dim)}
.concern strong{color:var(--amber)}
/* formula */
.formula-grid{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.formula-grid{grid-template-columns:1fr 1fr}}
.formula-photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1}
.formula-photo img{width:100%;height:100%;object-fit:cover}
.ing{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:12px}
.ing .bar{height:8px;border-radius:99px;background:rgba(247,240,225,.1);margin:12px 0 4px;overflow:hidden}
.ing .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--ember));transition:width 1.2s ease}
.ing .top{display:flex;align-items:center;gap:10px}
.ing .pct{font-size:13px;font-weight:800;color:#1d1508;background:var(--amber);border-radius:999px;padding:3px 14px}
.ing b{font-size:17px}
.ing p{margin:6px 0 0;font-size:14.5px;color:var(--cream-dim)}
.patch{font-size:13.5px;color:var(--muted);margin-top:14px}
/* ritual timeline */
.ritual{background:var(--bg2);border-block:1px solid var(--line)}
.ritual-grid{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.ritual-grid{grid-template-columns:1fr .9fr}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;right:21px;top:46px;bottom:0;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step .dot{inline-size:44px;block-size:44px;border-radius:50%;background:var(--panel);border:1px solid rgba(239,125,46,.5);display:grid;place-items:center;font-weight:800;color:var(--amber);font-size:17px;z-index:1}
.step h3{margin:2px 0;font-size:16.5px}
.step p{margin:0;font-size:14.5px;color:var(--cream-dim)}
.ritual-photo{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;max-height:560px}
.ritual-photo img{width:100%;height:100%;object-fit:cover}
.vary-note{margin-top:18px;font-size:14px;color:var(--muted)}
/* provenance */
.prov-grid{display:grid;gap:28px;align-items:center}
@media(min-width:960px){.prov-grid{grid-template-columns:.95fr 1.05fr}}
.prov-photo{border-radius:var(--r);overflow:hidden;border:1px solid rgba(200,60,50,.4);box-shadow:0 30px 70px -30px rgba(200,60,50,.35)}
.prov-photo img{width:100%;height:auto}
.check-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;background:rgba(247,240,225,.05);border:1px solid var(--line);border-radius:14px;padding:12px 16px;color:var(--cream-dim)}
.check-list svg{flex:none;margin-top:6px}
.check-list strong{color:var(--cream)}
.importer{border-inline-start:4px solid var(--ember);background:rgba(239,125,46,.12);border-radius:12px;padding:14px 20px;font-weight:800;font-size:17px;margin:4px 0 20px;color:var(--amber)}
/* faq */
.faq{max-width:760px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;padding:16px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;font-size:22px;color:var(--ember);font-weight:800;transition:transform .2s}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px;font-size:15px;color:var(--cream-dim);margin:0}
/* order */
.order-sec{position:relative}
.order-card{background:linear-gradient(165deg,#2b2114,#1c150c);border:1px solid rgba(233,180,76,.35);border-radius:28px;padding:26px 20px;box-shadow:0 40px 90px -40px rgba(239,125,46,.4)}
@media(min-width:960px){.order-card{padding:40px}.order-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}}
.field{margin-bottom:16px}
label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
label .hint{font-weight:500;color:var(--muted);font-size:13px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:#f4ecdb;background:#120e08;border:2px solid #3a2f1e;border-radius:14px;padding:13px 15px;min-height:54px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(239,125,46,.2)}
input[dir="ltr"]{text-align:left}
select option{color:#111}
.err-msg{display:none;font-size:13.5px;color:var(--err);font-weight:700;margin:5px 0 0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err)}
.field.invalid .err-msg{display:block}
.qty-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qty-ctrl{display:flex;align-items:center;border:2px solid #3a2f1e;border-radius:999px;overflow:hidden;background:#120e08}
.qty-ctrl button{inline-size:54px;block-size:54px;border:0;background:#2c2313;color:var(--amber);font-size:24px;font-weight:800;cursor:pointer}
.qty-ctrl output{min-inline-size:54px;text-align:center;font-size:19px;font-weight:800}
.summary{background:rgba(0,0,0,.3);border:1px dashed #6b5a35;border-radius:16px;padding:18px;margin:18px 0;font-size:15.5px}
.summary .row{display:flex;justify-content:space-between;padding-block:5px;gap:10px}
.summary .total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;font-size:19px;color:#fff}
.summary .free{color:var(--ok);font-weight:800}
.status{border-radius:12px;padding:12px 16px;font-weight:700;font-size:15px;margin-bottom:14px;display:none}
.status.show{display:block}
.status.error{background:#3d1712;color:#ffb4a2;border:1px solid #7a2d20}
.status.busy{background:#3a2c10;color:var(--amber);border:1px solid #6b5a35}
.submit-btn{width:100%;font-size:18px}
.secure-note{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 0}
.mini-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.mini-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--cream-dim)}
.mini-list svg{flex:none;margin-top:6px}
/* popup */
.popup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,8,5,.7);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.popup.show{opacity:1}
.popup[hidden]{display:none}
.popup-card{inline-size:min(420px,100%);background:linear-gradient(170deg,#2d2313,#191208);border:1px solid rgba(233,180,76,.45);border-radius:24px;padding:28px 24px;text-align:center;transform:translateY(26px) scale(.96);transition:transform .3s cubic-bezier(.2,1.4,.4,1);box-shadow:0 40px 90px -20px rgba(0,0,0,.9);position:relative}
.popup.show .popup-card{transform:none}
.popup-card img{inline-size:120px;margin:-70px auto 6px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.popup-card h3{margin:6px 0;font-size:22px}
.popup-card p{margin:0 0 6px;color:var(--cream-dim);font-size:14.5px}
.popup-card .p-price{font-size:26px;font-weight:800;color:#fff}
.popup-card .p-price s{font-size:15px;color:var(--muted);margin-inline-start:8px}
.popup-x{position:absolute;top:12px;left:12px;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:18px;cursor:pointer}
/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 130px;font-size:13.5px;color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
footer a{color:var(--muted)}
/* sticky */
.sticky-bar{position:fixed;inset-inline:0;bottom:0;z-index:60;background:rgba(22,18,13,.96);border-top:1px solid rgba(233,180,76,.3);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px)}
.sticky-bar .p{flex:1}.sticky-bar .p b{font-size:20px;color:#fff}.sticky-bar .p s{font-size:13px;color:var(--muted);margin-inline-start:6px}
.sticky-bar .p small{display:block;font-size:12px;color:var(--amber);font-weight:700}
.sticky-bar .btn{flex:1.2;padding:12px;font-size:16px;min-height:50px}
.sticky-bar.hidden{display:none}
@media(min-width:960px){.sticky-bar{display:none}}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.32s}
.policy-page{max-width:720px;padding:40px 20px 80px;color:var(--cream-dim)}
.policy-page a{color:var(--amber)}
.thanks-card{max-width:560px;margin:60px auto;background:var(--panel);border:1px solid rgba(233,180,76,.35);border-radius:24px;padding:36px 28px;text-align:center}
.thanks-card .ok-ic{inline-size:64px;block-size:64px;border-radius:50%;background:rgba(127,176,105,.15);display:grid;place-items:center;margin:0 auto 16px}
.ref-box{background:rgba(0,0,0,.3);border:1px dashed #6b5a35;border-radius:14px;padding:14px;margin:18px 0;font-size:16px}
.ref-box b{font-size:20px;color:var(--amber)}