/* ═══════════════════════════════════════════════════════════
   BUNBASTIC BURGER — bunbastic.sa
   Direction: Dark Premium (charcoal / gold / flame)
   ═══════════════════════════════════════════════════════════ */

/* ---------- TOKENS ---------- */
:root{
  /* color */
  --ink:      #08080A;
  --ink-2:    #0F0F12;
  --ink-3:    #17171B;
  --ink-4:    #202027;
  --gold:     #F7B32B;
  --gold-hi:  #FFD36E;
  --gold-dim: #B0842A;   /* 5.2:1 على الخلفية الداكنة — يمرّ WCAG AA */
  --flame:    #D7263D;
  --bone:     #EDEAE3;
  --ash:      #948F86;
  --line:     rgba(247,179,43,.14);
  --line-2:   rgba(237,234,227,.09);

  /* type */
  --f-disp: 'Alexandria', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* spacing scale — 4px base */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;

  --r:  14px;
  --r-lg: 22px;
  --nav-h: 72px;

  --ease: cubic-bezier(.22,1,.36,1);
}

html[lang="en"]{ --f-body:'IBM Plex Sans', system-ui, sans-serif; }

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  background:var(--ink); color:var(--bone);
  font-family:var(--f-body); font-size:16px; line-height:1.75;
  font-weight:300; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:var(--ink); }

/* film grain — one shared texture over the whole page */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:var(--s3) var(--s5); font-weight:600;
}
.skip:focus{ inset-inline-start:0; }

/* ---------- LAYOUT ---------- */
.wrap{ width:min(1180px, 100% - 2.5rem); margin-inline:auto; }
.wrap--narrow{ width:min(760px, 100% - 2.5rem); }
.sec{ padding-block:var(--s10); }
.sec--tight{ padding-block:var(--s8); }

/* ---------- TYPE ---------- */
.h-display{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  line-height:1.14; letter-spacing:-.015em; margin-block:var(--s4) var(--s5);
}
html[lang="en"] .h-display{
  font-family:'Anton',var(--f-disp); font-weight:400;
  font-size:clamp(3rem, 6.6vw, 5.6rem); line-height:.94; letter-spacing:0;
}
.h-display .line{ display:block; }
.line--gold{
  background:linear-gradient(96deg,var(--gold) 0%,var(--gold-hi) 45%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.h2{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.7rem, 3.5vw, 2.7rem);
  line-height:1.32; letter-spacing:-.01em;
}
html[lang="en"] .h2{
  font-family:'Anton',var(--f-disp); font-weight:400;
  font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.08; letter-spacing:.005em;
}

.lede{ font-size:clamp(1rem,1.6vw,1.14rem); color:var(--ash); max-width:52ch; line-height:1.8; }

.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.6rem;
}
html[lang="ar"] .eyebrow span:not(.dot){ letter-spacing:0; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--flame); flex:none; box-shadow:0 0 0 4px rgba(215,38,61,.18); }

.tiny{ font-size:.82rem; color:var(--ash); }

.sechead{ margin-bottom:var(--s8); display:grid; gap:var(--s4); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--gold); color:#0A0A0C;
  font-family:var(--f-body); font-weight:600; font-size:.95rem;
  padding:.78rem 1.45rem; border-radius:100px;
  border:1px solid var(--gold);
  transition:transform .25s var(--ease), background .25s, box-shadow .25s;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn:hover{ background:var(--gold-hi); border-color:var(--gold-hi); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(247,179,43,.65); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:1rem 1.9rem; font-size:1rem; }
.btn--sm{ padding:.55rem 1.05rem; font-size:.86rem; }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--line-2); }
.btn--ghost:hover{ background:rgba(237,234,227,.06); border-color:var(--bone); box-shadow:none; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:var(--nav-h);
  transition:background .3s, backdrop-filter .3s, border-color .3s, height .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:60px; background:rgba(8,8,10,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__in{ height:100%; width:min(1180px,100% - 2.5rem); margin-inline:auto; display:flex; align-items:center; gap:var(--s5); }
.nav__links{ display:flex; gap:var(--s5); margin-inline-start:auto; font-size:.92rem; }
.nav__links a{ color:var(--ash); position:relative; transition:color .2s; }
.nav__links a::after{
  content:''; position:absolute; inset-block-end:-6px; inset-inline-start:0;
  width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__act{ display:flex; align-items:center; gap:var(--s3); margin-inline-start:auto; }
.nav__links + .nav__act{ margin-inline-start:0; }
.lang{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--ash); padding:.4rem .7rem; border:1px solid var(--line-2); border-radius:100px;
  transition:.2s;
}
.lang:hover{ color:var(--gold); border-color:var(--gold); }

/* brand wordmark — rebuilt from the app icon */
.brand__mark{
  display:inline-grid; direction:ltr; line-height:.86;
  font-family:'Anton',var(--f-disp); position:relative;
  padding-inline-end:1.1rem;
}
.brand__l1,.brand__l2{ font-size:1.3rem; letter-spacing:.01em; color:var(--gold); }
.brand__sub{
  position:absolute; left:calc(100% - .95rem); top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:.38rem; font-weight:600;
  letter-spacing:.1em; color:var(--flame);
  writing-mode:vertical-rl; text-orientation:upright; direction:ltr; line-height:1;
}
.brand{ flex:none; }
.brand__mark--foot{ padding-inline-end:1.5rem; }
.brand__mark--foot .brand__l1,.brand__mark--foot .brand__l2{ font-size:1.85rem; }
.brand__mark--foot .brand__sub{ font-size:.52rem; left:calc(100% - 1.3rem); }

.burgerbtn{ display:none; width:38px; height:38px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.burgerbtn span{ display:block; width:20px; height:2px; background:var(--bone); border-radius:2px; transition:.3s var(--ease); }
.burgerbtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burgerbtn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burgerbtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset-block-start:60px; inset-inline:0; z-index:99;
  background:rgba(8,8,10,.97); backdrop-filter:blur(20px);
  border-block-end:1px solid var(--line);
  display:grid; padding:var(--s4) 1.25rem var(--s5);
}
.drawer a{
  padding:var(--s3) 0; border-block-end:1px solid var(--line-2);
  font-family:var(--f-disp); font-weight:600; font-size:1.15rem;
}
.drawer a:last-child{ border:0; }

/* ---------- HERO ---------- */
.hero{ position:relative; padding-block:calc(var(--nav-h) + var(--s9)) var(--s9); overflow:hidden; }
.hero__glow{
  position:absolute; inset-block-start:-20%; inset-inline-end:-10%;
  width:min(900px,90vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(247,179,43,.16) 0%, rgba(247,179,43,.05) 38%, transparent 66%);
  filter:blur(20px); pointer-events:none;
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center; gap:var(--s7);
  width:min(1180px,100% - 2.5rem); margin-inline:auto; position:relative;
}
.hero__copy{ min-width:0; }
.hero__sub{ font-size:clamp(1rem,1.7vw,1.16rem); color:var(--ash); max-width:46ch; line-height:1.85; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-block-start:var(--s6); }
.hero__meta{
  display:flex; gap:var(--s6); margin-block-start:var(--s7);
  padding-block-start:var(--s5); border-block-start:1px solid var(--line-2);
}
.hero__meta li{ display:grid; gap:.1rem; }
.hero__meta b{ font-family:var(--f-disp); font-weight:900; font-size:1.7rem; color:var(--gold); line-height:1; }
.hero__meta span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); }

.scrollcue{ position:absolute; inset-block-end:var(--s5); inset-inline-start:50%; width:1px; height:46px; background:var(--line-2); overflow:hidden; }
.scrollcue span{ position:absolute; inset:0; background:var(--gold); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ═══ SIGNATURE: the stack that builds itself ═══ */
.stackwrap{ position:relative; display:grid; place-items:center; min-height:440px; }
.stack{
  position:relative; width:min(360px,78%); aspect-ratio:1/.98;
  transform:rotateX(8deg); transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}
.lay{
  position:absolute; inset-inline:0; margin-inline:auto;
  opacity:0; transform:translateY(-70px) scale(.9);
}
.is-built .lay{ opacity:1; transform:none; transition:transform .9s var(--ease), opacity .55s ease; }
.is-built .lay--top{ transition-delay:.05s }
.is-built .lay--sauce{ transition-delay:.13s }
.is-built .lay--lettuce{ transition-delay:.21s }
.is-built .lay--cheese{ transition-delay:.29s }
.is-built .lay--patty{ transition-delay:.37s }
.is-built .lay--cheese2{ transition-delay:.45s }
.is-built .lay--patty2{ transition-delay:.53s }
.is-built .lay--bottom{ transition-delay:.61s }

/* top bun */
.lay--top{
  inset-block-start:2%; width:88%; height:34%;
  background:
    radial-gradient(120% 130% at 50% 118%, #C9822F 0%, #B46E24 40%, #96591B 100%);
  border-radius:100% 100% 22% 22% / 118% 118% 26% 26%;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.32), inset 0 12px 22px rgba(255,214,140,.28), 0 16px 30px -14px #000;
}
.sesame{
  position:absolute; width:11px; height:7px; border-radius:50%;
  background:linear-gradient(180deg,#FFF0D0,#E4C48C); transform:rotate(var(--rot,0deg));
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}
.s1{ inset-block-start:34%; inset-inline-start:24%; --rot:-18deg }
.s2{ inset-block-start:24%; inset-inline-start:46%; --rot:8deg }
.s3{ inset-block-start:40%; inset-inline-start:64%; --rot:22deg }
.s4{ inset-block-start:56%; inset-inline-start:36%; --rot:-6deg }
.s5{ inset-block-start:58%; inset-inline-start:58%; --rot:14deg }

/* sauce */
.lay--sauce{
  inset-block-start:34.5%; width:84%; height:4.5%;
  background:linear-gradient(180deg,#F0C24A,#D99A22);
  border-radius:50%/40%;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
/* lettuce */
.lay--lettuce{
  inset-block-start:37%; width:97%; height:7%;
  display:flex; align-items:center; justify-content:center;
}
.lay--lettuce span{
  flex:1; height:100%;
  background:linear-gradient(180deg,#7DBB3A,#4E8A22);
  border-radius:60% 60% 45% 45%/120% 120% 40% 40%;
  margin-inline:-4px;
}
.lay--lettuce span:nth-child(even){ height:82%; background:linear-gradient(180deg,#8ECB47,#5A9B29); }

/* cheese */
.lay--cheese,.lay--cheese2{ width:92%; height:4.5%; }
.lay--cheese{ inset-block-start:43.5% }
.lay--cheese2{ inset-block-start:55% }
.lay--cheese,.lay--cheese2{
  background:linear-gradient(180deg,#FFC63D,#F0A21C);
  border-radius:6px 6px 3px 3px;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.lay--cheese b,.lay--cheese2 b{
  position:absolute; inset-block-start:88%; width:16%; height:130%;
  background:linear-gradient(180deg,#FFC63D,#EE9E17);
  border-radius:0 0 60% 60%;
}
.lay--cheese b:nth-child(1),.lay--cheese2 b:nth-child(1){ inset-inline-start:8% }
.lay--cheese b:nth-child(2),.lay--cheese2 b:nth-child(2){ inset-inline-start:42%; height:170% }
.lay--cheese b:nth-child(3),.lay--cheese2 b:nth-child(3){ inset-inline-start:74%; height:105% }

/* patties */
.lay--patty,.lay--patty2{
  width:90%; height:9%;
  background:linear-gradient(180deg,#5B3620 0%,#3E2213 55%,#2A1509 100%);
  border-radius:16px;
  box-shadow:inset 0 3px 5px rgba(255,160,90,.2), 0 6px 14px rgba(0,0,0,.45);
}
.lay--patty{ inset-block-start:47% }
.lay--patty2{ inset-block-start:58.5% }
.lay--patty::after,.lay--patty2::after{
  content:''; position:absolute; inset:0; border-radius:16px; opacity:.5;
  background:
    radial-gradient(6px 3px at 18% 40%, rgba(255,190,120,.5), transparent 70%),
    radial-gradient(7px 3px at 52% 65%, rgba(255,190,120,.4), transparent 70%),
    radial-gradient(5px 3px at 78% 35%, rgba(255,190,120,.45), transparent 70%);
}
/* bottom bun */
.lay--bottom{
  inset-block-start:66.5%; width:86%; height:15%;
  background:linear-gradient(180deg,#B4701F 0%,#8C5316 100%);
  border-radius:16% 16% 46% 46%/12% 12% 100% 100%;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.3), 0 20px 34px -16px #000;
}
.stack__plate{
  position:absolute; inset-block-end:-2%; inset-inline:0; margin-inline:auto;
  width:105%; height:14%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(247,179,43,.20), transparent 72%);
  filter:blur(10px);
}

/* mono ingredient tags */
.tags{ position:absolute; inset:0; pointer-events:none; }
.tag{ position:absolute; opacity:0; transform:translateY(8px); }
.is-built .tag{ opacity:1; transform:none; transition:opacity .5s ease .9s, transform .6s var(--ease) .9s; }
.tag em{
  font-family:var(--f-mono); font-style:normal; font-size:.66rem;
  letter-spacing:.1em; color:var(--gold); white-space:nowrap;
  background:rgba(8,8,10,.7); border:1px solid var(--line);
  padding:.28rem .6rem; border-radius:100px; backdrop-filter:blur(6px);
}
.tag::before{ content:''; position:absolute; inset-block-start:50%; width:34px; height:1px; background:var(--line); }
.tag--1{ inset-block-start:12%; inset-inline-end:2% } .tag--1::before{ inset-inline-start:-38px }
.tag--2{ inset-block-start:35%; inset-inline-start:0 } .tag--2::before{ inset-inline-end:-38px }
.tag--3{ inset-block-start:58%; inset-inline-end:0 }   .tag--3::before{ inset-inline-start:-38px }
.stack__plate{ inset-block-end:6%; }

.stackcap{
  display:none; gap:.45rem; flex-wrap:wrap; justify-content:center; align-items:center;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:var(--gold);
  opacity:0; transform:translateY(6px);
}
.is-built .stackcap{ opacity:1; transform:none; transition:opacity .5s ease .9s, transform .6s var(--ease) .9s; }
.stackcap i{ color:var(--gold-dim); font-style:normal; }

/* ---------- MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:.85rem;
}
.marquee__t{
  display:flex; gap:2rem; width:max-content;
  animation:slide 42s linear infinite;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); white-space:nowrap;
}
.marquee__t i{ color:var(--flame); font-style:normal; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
html[dir="rtl"] .marquee__t{ animation-name:slideRtl; }
@keyframes slideRtl{ from{transform:translateX(0)} to{transform:translateX(50%)} }

/* ---------- MENU CARDS ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.card{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color .35s, transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ border-color:var(--gold); transform:translateY(-6px); }
.card--hero{ border-color:var(--line); box-shadow:0 0 0 1px rgba(247,179,43,.08), 0 30px 60px -40px rgba(247,179,43,.5); }
.card__img{ position:relative; aspect-ratio:4/5; background:var(--ink-3); overflow:hidden; }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  --z:1; --ty:0%;
  transform:scale(var(--z)) translateY(var(--ty));
  transition:transform .7s var(--ease);
}
.card:hover .card__img img{ --z:1.06; }
/* لقطة البيكون أصلها بوستر — نزوّم على البرجر نفسه */
.card__img[data-img="bacon"] img{ --z:1.9; --ty:11%; }
.card:hover .card__img[data-img="bacon"] img{ --z:2; }
/* تدرّج يربط الصورة بالكرت ويحمي وضوح النص */
.card__img::after{
  content:''; position:absolute; inset:auto 0 0; height:38%;
  background:linear-gradient(to top, var(--ink-2), transparent);
  pointer-events:none;
}
/* placeholder shown when the real photo isn't dropped in yet */
.card__ph{
  position:absolute; inset:0; display:none; place-items:center;
  font-family:'Anton',var(--f-disp); font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.06em; color:rgba(247,179,43,.16);
  background:
    radial-gradient(80% 90% at 50% 20%, rgba(247,179,43,.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(237,234,227,.025) 0 12px, transparent 12px 24px);
}
.card__img.is-empty .card__ph{ display:grid; }
.card__body{ padding:var(--s5); display:grid; gap:var(--s3); flex:1; align-content:start; }
.card__no{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--gold-dim);
  display:flex; align-items:center; gap:.6rem;
}
.chip{
  font-family:var(--f-body); font-size:.66rem; letter-spacing:0; font-weight:500;
  background:var(--flame); color:#fff; padding:.14rem .5rem; border-radius:100px;
}
.card h3{ font-family:var(--f-disp); font-weight:800; font-size:1.4rem; line-height:1.25; }
.card p:not(.card__no){ font-size:.94rem; color:var(--ash); line-height:1.75; }
.price{ font-family:var(--f-mono); color:var(--gold); font-size:1rem; }
.price:empty{ display:none; }

.sides{
  margin-block-start:var(--s7); padding-block-start:var(--s6);
  border-block-start:1px solid var(--line-2);
  display:grid; grid-template-columns:1fr .8fr; gap:var(--s6); align-items:center;
}
.sides__img{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2); }
.sides__img img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.sides__t{ font-family:var(--f-disp); font-weight:800; font-size:1.15rem; color:var(--ash); margin-block-end:var(--s4); }
.sides__l{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.sides__l li b{
  display:block; font-weight:500; font-size:.92rem;
  border:1px solid var(--line-2); border-radius:100px; padding:.5rem 1.1rem;
  transition:.25s;
}
.sides__l li:hover b{ border-color:var(--gold); color:var(--gold); }

/* ---------- DIFFERENTIATOR ---------- */
.fresh{
  padding-block:var(--s10); background:var(--ink-2);
  border-block:1px solid var(--line-2); position:relative; overflow:hidden;
}
/* صورة الفرع كخلفية — معتّمة بقوة عشان النص يظل واضح (AA) */
.fresh__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.2; filter:saturate(.85);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
}
.fresh::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(215,38,61,.16), transparent 62%),
    linear-gradient(to left, rgba(15,15,18,.94) 35%, rgba(15,15,18,.55));
}
.fresh__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; position:relative; }
.fresh .eyebrow{ margin-block-end:var(--s4) }
.fresh .h2{ margin-block-end:var(--s5) }
.fresh .btn{ margin-block-start:var(--s5) }
.pillars{ display:grid; gap:var(--s5); }
.pillars li{
  display:grid; gap:var(--s2);
  padding:var(--s5); border-radius:var(--r);
  background:var(--ink); border:1px solid var(--line-2);
  transition:border-color .3s;
}
.pillars li:hover{ border-color:var(--line); }
.pillars__n{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--gold); }
.pillars b{ font-family:var(--f-disp); font-weight:800; font-size:1.12rem; }
.pillars p{ font-size:.92rem; color:var(--ash); }

/* ---------- BRANCHES ---------- */
.branches{ display:grid; grid-template-columns:1fr 1fr .85fr; gap:var(--s5); }
.city{ background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:var(--s5); }
.city__n{
  font-family:var(--f-disp); font-weight:900; font-size:1.3rem;
  display:flex; justify-content:space-between; align-items:baseline;
  padding-block-end:var(--s3); border-block-end:1px solid var(--line-2); margin-block-end:var(--s3);
}
.city__n em{ font-family:var(--f-mono); font-style:normal; font-size:.75rem; color:var(--gold-dim); letter-spacing:.16em; }
.city li{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding-block:.6rem; border-block-end:1px dashed var(--line-2);
}
.city li:last-child{ border:0; }
.city li b{ font-weight:500; font-size:.98rem; }
.city li a{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--ash); border-bottom:1px solid transparent; transition:.2s; flex:none;
}
.city li a:hover{ color:var(--gold); border-color:var(--gold); }

.hours{
  background:linear-gradient(160deg, rgba(247,179,43,.1), rgba(247,179,43,0) 60%), var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5);
  display:grid; align-content:center; gap:var(--s2); text-align:center;
}
.hours__lab{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.hours__v{ font-family:'Anton',var(--f-disp); font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:.01em; }
.hours__d{ font-size:.88rem; color:var(--ash); }
.hours__live{
  margin-block-start:var(--s3); padding-block-start:var(--s3); border-block-start:1px solid var(--line-2);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.hours__pulse{ width:8px; height:8px; border-radius:50%; background:var(--ash); flex:none; }
.hours__live.is-open .hours__pulse{ background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2s infinite; }
.hours__live.is-open{ color:#4ADE80; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0) } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) } }

/* ---------- APP ---------- */
.app{ padding-block:var(--s10); background:var(--ink); position:relative; overflow:hidden; }
.app__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s8); align-items:center; }
.app .eyebrow{ margin-block-end:var(--s4) }
.app .h2{ margin-block-end:var(--s5) }
.stores{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-block:var(--s6) var(--s4); }
.store{
  display:flex; align-items:center; gap:.7rem;
  background:var(--ink-3); border:1px solid var(--line-2); border-radius:12px;
  padding:.65rem 1.15rem; transition:.28s var(--ease);
}
.store:hover{ border-color:var(--gold); transform:translateY(-2px); background:var(--ink-4); }
.store span{ display:grid; line-height:1.2; }
.store em{ font-style:normal; font-size:.66rem; color:var(--ash); font-family:var(--f-mono); letter-spacing:.06em; white-space:nowrap; }
.store b{ font-family:var(--f-disp); font-weight:600; font-size:1rem; white-space:nowrap; }

/* phone mock */
.phone{ display:grid; place-items:center; }
.phone__body{
  width:min(270px,80%); aspect-ratio:9/18.5; border-radius:38px;
  background:linear-gradient(160deg,#26262C,#0D0D10);
  padding:9px; box-shadow:0 50px 90px -50px #000, inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative; transform:rotate(-4deg);
  transition:transform .6s var(--ease);
}
.phone:hover .phone__body{ transform:rotate(0deg) translateY(-6px); }
.phone__notch{
  position:absolute; inset-block-start:16px; inset-inline:0; margin-inline:auto;
  width:78px; height:20px; border-radius:100px; background:#050506; z-index:2;
}
.phone__scr{
  width:100%; height:100%; border-radius:30px; background:var(--ink);
  padding:44px 14px 14px; display:grid; gap:10px; align-content:start; overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.ph-brand{ display:grid; justify-items:center; line-height:.85; margin-block-end:8px; position:relative; }
.ph-brand b{ font-family:'Anton',var(--f-disp); font-size:1.05rem; color:var(--gold); }
.ph-brand i{ font-family:var(--f-mono); font-style:normal; font-size:.4rem; letter-spacing:.3em; color:var(--flame); margin-block-start:3px; }
.ph-row{ display:flex; gap:8px; align-items:center; background:var(--ink-2); border-radius:10px; padding:7px; }
.ph-th{ width:38px; height:38px; border-radius:8px; flex:none; background:linear-gradient(140deg,#8C5316,#3E2213); }
.ph-th--2{ background:linear-gradient(140deg,#B4701F,#5B3620); }
.ph-th--3{ background:linear-gradient(140deg,#F0A21C,#96591B); }
.ph-lines{ display:grid; gap:5px; flex:1; }
.ph-lines i{ height:5px; border-radius:3px; background:rgba(237,234,227,.16); display:block; }
.ph-lines i:last-child{ width:55%; background:rgba(247,179,43,.3); }
.ph-btn{
  margin-block-start:6px; background:var(--gold); color:var(--ink);
  border-radius:100px; text-align:center; padding:8px; font-size:.72rem; font-weight:600;
}

/* ---------- TRIO ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.trio__c{
  display:grid; gap:var(--s2); align-content:start;
  padding:var(--s5); border-radius:var(--r); border:1px solid var(--line-2);
  background:var(--ink-2); transition:.3s var(--ease);
}
.trio__c:hover{ border-color:var(--gold); background:var(--ink-3); transform:translateY(-4px); }
.trio__k{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--gold-dim); }
.trio__c b{ font-family:var(--f-disp); font-weight:800; font-size:1.1rem; }
.trio__c p{ font-size:.9rem; color:var(--ash); }
.trio__c em{ font-family:var(--f-mono); font-style:normal; font-size:.72rem; color:var(--gold); letter-spacing:.06em; margin-block-start:var(--s2); }

/* ---------- FAQ ---------- */
.faq details{ border-block-end:1px solid var(--line-2); }
.faq summary{
  cursor:pointer; list-style:none; padding-block:var(--s5);
  font-family:var(--f-disp); font-weight:600; font-size:1.06rem;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold); }
.faq summary::after{
  content:'+'; font-family:var(--f-mono); font-size:1.3rem; color:var(--gold);
  transition:transform .3s var(--ease); flex:none;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ color:var(--ash); font-size:.95rem; padding-block-end:var(--s5); max-width:60ch; }

/* ---------- FINAL ---------- */
.final{
  padding-block:var(--s10);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(247,179,43,.14), transparent 62%),
    var(--ink-2);
  border-block-start:1px solid var(--line);
  text-align:center;
}
.final__in{ display:grid; justify-items:center; gap:var(--s4); }
.final__h{
  font-family:'Anton',var(--f-disp); font-weight:400;
  font-size:clamp(3.4rem,12vw,8rem); line-height:.92; letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--bone) 20%, rgba(237,234,227,.25));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-block-end:.06em;
}
html[lang="ar"] .final__h{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(3rem,10vw,6.4rem); line-height:1.2;
}
.final .hero__cta{ justify-content:center; }

/* ---------- FOOTER ---------- */
.foot{ background:var(--ink); border-block-start:1px solid var(--line-2); padding-block:var(--s7) var(--s5); }
.foot__in{ display:flex; flex-wrap:wrap; gap:var(--s6); justify-content:space-between; align-items:center; }
.foot__in .tiny{ margin-block-start:var(--s3); }
.foot__nav{ display:flex; gap:var(--s4); font-size:.9rem; color:var(--ash); flex-wrap:wrap; }
.foot__nav a:hover{ color:var(--gold); }
.foot__soc{ display:flex; gap:var(--s3); }
.foot__soc a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ash); transition:.25s;
}
.foot__soc a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.foot__c{
  margin-block-start:var(--s6); padding-block-start:var(--s4);
  border-block-start:1px solid var(--line-2); text-align:center;
  width:min(1180px,100% - 2.5rem); margin-inline:auto;
}

/* ---------- APP MODAL ---------- */
.modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:1.25rem;
}
.modal__bg{
  position:absolute; inset:0; background:rgba(4,4,6,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .35s ease;
}
.modal.is-on .modal__bg{ opacity:1; }

.modal__card{
  position:relative; width:min(430px,100%);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(247,179,43,.16), transparent 62%),
    var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s7) var(--s5) var(--s5);
  display:grid; justify-items:center; gap:var(--s3); text-align:center;
  box-shadow:0 40px 90px -40px #000, 0 0 0 1px rgba(247,179,43,.06);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .4s ease, transform .5s var(--ease);
}
.modal.is-on .modal__card{ opacity:1; transform:none; }

.modal__x{
  position:absolute; inset-block-start:.85rem; inset-inline-end:.85rem;
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--ash); border:1px solid var(--line-2); transition:.2s;
}
.modal__x:hover{ color:var(--bone); border-color:var(--bone); }

.brand__mark--modal{ padding-inline-end:1.3rem; margin-block-end:var(--s2); }
.brand__mark--modal .brand__l1,.brand__mark--modal .brand__l2{ font-size:1.6rem; }
.brand__mark--modal .brand__sub{ font-size:.46rem; left:calc(100% - 1.15rem); }

.modal__t{ font-family:var(--f-disp); font-weight:900; font-size:1.5rem; line-height:1.35; }
html[lang="en"] .modal__t{ font-family:'Anton',var(--f-disp); font-weight:400; line-height:1.1; font-size:1.8rem; }
.modal__d{ font-size:.94rem; color:var(--ash); max-width:34ch; }

.modal__stores{ margin-block:var(--s4) var(--s2); justify-content:center; }
.modal__stores .store{ background:var(--ink-3); }
/* أبرز متجر جهاز الزائر */
.modal.is-ios .store--ios,.modal.is-android .store--and{ order:-1; border-color:var(--gold); }
.modal.is-ios .store--and,.modal.is-android .store--ios{ opacity:.7; }

.modal__skip{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  color:var(--ash); padding:.4rem .6rem; border-bottom:1px solid transparent; transition:.2s;
}
.modal__skip:hover{ color:var(--gold); border-color:var(--gold); }

body.is-locked{ overflow:hidden; }

@media (max-width:420px){
  .modal__card{ padding:var(--s6) var(--s4) var(--s4); }
  .modal__stores{ width:100%; gap:.5rem; }
  .modal__stores .store{ flex:1; justify-content:center; padding:.6rem .5rem; gap:.45rem; }
  .modal__stores .store svg{ width:20px; height:20px; }
  .modal__stores .store b{ font-size:.85rem; }
  .modal__stores .store em{ font-size:.58rem; }
}

/* ---------- MOBILE DOCK ---------- */
.dock{
  position:fixed; inset-block-end:0; inset-inline:0; z-index:98;
  display:none; gap:.6rem; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(8,8,10,.92); backdrop-filter:blur(16px);
  border-block-start:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.dock.is-on{ transform:none; }
.dock .btn{ flex:1; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .8s var(--ease); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .hero__in{ grid-template-columns:1fr; gap:var(--s8); }
  .stackwrap{ order:-1; min-height:340px; }
  .stack{ width:min(300px,68%); }
  .fresh__grid,.app__in{ grid-template-columns:1fr; gap:var(--s7); }
  .branches{ grid-template-columns:1fr 1fr; }
  .hours{ grid-column:1/-1; }
  /* الكرت المميز يصير بانر عرضي بالأعلى — يملأ الشبكة بدون خانة فاضية */
  .cards{ grid-template-columns:1fr 1fr; }
  .card--hero{
    grid-column:1/-1; order:-1;
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
  }
  .card--hero .card__img{ aspect-ratio:1/1; }
  .card--hero .card__img::after{ display:none; }
  .card--hero .card__body{ align-content:center; }
  .sides{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .phone{ display:none; }
}
@media (max-width:720px){
  :root{ --s10:5rem; --s9:3.5rem; --s8:2.75rem; --nav-h:60px; }
  .hero{ padding-block:calc(var(--nav-h) + var(--s5)) var(--s7); }
  .hero__in{ gap:var(--s5); }
  .hero__cta .btn{ flex:1; min-width:0; }
  .nav__links{ display:none; }
  .burgerbtn{ display:flex; }
  .nav{ height:60px; background:rgba(8,8,10,.86); backdrop-filter:blur(18px); border-bottom-color:var(--line); }
  .nav .btn--sm{ display:none; }
  .dock{ display:flex; }
  .cards{ grid-template-columns:1fr; }
  .card--hero{ grid-template-columns:1fr; order:0; }
  .card--hero .card__img{ aspect-ratio:4/5; }
  .card--hero .card__img::after{ display:block; }
  .card--hero .card__body{ align-content:start; }
  .branches{ grid-template-columns:1fr; }
  .hero__meta{ gap:var(--s5); }
  .scrollcue{ display:none; }
  .stackwrap{ min-height:0; gap:var(--s4); }
  .stack{ width:min(250px,68%); }
  .tags{ display:none; }
  .stackcap{ display:flex; }
  .foot__in{ flex-direction:column; align-items:flex-start; }
  body{ padding-block-end:78px; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .lay,.tag,.stackcap{ opacity:1; transform:none; }
  .modal__bg,.modal__card{ opacity:1; transform:none; }
  .marquee__t{ animation:none; }
  .dock{ transform:none; }
}