/* ════════════════════════════════════════════════════════════
   الصفحة الرئيسية — فكرتها: لوحة الدور اللي بالكافيه + فاتورة الكاشير
   ════════════════════════════════════════════════════════════ */
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
.land{overflow-x:hidden;background:var(--paper)}

/* ── الشريط العلوي (فوق البطل الغامق) */
.nav{position:absolute;inset-inline:0;top:0;z-index:10;color:#fff}
.nav__in{display:flex;align-items:center;gap:28px;min-height:76px}
.nav .brand{color:#fff}
.nav__links{display:flex;gap:26px;margin-inline-start:auto;font-weight:500;font-size:15px}
.nav__links a,.nav__login{text-decoration:none;color:#BFD6D2}
.nav__links a:hover,.nav__login:hover{color:#fff}
.nav__login{font-weight:600;color:#fff;padding:8px 0;border-bottom:2px solid var(--signal)}
@media (max-width:720px){.nav__links{display:none}.nav__login{margin-inline-start:auto}}

/* ── البطل */
.hero{background:var(--ink);color:#fff;padding:120px 0 84px;position:relative}
.hero::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:14px;
  background:radial-gradient(circle at 10px 14px,var(--paper) 0 7px,transparent 7.5px) repeat-x;background-size:20px 14px}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero__title{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.6vw,76px);line-height:1.15;color:#fff}
.hero__sub{font-size:clamp(17px,1.5vw,19px);color:#BFD6D2;margin-top:22px;max-width:31em;line-height:1.75}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.hero__link{color:#fff;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid rgba(255,255,255,.35)}
.hero__link:hover{border-color:#fff}
.hero__note{margin-top:18px;font-size:14px;color:#8FB0AD}

/* ── لوحة الدور: أرقام متل لوحات الانتظار */
.board{background:#082429;border-radius:20px;padding:22px 22px 26px;box-shadow:inset 0 0 0 1px #1B4A51,0 30px 60px rgba(0,0,0,.25);position:relative}
.board__head{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#8FB0AD;font-size:14px;padding-bottom:14px;border-bottom:1px dashed #1E5058}
.board__clock{color:#fff;font-family:var(--display);font-size:20px;line-height:1}
.board__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:16px}
.board__label{font-size:14px;font-weight:600;color:#8FB0AD;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.board__label::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--signal)}
.board__col--ready .board__label::before{background:var(--ready)}
.board__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-height:250px;align-content:start}
.tile{position:relative;display:flex;align-items:center;justify-content:center;height:72px;border-radius:10px;background:#0F3239;
  font-family:var(--display);font-size:44px;line-height:1;color:var(--signal);overflow:hidden;padding-top:6px}
.tile::after{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:#082429}
.board__col--ready .tile{color:#7CF0B9;background:#0D3D33}
.tile.is-in{animation:flip .5s cubic-bezier(.3,.7,.3,1)}
.tile.is-out{animation:out .35s ease-in forwards}
@keyframes flip{from{transform:perspective(400px) rotateX(-90deg);opacity:.2}}
@keyframes out{to{transform:translateY(-8px);opacity:0}}

.buzz{position:absolute;inset-inline-start:-28px;bottom:-26px;display:flex;align-items:center;gap:12px;max-width:290px;padding:14px 18px;
  border-radius:14px;background:#fff;color:var(--ink);font-size:14px;line-height:1.5;box-shadow:0 18px 40px rgba(0,0,0,.28);
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.buzz.is-on{opacity:1;transform:none}
.buzz__dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--ready);box-shadow:0 0 0 5px var(--ready-soft)}

@media (max-width:920px){
  .hero{padding-top:104px}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .board__list{min-height:0}
  .buzz{inset-inline-start:12px}
}

/* ── عناوين الأقسام */
.sect-title{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.2;margin-bottom:28px}
.counter,.vs,.owner{padding-top:96px;padding-bottom:24px}

/* ── على الكاونتر */
.counter{display:grid;grid-template-columns:1fr minmax(300px,400px);gap:72px;align-items:center}
.counter__text p{color:var(--ink-2);font-size:17px;line-height:1.85;max-width:33em}
.counter__text p + p{margin-top:14px}

.bill{position:relative;background:#fff;padding:30px 28px 34px;transform:rotate(-1.6deg);box-shadow:0 20px 44px rgba(15,58,64,.14);font-size:15px}
.bill::before,.bill::after{content:"";position:absolute;inset-inline:0;height:10px;background-size:16px 10px;background-repeat:repeat-x}
.bill::before{top:-10px;background-image:radial-gradient(circle at 8px 10px,#fff 0 6px,transparent 6.5px)}
.bill::after{bottom:-10px;background-image:radial-gradient(circle at 8px 0,#fff 0 6px,transparent 6.5px)}
.bill__head{text-align:center;padding-bottom:16px;margin-bottom:14px;border-bottom:1.5px dashed #C8D3D1;display:grid;gap:2px;color:var(--muted)}
.bill__head b{font-size:30px;color:var(--ink);line-height:1.2}
.bill__lines,.bill__total{margin:0;display:grid;gap:10px}
.bill__lines div,.bill__total div{display:flex;align-items:baseline;gap:8px}
.bill__lines dt,.bill__total dt{order:1}
.bill__lines dd,.bill__total dd{order:3;margin:0;font-weight:600}
.bill__lines div::after,.bill__total div::after{content:"";order:2;flex:1;border-bottom:2px dotted #C8D3D1;transform:translateY(-4px)}
.bill__total{margin-top:16px;padding-top:16px;border-top:1.5px dashed #C8D3D1}
.bill__total dt{font-weight:600}
.bill__total dd{font-family:var(--display);font-size:34px;line-height:.8;font-weight:400;color:var(--ink)}
.bill__foot{text-align:center;margin-top:20px;color:var(--muted);font-size:13px}

@media (max-width:860px){.counter{grid-template-columns:1fr;gap:48px}.bill{max-width:400px;justify-self:center;width:100%}}

/* ── المقارنة */
.vs__table{width:100%;border-collapse:collapse;font-size:16px}
.vs__table th,.vs__table td{padding:18px 16px;text-align:right;vertical-align:top;border-bottom:1px solid var(--line)}
.vs__table thead th{font-size:15px;font-weight:600;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:12px}
.vs__table thead .vs__us{color:var(--ink);font-family:var(--display);font-weight:400;font-size:22px}
.vs__table tbody th{font-weight:600;width:22%}
.vs__table td{color:var(--muted);width:39%}
.vs__table td.vs__us{color:var(--ink);font-weight:500;background:rgba(255,197,61,.16)}
@media (max-width:680px){
  .vs__table thead{display:none}
  .vs__table,.vs__table tbody,.vs__table tr,.vs__table th,.vs__table td{display:block;width:100%}
  .vs__table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .vs__table tbody th,.vs__table td{border:0;padding:4px 0}
  .vs__table td::before{display:block;font-size:12px;font-weight:600;color:var(--muted)}
  .vs__table td:not(.vs__us)::before{content:"أجهزة النداء"}
  .vs__table td.vs__us{padding:8px 10px;margin-top:6px;border-radius:8px}
  .vs__table td.vs__us::before{content:attr(data-l)}
}

/* ── لصاحب المحل */
.owner__list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:36px 56px}
.owner__list div{border-top:3px solid var(--ink);padding-top:16px}
.owner__list dt{font-weight:700;font-size:19px;margin-bottom:6px}
.owner__list dd{margin:0;color:var(--ink-2);line-height:1.8;max-width:30em}
@media (max-width:720px){.owner__list{grid-template-columns:1fr;gap:28px}}

/* ── الدعوة */
.cta{background:var(--signal);margin-top:96px}
.cta__in{padding-top:64px;padding-bottom:64px;display:grid;justify-items:start;gap:10px}
.cta__title{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.15;color:var(--ink)}
.cta p{color:#4A3A0A;font-size:17px;margin-bottom:16px}

.foot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:36px;color:var(--muted);font-size:14px}
.foot .brand{font-size:20px;color:var(--ink)}
.foot .brand img{width:26px;height:26px}

/* ── وين بيقعد / الأسعار / الأسئلة */
.sect-lead{color:var(--ink-2);font-size:18px;line-height:1.8;max-width:42em;margin:-14px 0 32px}
.setup,.price,.faq{margin-top:96px}
.setup__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.setup__item{position:relative;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.setup__item h3{font-size:19px;font-weight:700;margin:14px 0 8px}
.setup__item p{margin:0;color:var(--ink-2);line-height:1.8}
.setup__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--signal);color:var(--signal-ink);font-family:var(--display);font-size:22px;padding-top:4px}
.price__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan{padding:26px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.plan--best{border:2px solid var(--ink);background:#FFF8E6}
.plan__name{font-size:17px;font-weight:700;color:var(--ink-2)}
.plan__amount{margin:10px 0 6px;font-size:18px;font-weight:600;color:var(--ink)}
.plan__amount .num{font-family:var(--display);font-size:56px;line-height:1;margin-inline-end:6px}
.plan__amount small{font-size:15px;color:var(--muted);font-weight:500}
.plan__note{margin:0;color:var(--ink-2)}
.price__incl{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--ink-2)}
.price__incl li::before{content:"✓";color:var(--ready-deep);font-weight:700;margin-inline-end:8px}
.faq__list{display:grid;gap:10px;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 20px}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:17px;list-style-position:inside}
.faq details p{margin:0 0 18px;color:var(--ink-2);line-height:1.9}
@media (max-width:860px){.setup__list,.price__grid{grid-template-columns:1fr}}