:root{--fabric:url(../assets/fabric.jpg);--wine:#0c1f15;--velvet:#1d4030;--gold:#f5f6ce;--gold2:#9aa57a;--olive:#5c6640;--plate:#fbfaf3;--ivory:#f5f6ce;--ink:#10261a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--wine);color:var(--ivory);font-family:Tajawal,Tahoma,sans-serif;font-weight:300;line-height:1.9;overflow-x:hidden}
h1,h2,h3{font-family:'Aref Ruqaa',Amiri,serif;font-weight:700;line-height:1.4}
a{color:inherit}
/* ===== hero ===== */
#hero{height:420vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;
background:radial-gradient(circle at 50% 58%,rgba(12,31,21,.15) 0%,rgba(12,31,21,.55) 70%,rgba(7,19,12,.9) 100%),var(--fabric) center/cover}
.brand{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));inset-inline:0;display:flex;justify-content:center;z-index:5}
.brand img{height:52px;width:auto}
.hero-badge{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));inset-inline-end:6vw;z-index:5;color:var(--gold);border:1px solid rgba(245,246,206,.35);border-radius:30px;padding:7px 16px;font-size:.85rem;text-decoration:none;background:rgba(12,31,21,.35);transition:background .25s,color .25s}
.hero-badge:hover,.hero-badge:focus-visible{background:var(--gold);color:var(--wine);outline:none}
@media(max-width:520px){.hero-badge{top:calc(84px + env(safe-area-inset-top,0px));inset-inline-end:auto;left:50%;translate:-50% 0;white-space:nowrap;font-size:.8rem}}
footer img{height:46px;display:block;margin:0 auto 10px}
.hint{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));inset-inline:0;text-align:center;color:var(--gold);font-size:.95rem;z-index:5;transition:opacity .4s}
.hint i{display:block;width:1px;height:34px;margin:6px auto 0;background:linear-gradient(var(--gold),transparent);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.scene{position:relative;height:min(58vh,520px);aspect-ratio:469/750;perspective:1000px}
.glow{position:absolute;left:46%;top:61%;width:220%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(245,246,206,.5),transparent 62%);opacity:0;will-change:opacity}
.scene img{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));will-change:transform,opacity}
#imOpen{opacity:0}
#imLid{clip-path:inset(0 0 34% 0);transform-origin:50% 66%}
#imBase{clip-path:inset(66% 0 0 0)}
.spark{position:absolute;width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;z-index:6;filter:drop-shadow(0 0 6px var(--gold))}
.reveal{position:absolute;inset-inline:0;bottom:calc(11% + env(safe-area-inset-bottom,0px));text-align:center;padding:0 24px;opacity:0;z-index:5;will-change:opacity,transform}
.reveal h1{font-size:clamp(2rem,6vw,3.6rem);color:var(--ivory)}
.reveal p{color:var(--gold);max-width:34ch;margin:6px auto 0}
/* ===== sections ===== */
/* مخمل مرسوم بالكود (SVG): قطعة وحدة على قد القسم، بدون تكرار، وبألوان الموقع بس */
#collections{background:#0c1f15 url(../assets/velvet.svg) center/cover no-repeat}
section.page{padding:min(14vh,120px) 6vw;position:relative}
.ivory{background:var(--ivory);color:var(--ink)}
.page h2{font-size:clamp(1.8rem,4.5vw,3rem);margin-bottom:.4em}
.lead{max-width:46ch;font-size:1.15rem}
/* thread */
.thread{position:relative}
.thread svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.story{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;position:relative}
.story .num{font-family:'Aref Ruqaa',serif;font-size:clamp(5rem,16vw,11rem);color:var(--olive);line-height:1}
.story small{display:block;font-size:1rem}
/* stone choice */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:28px}
.choice{all:unset;cursor:pointer;background:var(--wine);color:var(--ivory);border-radius:18px;padding:22px 18px;text-align:center;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 1px rgba(245,246,206,.25);transition:transform .25s,box-shadow .25s}
.choice:hover,.choice:focus-visible{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.25),0 0 0 1px var(--gold);outline:none}
.choice b{font-family:'Aref Ruqaa',serif;font-size:1.3rem;color:var(--gold)}
.choice span{font-size:.9rem;color:var(--gold2)}
.choice-note{margin-top:24px;background:var(--wine);color:var(--ivory);border-radius:18px;padding:22px;text-align:center}
.choice-note .btn{margin:14px 4px 0}
/* collections */
.pieces{display:flex;gap:28px;overflow-x:auto;padding:20px 6vw 40px;margin:0 -6vw;scroll-snap-type:x mandatory}
.piece{flex:0 0 min(300px,78vw);scroll-snap-align:center;perspective:700px}
.card{height:400px;border-radius:200px 200px 18px 18px;position:relative;display:grid;place-items:center;overflow:hidden;
background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#356b50,var(--velvet) 60%);box-shadow:inset 0 0 0 1px rgba(245,246,206,.4);transition:transform .25s;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.card svg{width:55%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));transition:transform .5s}
.card:hover svg{transform:translateY(-8px) rotate(-6deg) scale(1.08)}
/* صور القطع على "صحن عرض" فاتح: multiply بيذوّب الأبيض بلون الصحن، فخلفيات المصنع المختلفة بتتوحّد */
.card.photo{background:var(--plate);box-shadow:inset 0 0 0 1px rgba(245,246,206,.6),inset 0 -40px 60px -40px rgba(12,31,21,.18)}
.card.photo img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .7s,transform .7s}
.card.photo .main{object-fit:contain;padding:12% 6% 6%;mix-blend-mode:multiply}
.card.photo .alt{object-fit:cover;opacity:0}
.card.photo .main.staged,.gal-slide img.staged{object-fit:cover;padding:0;mix-blend-mode:normal}
/* البطاقة اللي صورتها مشهد كامل: خلفيتها غامقة بدل الصحن الكريمي، عشان ما يطلع خيط فاتح على حافة الصورة بالآيفون */
.card.photo.staged,.gal-slide.staged{background:var(--wine)}
.card.photo.staged{box-shadow:none}
@media(hover:hover){.item:hover .card.photo .alt{opacity:1}.item:hover .card.photo .main{transform:scale(1.04)}}
.gallery{position:relative;margin:18px -24px 12px}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;max-height:56vh;background:var(--plate)}
.gal-slide img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.gal-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.gal-dots i{width:6px;height:6px;border-radius:3px;background:rgba(245,246,206,.35);transition:background .3s,width .3s}
.gal-dots i.on{width:18px;background:var(--gold)}
.gal-nav{position:absolute;top:calc(50% - 28px);width:40px;height:40px;border-radius:50%;border:0;background:rgba(12,31,21,.55);color:var(--gold);font-size:1.5rem;line-height:1;cursor:pointer;display:none}
@media(hover:hover){.gal-nav{display:grid;place-items:center}}
.gal-nav.prev{inset-inline-start:12px}
.gal-nav.next{inset-inline-end:12px}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);translate:-120% 0;transition:translate .8s}
.card:hover::after{translate:120% 0}
.piece h3{font-size:1.5rem;margin-top:14px}
.piece span{color:var(--gold)}
/* moissanite comparison */
.compare{display:grid;gap:1px;background:rgba(16,38,26,.12);border-radius:14px;overflow:hidden;margin-top:28px}
.compare-row{display:grid;grid-template-columns:1fr 1.3fr 1.3fr}
.compare-row span{padding:12px 14px;font-size:.95rem;background:var(--ivory)}
@media(max-width:520px){.compare-row{grid-template-columns:.8fr 1.1fr 1.1fr}.compare-row span{padding:10px 8px;font-size:.85rem;line-height:1.6}}
.compare-row span:first-child{font-weight:500}
.compare-row.head span{background:var(--wine);color:var(--gold);font-weight:500}
/* dark gem spotlight */
.dark{background:#08150e;overflow:hidden;--x:50%;--y:50%}
.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x) var(--y),rgba(245,246,206,.28),transparent 70%);pointer-events:none}
.gems{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:32px;position:relative}
.gems div{border-top:1px solid rgba(245,246,206,.4);padding-top:14px}
.gems b{font-family:'Aref Ruqaa',serif;font-size:1.4rem;color:var(--gold);font-weight:700}
.on-touch{display:none}
@media(hover:none){.on-touch{display:inline}.on-mouse{display:none}}
/* gift */
.gift{text-align:center}
.gift .lead{margin:0 auto 28px}
.gift .btn{margin:6px 4px}
.btn{display:inline-block;padding:14px 38px;border-radius:40px;background:var(--wine);color:var(--gold);text-decoration:none;font-weight:500;box-shadow:0 0 0 1px var(--gold2);transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--wine);outline:none}
.badge{color:var(--gold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.badge:hover,.badge:focus-visible{color:var(--ivory)}
footer{padding:36px 6vw;text-align:center;color:var(--gold);font-size:.95rem}
/* static hero (zircon page) */
.hero-static{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
padding:calc(70px + env(safe-area-inset-top,0px)) 6vw calc(40px + env(safe-area-inset-bottom,0px));
background:radial-gradient(circle at 50% 42%,rgba(12,31,21,.15) 0%,rgba(12,31,21,.55) 70%,rgba(7,19,12,.9) 100%),var(--fabric) center/cover;color:var(--ivory)}
.hero-static-logo{height:52px;width:auto;margin-bottom:8px}
.hero-static h1{font-size:clamp(1.8rem,5vw,3rem);color:var(--ivory)}
/* promo card */
.promo-card{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--wine);color:var(--ivory);border-radius:18px;padding:24px 28px;max-width:720px;margin:0 auto}
.promo-card b{font-family:'Aref Ruqaa',serif;font-size:1.3rem;color:var(--gold);display:block;margin-bottom:4px}
.promo-card p{color:var(--gold2);font-size:.95rem;margin:0}
@media(max-width:700px){.story{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hint i{animation:none}.card,.card svg,.card img,.card::after{transition:none}}

.tabs{display:flex;gap:10px;overflow-x:auto;padding:22px 0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.chips button{font:inherit;color:var(--gold);background:transparent;border:1px solid rgba(245,246,206,.35);border-radius:30px;padding:7px 20px;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
.tabs button[aria-pressed=true],.chips button[aria-pressed=true]{background:var(--gold);color:var(--wine)}
.tabs button:focus-visible,.chips button:focus-visible,.item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 16px;margin-top:18px}
.item{all:unset;display:block;cursor:pointer;text-align:start;perspective:700px}
.item .card{height:230px;border-radius:120px 120px 14px 14px}
.item .card svg{width:56%}
.item h3{font-size:1.15rem;margin-top:10px;color:var(--ivory)}
.item small{color:var(--gold2);font-size:.85rem}
.sheet-bg{position:fixed;inset:0;background:rgba(3,10,6,.7);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset-inline:0;bottom:0;max-width:560px;margin:0 auto;background:var(--velvet);border-radius:26px 26px 0 0;padding:22px 24px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:21;box-shadow:0 -1px 0 rgba(245,246,206,.3);max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
.sheet.on{transform:none}
.sheet .ico{width:96px;margin:0 auto 6px;display:block}
.sheet h3{font-size:1.6rem;text-align:center}
.sheet .meta{text-align:center;color:var(--gold2);font-size:.95rem}
.sheet p.d{text-align:center;margin:8px 0 14px}
.size-cta{display:flex;align-items:center;gap:12px;max-width:380px;margin:0 auto 16px;padding:10px 14px;border-radius:16px;border:1px solid var(--gold2);background:rgba(245,246,206,.07);color:var(--gold)}
.size-cta svg{flex:0 0 30px;height:30px}
.size-cta span{display:grid;flex:1;text-align:start;line-height:1.5}
.size-cta b{font-weight:500;font-size:1rem}
.size-cta small{color:var(--gold2);font-size:.82rem}
.size-cta>a{color:var(--gold);font-size:.9rem;text-underline-offset:3px}
.size-cta:has(.size-go){padding:0;border-color:var(--gold);background:rgba(245,246,206,.12)}
.size-go{display:flex;align-items:center;gap:12px;flex:1;padding:12px 16px;color:inherit;text-decoration:none}
.size-go i{font-style:normal;font-size:1.6rem;line-height:1}
.size-cta:has(.size-go):hover{background:var(--gold)}
.size-cta:has(.size-go):hover .size-go,.size-cta:has(.size-go):hover small{color:var(--wine)}
.size-promo{margin-top:18px}
.size-promo a{color:var(--olive);text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
.msg{background:rgba(0,0,0,.28);border-radius:14px;padding:12px 14px;font-size:.95rem;white-space:pre-line;user-select:all;margin-bottom:14px}
.sheet .btn{display:block;width:100%;text-align:center;background:var(--gold);color:var(--wine);border:0;font:inherit;font-weight:500;cursor:pointer}
.sheet .btn.alt{background:transparent;color:var(--gold);box-shadow:0 0 0 1px var(--gold2);margin-top:10px}
.sheet::before{content:"";display:block;width:42px;height:4px;border-radius:2px;background:rgba(245,246,206,.35);margin:-10px auto 0}
.sheet-bar{position:sticky;top:0;height:0;z-index:3}
.sheet .x{position:absolute;top:6px;inset-inline-start:-10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(12,31,21,.78);color:var(--gold);border:1px solid rgba(245,246,206,.45);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet .x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.toast{position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top,0px));translate:-50% -30px;background:var(--gold);color:var(--wine);padding:11px 22px;border-radius:30px;opacity:0;transition:.35s;z-index:30;max-width:90vw;text-align:center;pointer-events:none}
.toast.on{opacity:1;translate:-50% 0}
footer a{color:var(--gold)}