/* صفحة الهبوط: زمردي داكن مع ذهبي شمباني — هادئة وموجّهة */
.landing {
  --bg: #07130f;
  --bg-2: #0a1a15;
  --card: #0f241d;
  --card-2: #12291f;
  --gold: #d6b46a;
  --gold-2: #ecd294;
  --text: #f2ede1;
  --text-2: #c7d0ca;
  --dim: #8ea39a;
  --hair: rgba(214, 180, 106, .16);
  --nav-bg: rgba(7, 19, 15, .82);
  --field: #0b1f19;
  --ph: #6f857c;
  --panel-grad: linear-gradient(180deg, #0f241d, #07130f);
  --hero-grad: radial-gradient(80% 55% at 50% 0%, #174a3c 0%, #0b261d 45%, #07130f 100%);
  --trial-bg: rgba(15, 36, 29, .7);
  --badge-bg: rgba(7, 19, 15, .8);
  --shadow: rgba(0, 0, 0, .45);
  --feat-grad: linear-gradient(180deg, #163329, #0f241d);
  --band-grad: radial-gradient(70% 100% at 50% 0%, #133b2f, #07130f);
  --cta-grad: radial-gradient(80% 120% at 50% 100%, #174a3c, #07130f);
  --wiz-grad: linear-gradient(180deg, #11281f, #0a1a15);
  --wiz-head: #11281f;
  --wiz-foot: #0a1a15;
  --shade: rgba(0, 0, 0, .2);
  --foot-bg: #050e0b;
  --disabled: rgba(199, 208, 202, .25);
  --ok: #8fe0b5;
  --bad: #f2a59b;
  --shimmer: linear-gradient(110deg, #c9a557 0%, #f6e3b0 25%, #c9a557 45%, #c9a557 100%);
  --lift: none;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --brand: #0f4c3a;
  --brand-rgb: 15, 76, 58;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  color-scheme: dark;
}
.lp-container { width: min(1120px, 100%); margin: 0 auto; padding: 0 1.25rem; }
.lp-container.narrow { width: min(760px, 100%); }
.landing section[id] { scroll-margin-top: 72px; }
.landing a { color: var(--gold-2); }

/* أزرار */
.landing .btn { border-radius: 999px; transition: transform .2s var(--ease), box-shadow .3s var(--ease), background-color .2s, filter .2s; }
.landing .btn:active { transform: scale(.97); }
.btn.gold { background: linear-gradient(135deg, #f0d89b 0%, #d6b46a 50%, #b8924a 100%); color: #1b1305; font-weight: 700; box-shadow: 0 10px 28px rgba(214, 180, 106, .2); }
.btn.gold:hover { box-shadow: 0 12px 34px rgba(214, 180, 106, .34); filter: brightness(1.04); }
.btn.line { background: transparent; color: var(--gold-2); border: 1.5px solid rgba(214, 180, 106, .5); }
.btn.line:hover { background: rgba(214, 180, 106, .08); }
.landing .btn.primary { background: linear-gradient(135deg, #f0d89b, #c9a557); color: #1b1305; }
.landing .btn.ghost { background: transparent; color: var(--gold-2); border-color: rgba(214, 180, 106, .45); }

/* حقول */
.landing input[type="text"], .landing input[type="tel"], .landing input[type="date"], .landing input[type="time"], .landing select, .landing textarea {
  background: var(--field); color: var(--text); border: 1px solid rgba(214, 180, 106, .28); border-radius: 14px; min-height: 50px;
}
.landing input::placeholder, .landing textarea::placeholder { color: var(--ph); }
.landing input:focus, .landing select:focus, .landing textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 180, 106, .16); }
.landing label.field > span { color: var(--text-2); }

/* الشريط العلوي + القائمة الجانبية */
.lp-nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(214, 180, 106, .08); padding-top: env(safe-area-inset-top, 0px); }
.lp-nav-in { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; font-size: 1.95rem; line-height: 1; color: var(--gold-2); text-decoration: none; }
.wordmark .logo-img { height: 42px; width: auto; max-width: 160px; object-fit: contain; }
.wordmark.logo-only { font-size: 0; gap: 0; }
.wordmark.logo-only .logo-img { height: 46px; max-width: 200px; }
.lp-links { display: none; gap: 1.6rem; margin-inline-start: auto; }
.lp-links a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; }
.lp-links a::after { content: ""; position: absolute; inset: auto 0 -6px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.lp-links a:hover { color: var(--gold-2); }
.lp-links a:hover::after { transform: scaleX(1); }
.nav-login { display: none; }
.burger { margin-inline-start: .2rem; width: 46px; height: 46px; border: 0; background: none; display: grid; align-content: center; gap: 6px; padding: 0 10px; cursor: pointer; }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--gold-2); transition: transform .3s var(--ease); }
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); animation: fade .25s ease; }
.drawer-panel { position: absolute; inset: 0 0 0 auto; width: min(84vw, 340px); background: var(--panel-grad); border-inline-start: 1px solid var(--hair); padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem 1.5rem; display: grid; align-content: start; gap: .7rem; animation: slideIn .35s var(--ease); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.drawer-x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--gold-2); font-size: 1rem; cursor: pointer; }
.drawer-links { display: grid; gap: .3rem; margin-bottom: .8rem; }
.drawer-links a { padding: .95rem 1rem; border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 500; transition: background .2s; }
.drawer-links a:hover, .drawer-links a:focus-visible { background: rgba(214, 180, 106, .08); color: var(--gold-2); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* الواجهة */
.hero { position: relative; overflow: hidden; padding: 3.6rem 0 5rem; background: var(--hero-grad); }
.dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 8px rgba(236, 210, 148, .8); opacity: 0; animation: dust 10s linear infinite; }
.dust i:nth-child(1) { left: 8%; top: 75%; } .dust i:nth-child(2) { left: 20%; top: 45%; animation-delay: 1.5s; }
.dust i:nth-child(3) { left: 33%; top: 82%; animation-delay: 3s; } .dust i:nth-child(4) { left: 45%; top: 35%; animation-delay: .8s; }
.dust i:nth-child(5) { left: 58%; top: 68%; animation-delay: 4s; } .dust i:nth-child(6) { left: 70%; top: 28%; animation-delay: 5.4s; }
.dust i:nth-child(7) { left: 83%; top: 58%; animation-delay: 2.2s; } .dust i:nth-child(8) { left: 92%; top: 86%; animation-delay: 6.6s; }
.dust i:nth-child(9) { left: 14%; top: 18%; animation-delay: 4.6s; } .dust i:nth-child(10) { left: 53%; top: 92%; animation-delay: 7.3s; }
.dust i:nth-child(11) { left: 76%; top: 12%; animation-delay: 8.1s; } .dust i:nth-child(12) { left: 38%; top: 10%; animation-delay: 2.9s; }
@keyframes dust { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: .7; } 75% { opacity: .4; } 100% { transform: translateY(-140px) scale(1); opacity: 0; } }
.hero-in { position: relative; display: grid; gap: 2.5rem; }
.hero-copy { text-align: center; }
.hero-title { font-size: clamp(3rem, 14vw, 5.2rem); line-height: 1.25; animation: rise .9s var(--ease) both; }
.h1-pre { font-weight: 700; color: var(--text); }
.h1-brand { font-family: var(--display); }
.shimmer { background: var(--shimmer); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4.5s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -130% 0; } }
.hero-sub { color: var(--text-2); font-size: 1.15rem; animation: rise .9s .1s var(--ease) both; }
.typed { min-height: 2.1em; margin: 1.1rem auto 0; color: var(--gold); font-size: 1.08rem; font-weight: 500; animation: rise .9s .2s var(--ease) both; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 3px; vertical-align: -.18em; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.6rem auto 0; max-width: 420px; animation: rise .9s .3s var(--ease) both; }
.trial { margin: 1.4rem auto 0; max-width: 420px; background: var(--trial-bg); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--lift); padding: 1.1rem; animation: rise .9s .4s var(--ease) both; }
.trial-title { font-weight: 700; color: var(--gold-2); margin-bottom: .6rem; }
.trial-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.hero-visual { display: none; }
.device { border: 7px solid #04100c; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px var(--shadow), 0 0 0 1px rgba(214, 180, 106, .25); }
.device img { display: block; width: 100%; height: auto; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.wave { position: absolute; inset: auto 0 -1px; width: 100%; height: 60px; fill: var(--bg); }

/* الأقسام */
.lp-section { position: relative; padding: 4.4rem 0; }
.lp-section.soft { background: var(--bg-2); }
.sec-title { font-size: clamp(1.75rem, 6.6vw, 2.35rem); text-align: center; color: var(--text); }
.sec-title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 3px; margin: .8rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform .8s .2s var(--ease); }
.sec-title.in::after { transform: scaleX(1); }
.sec-sub { text-align: center; color: var(--dim); margin: .8rem auto 0; max-width: 34em; line-height: 1.9; }

/* ظهور تدريجي عند النزول */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* لماذا */
.why-grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
.why { text-align: center; padding: 1.7rem 1.4rem; border-radius: 22px; background: var(--card); box-shadow: var(--lift); transition: transform .35s var(--ease), background .35s; }
.why:hover { transform: translateY(-4px); background: var(--card-2); }
.why-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: rgba(214, 180, 106, .1); color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--hair); }
.why-ic svg { width: 26px; height: 26px; }
.why h3 { font-size: 1.1rem; }
.why p { color: var(--dim); font-size: .95rem; margin-top: .4rem; line-height: 1.85; }

/* السلايدر */
.cat-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .4rem; margin-top: 2rem; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips button { flex: none; min-height: 40px; padding: .3rem 1.05rem; border-radius: 999px; border: 0; background: var(--card); color: var(--text-2); font: 600 .9rem var(--font); cursor: pointer; transition: background .25s, color .25s; }
.cat-chips button[aria-pressed="true"] { background: var(--gold); color: #1b1305; }
.carousel { margin-top: 1.2rem; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .6rem 16% 1rem; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.track.one { grid-auto-columns: 100%; padding-inline: 0; }
.slide { scroll-snap-align: center; transition: transform .5s var(--ease), opacity .5s; transform: scale(.92); opacity: .55; }
.slide.cur { transform: none; opacity: 1; }
.track.one .slide { transform: none; opacity: 1; }
.car-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .4rem; }
.car-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(214, 180, 106, .45); background: transparent; color: var(--gold-2); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s; }
.car-btn:hover { background: rgba(214, 180, 106, .1); }
.dots { display: flex; gap: .4rem; }
.dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(214, 180, 106, .3); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.dots button[aria-current="true"] { width: 24px; background: var(--gold); }
.gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; }
@media (min-width: 720px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1040px) { .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } }
.gal-card { display: flex; flex-direction: column; gap: .55rem; padding: .55rem; border-radius: 20px; background: var(--card); border: 1px solid var(--hair); transition: transform .3s var(--ease), box-shadow .3s; min-width: 0; }
.gal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--shadow); }
.gal-img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 14px; overflow: hidden; cursor: pointer; }
.gal-img .dz-wrap { display: block; }
.gal-badge { position: absolute; top: .55rem; inset-inline-start: .55rem; z-index: 2; background: rgba(20, 20, 20, .72); color: #f3d98f; font: 700 .7rem var(--font); padding: .28rem .65rem; border-radius: 999px; white-space: nowrap; }
.gal-cat { position: absolute; bottom: .55rem; inset-inline-end: .55rem; z-index: 2; background: rgba(20, 20, 20, .62); color: #fff; font: 600 .7rem var(--font); padding: .22rem .6rem; border-radius: 8px; }
.gal-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; padding-inline: .25rem; min-width: 0; }
.gal-meta b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.gal-meta small { color: var(--dim); font-size: .78rem; flex: none; }
.gal-go { width: 100%; min-height: 40px; padding: .3rem .6rem; font-size: .85rem; }
.gal-more { display: flex; justify-content: center; margin-top: 1.4rem; }
.gal-more .btn { min-width: 220px; }
.cat-chips button small { margin-inline-start: .4rem; font-size: .72rem; opacity: .7; }
@media (max-width: 520px) { .gal-badge { font-size: .62rem; padding: .22rem .5rem; } .gal-go { font-size: .78rem; } }

/* أنواع الدعوات */
.types-demo { display: grid; gap: 1.4rem; margin-top: 2.2rem; }
.type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.type-tabs button { text-align: center; padding: .85rem .6rem; border: 0; border-radius: 16px; background: var(--card); font: inherit; color: var(--text); cursor: pointer; transition: background .25s, box-shadow .25s; }
.type-tabs button b { display: block; font-size: .95rem; }
.type-tabs button span { display: block; font-size: .8rem; color: var(--dim); margin-top: .1rem; }
.type-tabs button[aria-selected="true"] { background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.demo-device { width: min(290px, 100%); margin: 0 auto; }
.demo-screen { height: 540px; min-height: 0; overflow-y: auto; padding: 14px 10px; background: var(--majlis) var(--pattern); color: var(--ink); }
.demo-screen .inv-card { border-radius: 14px; box-shadow: none; animation: rise .5s var(--ease) both; }
.demo-screen .inv-main { padding: 1.8rem 1rem 1.3rem; }
.demo-screen .inv-title { font-size: 2rem; }
.demo-screen .inv-date .d-num { font-size: 2.6rem; }
.demo-screen .inv-date .d-side { font-size: .82rem; }
.demo-screen .inv-stub { padding: 1rem 1rem 1.4rem; }
.demo-screen .btn.big { min-height: 46px; font-size: .95rem; }
.demo-screen .qr-box { width: 150px; }
.demo-note { font-size: .82rem; color: var(--muted); margin-top: 1rem; }

/* الباقات */
.packages { display: grid; gap: 1.2rem; margin-top: 2.2rem; }
.pkg { position: relative; border-radius: 26px; padding: 1.8rem 1.4rem; display: flex; flex-direction: column; background: var(--card); box-shadow: var(--lift); transition: transform .35s var(--ease); }
.pkg.featured { background: var(--feat-grad); box-shadow: inset 0 0 0 1.5px var(--gold), 0 24px 60px rgba(214, 180, 106, .1); }
.pkg .badge-top { position: absolute; top: -.85rem; inset-inline-start: 1.4rem; background: var(--gold); color: #1b1305; font-size: .78rem; font-weight: 700; padding: .25rem .9rem; border-radius: 99px; }
.pkg .badge-off { position: absolute; top: -.85rem; inset-inline-end: 1.4rem; background: #b8382c; color: #fff; font-size: .78rem; font-weight: 700; padding: .25rem .9rem; border-radius: 99px; }
.pkg h3 { font-size: 1.35rem; color: var(--gold-2); text-align: center; }
.pkg .pkg-guests { color: var(--dim); font-size: .92rem; margin-top: .25rem; text-align: center; }
.pkg ul { list-style: none; padding: 0; margin: 1.3rem 0 1.4rem; display: grid; gap: .65rem; }
.pkg li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--text-2); }
.pkg li::before { content: ""; flex: none; width: 19px; height: 19px; margin-top: .18rem; border-radius: 50%; background: rgba(214, 180, 106, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecd294' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat; }
.g-title, .w-label { font-size: .88rem; font-weight: 700; color: var(--text-2); margin-bottom: .55rem; text-align: center; }
.w-label small { font-weight: 400; color: var(--dim); }
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.g-grid button { min-height: 54px; border-radius: 14px; border: 1px solid rgba(214, 180, 106, .22); background: transparent; color: var(--text); font: 700 1rem var(--font); cursor: pointer; display: grid; place-items: center; line-height: 1.1; font-variant-numeric: tabular-nums; transition: background .25s, color .25s, transform .2s; }
.g-grid button:active { transform: scale(.95); }
.g-grid button small { font-size: .66rem; font-weight: 500; color: var(--dim); }
.g-grid button[aria-pressed="true"] { background: var(--gold); color: #1b1305; border-color: transparent; }
.g-grid button[aria-pressed="true"] small { color: #3a2a0a; }
.pkg .price { text-align: center; margin: 1.4rem 0 .2rem; font-size: 2.8rem; font-weight: 700; color: var(--gold-2); line-height: 1; font-variant-numeric: tabular-nums; }
.pkg .price small { font-size: 1rem; font-weight: 600; color: var(--dim); margin-inline-start: .35rem; }
.pkg .price s.old { font-size: 1.15rem; font-weight: 600; color: var(--dim); margin-inline-end: .5rem; text-decoration-thickness: 2px; }
.pkg .price.ask { font-size: 1.15rem; color: var(--gold); }
.pkg .price-for { text-align: center; color: var(--dim); font-size: .86rem; margin-bottom: 1.2rem; }
.promo { text-align: center; margin: 1.2rem auto 0; width: fit-content; max-width: 100%; background: rgba(214, 180, 106, .1); color: var(--gold-2); border-radius: 99px; padding: .5rem 1.2rem; font-weight: 700; }
.promo-bar { display: block; background: linear-gradient(90deg, #b48e45, #ecd294, #b48e45); color: #1b1305; text-align: center; font-weight: 700; font-size: .92rem; padding: .55rem 1rem; text-decoration: none; }

/* أرقام وآراء */
.counters-sec { padding: 3rem 0; background: var(--band-grad); }
.counters { display: grid; grid-template-columns: 1fr 1fr; text-align: center; gap: 1rem; }
.counters b { display: block; font-size: clamp(2.4rem, 10vw, 3.4rem); color: var(--gold-2); font-variant-numeric: tabular-nums; line-height: 1.15; }
.counters span { color: var(--text-2); }
.review { margin: 0; box-shadow: var(--lift); background: var(--card); border-radius: 24px; padding: 1.8rem 1.5rem; text-align: center; }
.review .stars { color: var(--gold); letter-spacing: .2em; font-size: 1.15rem; }
.review .stars .off { color: rgba(214, 180, 106, .22); }
.review blockquote { margin: .8rem 0 0; line-height: 1.95; color: var(--text-2); font-size: 1.02rem; }
.review figcaption { margin-top: 1rem; font-weight: 700; color: var(--gold-2); }

/* الأسئلة */
.faq { margin-top: 2rem; display: grid; gap: .6rem; }
.faq details { box-shadow: var(--lift); background: var(--card); border-radius: 18px; padding: 0 1.2rem; transition: background .25s; }
.faq details[open] { background: var(--card-2); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--gold); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--dim); padding: 0 0 1.2rem; line-height: 1.9; animation: rise .4s var(--ease); }

/* شريط الدعوة للطلب */
.cta-band { padding: 4.4rem 0; background: var(--cta-grad); text-align: center; }
.cta-in h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.cta-in p { color: var(--dim); margin-top: .6rem; }
.cta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; max-width: 420px; margin: 1.6rem auto 0; }

/* المعالج */
dialog.wiz { border: 0; padding: 0; margin: auto; width: min(560px, 100%); max-height: 100dvh; background: transparent; color: var(--text); }
dialog.wiz::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.wiz-in { background: var(--wiz-grad); border: 1px solid var(--hair); border-radius: 26px; padding: 1rem 1.2rem 1.2rem; max-height: 92dvh; overflow-y: auto; animation: rise .4s var(--ease); }
.wiz-head { position: sticky; top: -1rem; z-index: 2; background: var(--wiz-head); margin: -1rem -1.2rem 1rem; padding: 1rem 1.2rem .8rem; border-radius: 26px 26px 0 0; }
.wiz-x { position: absolute; top: .8rem; inset-inline-end: .8rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--gold-2); cursor: pointer; }
.wiz-steps { list-style: none; display: flex; justify-content: center; gap: 1.4rem; padding: 0; margin: .2rem 0 .7rem; counter-reset: s; }
.wiz-steps li { counter-increment: s; font-size: .85rem; color: var(--dim); display: flex; align-items: center; gap: .4rem; }
.wiz-steps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; border: 1px solid var(--hair); }
.wiz-steps li.on { color: var(--gold-2); font-weight: 700; }
.wiz-steps li.on::before { background: var(--gold); color: #1b1305; border-color: transparent; }
.wiz-steps li.done::before { content: "✓"; background: rgba(214, 180, 106, .2); color: var(--gold-2); }
.wiz-bar { height: 4px; background: rgba(214, 180, 106, .14); border-radius: 4px; overflow: hidden; }
.wiz-bar span { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, #b8924a, #f0d89b); transition: width .5s var(--ease); }
.wstep { animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.wstep h2 { font-size: 1.35rem; text-align: center; margin-bottom: 1rem; }
.pkg-pick { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.pkg-pick button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--hair); background: var(--card); color: var(--text); font: inherit; cursor: pointer; transition: box-shadow .25s, background .25s; }
.pkg-pick button b { display: block; font-size: 1.05rem; color: var(--gold-2); }
.pkg-pick button small { display: block; color: var(--dim); font-size: .84rem; margin-top: .15rem; }
.pkg-pick button[aria-checked="true"] { background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pkg-pick .radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(214, 180, 106, .5); display: grid; place-items: center; }
.pkg-pick button[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.w-price { text-align: center; margin-top: 1.1rem; color: var(--dim); min-height: 2.4em; }
.w-price b { display: block; font-size: 2.2rem; color: var(--gold-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.chips-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1.1rem; }
.chips-pick button { min-height: 42px; padding: .3rem 1rem; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); color: var(--text-2); font: 600 .9rem var(--font); cursor: pointer; }
.chips-pick button[aria-checked="true"] { background: var(--gold); color: #1b1305; border-color: transparent; }
.dz-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.dz-mini button { padding: 0; border: 0; background: none; cursor: pointer; display: grid; gap: .25rem; color: var(--text-2); font: 500 .72rem var(--font); }
.dz-mini .dz-wrap, .dz-mini .later { border-radius: 10px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.dz-mini .later { aspect-ratio: 2 / 3; display: grid; place-items: center; background: var(--card); color: var(--dim); font-size: .78rem; }
.dz-mini button[aria-checked="true"] .dz-wrap, .dz-mini button[aria-checked="true"] .later { outline-color: var(--gold); }
.dz-mini button[aria-checked="true"] { color: var(--gold-2); }
/* منتقي التاريخ والوقت */
.dp { box-shadow: var(--lift); background: var(--card); border-radius: 20px; padding: .9rem .8rem 1rem; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.dp-title { text-align: center; display: grid; }
.dp-title b { font-size: 1.05rem; color: var(--text); }
.dp-title small { font-size: .78rem; color: var(--gold); }
.dp-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--gold-2); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.dp-nav:disabled { opacity: .3; cursor: default; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.dp-week span { font-size: .72rem; color: var(--dim); padding-bottom: .4rem; }
.dp-grid { gap: .2rem 0; }
.dp-grid button { aspect-ratio: 1; width: min(42px, 100%); margin: 0 auto; border-radius: 50%; border: 0; background: none; color: var(--text); font: 600 .98rem var(--font); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, transform .15s; }
@media (hover: hover) { .dp-grid button:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(214, 180, 106, .12); } }
.dp-grid button:active:not(:disabled) { transform: scale(.92); }
.dp-grid button:disabled { color: var(--disabled); cursor: default; }
.dp-grid button.today { box-shadow: inset 0 0 0 1.5px rgba(214, 180, 106, .6); }
.dp-grid button[aria-pressed="true"] { background: var(--gold); color: #1b1305; box-shadow: 0 6px 16px rgba(214, 180, 106, .3); }
.dp-sel { text-align: center; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(214, 180, 106, .1); color: var(--gold-2); font-weight: 700; line-height: 1.7; }
.dp-sel small { color: var(--dim); font-weight: 500; }
.tp-row { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem .1rem .5rem; scrollbar-width: none; }
.tp-row::-webkit-scrollbar { display: none; }
.tp-row button { flex: none; min-height: 44px; padding: .3rem 1rem; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); color: var(--text-2); font: 600 .9rem var(--font); cursor: pointer; font-variant-numeric: tabular-nums; }
.tp-row button[aria-pressed="true"] { background: var(--gold); color: #1b1305; border-color: transparent; }
.tp-other { margin-top: .5rem; }
.addon { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 16px; margin-bottom: .9rem; cursor: pointer; background: var(--card); }
.addon input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; margin-top: .15rem; }
.addon b { display: block; color: var(--text); }
.addon em { font-style: normal; color: var(--gold-2); font-size: .9rem; margin-inline-start: .3rem; }
.addon small { display: block; color: var(--dim); font-size: .85rem; margin-top: .15rem; line-height: 1.7; }
.coupon-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.coupon-msg { min-height: 1.3em; font-size: .86rem; margin-top: .35rem; color: var(--dim); }
.coupon-msg.ok { color: var(--ok); }
.coupon-msg.bad { color: var(--bad); }
.summary { border-radius: 18px; padding: 1rem 1.1rem; margin: .4rem 0 .4rem; background: var(--shade); }
.summary:empty { display: none; }
.summary dl { margin: 0; display: grid; gap: .45rem; }
.summary dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; color: var(--text-2); }
.summary dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.summary .minus dd { color: var(--ok); }
.summary .total { border-top: 1px dashed var(--hair); padding-top: .7rem; margin-top: .3rem; }
.summary .total dt { font-weight: 700; color: var(--text); }
.summary .total dd { font-size: 1.5rem; font-weight: 700; color: var(--gold-2); }
.summary .ask { color: var(--dim); text-align: center; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form-msg { color: var(--bad); min-height: 1.3em; text-align: center; font-size: .9rem; margin: .6rem 0 0; }
.wiz-foot { display: grid; grid-template-columns: auto 1fr; gap: .6rem; margin-top: .8rem; position: sticky; bottom: -1.2rem; background: var(--wiz-foot); padding: .8rem 0 1rem; }
.wiz-foot .btn { min-height: 52px; }
.wdone { text-align: center; padding: 1.4rem 0 .4rem; animation: rise .5s var(--ease); }
.wdone .stub-icon { margin: 0 auto 1rem; background: var(--gold); color: #1b1305; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.wdone .stub-icon svg { width: 32px; height: 32px; }
.wdone h2 { margin-bottom: .5rem; }
.wdone p { color: var(--dim); margin-bottom: 1.2rem; line-height: 1.9; }
.pay-box { text-align: right; border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1.2rem; background: var(--shade); display: grid; gap: .45rem; }
.pay-box b { color: var(--gold-2); }

/* التذييل */
.lp-foot { background: var(--foot-bg); color: var(--dim); padding: 2.8rem 0 calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; gap: 1.4rem; }
.foot-in p { margin-top: .5rem; font-size: .92rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-links a { color: var(--text); text-decoration: none; font-weight: 500; }
.legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid rgba(214, 180, 106, .1); font-size: .85rem; }
.legal a { color: var(--text-2); }
.copy { margin-top: 1rem; font-size: .82rem; color: #5f7369; }
.wa-float {
  position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
  min-width: 56px; height: 56px; padding: 0 13px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--wf-bg, #1fa855) !important; color: var(--wf-fg, #fff) !important; text-decoration: none; font: 700 .95rem var(--font, inherit);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3); animation: pulse 3s ease-in-out infinite;
}
.wa-float[hidden] { display: none; }
.wa-float.right { left: auto; right: 1rem; }
.wa-float.pill { padding: 0 1.15rem 0 1rem; }
.wa-float.still { animation: none; }
.wf-ic { display: grid; place-items: center; }
.wf-ic svg { width: 30px; height: 30px; }
.wa-float.pill .wf-ic svg { width: 26px; height: 26px; }
.wf-t { white-space: nowrap; }
@keyframes pulse { 0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .3), 0 0 0 0 color-mix(in srgb, var(--wf-bg, #1fa855) 50%, transparent); } 50% { box-shadow: 0 10px 28px rgba(0, 0, 0, .3), 0 0 0 12px color-mix(in srgb, var(--wf-bg, #1fa855) 0%, transparent); } }

/* دخول العملاء والصفحات القانونية */
.login-card { background: var(--wiz-grad); border: 1px solid var(--hair); border-radius: 24px; padding: 2rem 1.3rem; box-shadow: 0 30px 70px var(--shadow); }
.login-card h1 { font-size: 1.7rem; text-align: center; color: var(--text); }
.login-card .muted { color: var(--dim); }
.my-events { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .6rem; }
.my-events a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--hair); border-radius: 14px; text-decoration: none; color: var(--text); font-weight: 700; }
.my-events small { color: var(--dim); font-weight: 500; flex: none; }
.my-events a span { min-width: 0; overflow-wrap: anywhere; }
.order-sec { background: var(--bg-2); }
.legal-doc h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); color: var(--text); }
.legal-doc .updated { color: var(--dim); margin: .6rem 0 1.4rem; line-height: 1.9; }
.legal-doc h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: var(--gold-2); }
.legal-doc p, .legal-doc li { line-height: 1.95; color: var(--text-2); }
.legal-doc ul { padding-inline-start: 1.2rem; margin: 0; }

@media (max-width: 600px) {
  dialog.wiz { margin: auto 0 0; width: 100%; }
  .wiz-in { border-radius: 26px 26px 0 0; max-height: 94dvh; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 720px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .packages { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .track { grid-auto-columns: 34%; padding-inline: 33%; }
  .type-tabs { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 960px) {
  .lp-links { display: flex; }
  .nav-login { display: inline-flex; }
  .burger { display: none; }
  .hero { padding: 5rem 0 6rem; }
  .hero-in { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .hero-copy { text-align: right; }
  .hero-cta, .trial, .typed { margin-inline: 0; }
  .hero-visual { display: block; width: 280px; justify-self: center; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .types-demo { grid-template-columns: 1fr auto; gap: 3rem; max-width: 860px; margin-inline: auto; align-items: center; }
  .track { grid-auto-columns: 24%; padding-inline: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .dust, .caret { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .shimmer { animation: none; }
}

/* ===== الوضع الفاتح: عاجي + زمردي + ذهبي ===== */
html[data-theme="light"] .landing {
  --bg: #faf7f0;
  --bg-2: #f3efe5;
  --card: #ffffff;
  --card-2: #fffcf5;
  --gold: #b08a40;
  --gold-2: #8a6720;
  --text: #15302a;
  --text-2: #3e534b;
  --dim: #6a7a73;
  --hair: rgba(176, 138, 64, .24);
  --nav-bg: rgba(250, 247, 240, .88);
  --field: #ffffff;
  --ph: #9aa8a2;
  --panel-grad: linear-gradient(180deg, #ffffff, #f8f4ea);
  --hero-grad: radial-gradient(85% 60% at 50% 0%, #dfece2 0%, #f1f0e6 52%, #faf7f0 100%);
  --trial-bg: #ffffff;
  --badge-bg: rgba(255, 255, 255, .92);
  --shadow: rgba(21, 48, 42, .16);
  --feat-grad: linear-gradient(180deg, #fffaf0, #ffffff);
  --band-grad: radial-gradient(70% 100% at 50% 0%, #e2eee5, #faf7f0);
  --cta-grad: radial-gradient(80% 120% at 50% 100%, #dcebe0, #faf7f0);
  --wiz-grad: linear-gradient(180deg, #ffffff, #fbf8f1);
  --wiz-head: #ffffff;
  --wiz-foot: #fbf8f1;
  --shade: rgba(21, 48, 42, .045);
  --foot-bg: #f0ebdf;
  --disabled: rgba(21, 48, 42, .2);
  --ok: #1e7a52;
  --bad: #b23a2e;
  --shimmer: linear-gradient(110deg, #8a6720 0%, #d8b66c 25%, #8a6720 45%, #8a6720 100%);
  --lift: 0 10px 30px rgba(21, 48, 42, .07);
  color-scheme: light;
}
html[data-theme="light"] .landing .dust { display: none; }
html[data-theme="light"] .landing .lp-nav { border-bottom-color: rgba(21, 48, 42, .07); }
html[data-theme="light"] .landing .burger span { background: var(--text); }
html[data-theme="light"] .landing .why-ic { background: #eef5f0; color: var(--brand); box-shadow: none; }
html[data-theme="light"] .landing .btn.line { color: var(--brand); border-color: rgba(var(--brand-rgb), .35); }
html[data-theme="light"] .landing .btn.line:hover { background: rgba(var(--brand-rgb), .06); }
html[data-theme="light"] .landing .car-btn { color: var(--brand); border-color: rgba(var(--brand-rgb), .3); }
html[data-theme="light"] .landing .cat-chips button, html[data-theme="light"] .landing .chips-pick button, html[data-theme="light"] .landing .tp-row button { box-shadow: 0 2px 8px rgba(21, 48, 42, .06); border-color: rgba(21, 48, 42, .1); }
html[data-theme="light"] .landing .type-tabs button { box-shadow: var(--lift); }
html[data-theme="light"] .landing .g-grid button { border-color: rgba(21, 48, 42, .14); }
html[data-theme="light"] .landing .pkg h3 { color: var(--brand); }
html[data-theme="light"] .landing .pkg .price { color: var(--brand); }
html[data-theme="light"] .landing .counters b, html[data-theme="light"] .landing .w-price b, html[data-theme="light"] .landing .summary .total dd { color: var(--brand); }
html[data-theme="light"] .landing .faq summary::after { color: var(--brand); }
html[data-theme="light"] .landing .review figcaption, html[data-theme="light"] .landing .dp-sel, html[data-theme="light"] .landing .o-step legend { color: var(--brand); }
html[data-theme="light"] .landing .wiz-steps li.on { color: var(--brand); }
html[data-theme="light"] .landing .drawer-links a:hover { color: var(--brand); }
html[data-theme="light"] .landing .lp-links a:hover { color: var(--brand); }
html[data-theme="light"] .landing .wordmark { color: var(--brand); }
html[data-theme="light"] .landing .foot-links a { color: #15302a; }
html[data-theme="light"] .landing .promo { color: #7a5413; }

/* زر تبديل الوضع */
.lp-nav-in .theme-btn { margin-inline-start: auto; }
@media (min-width: 960px) { .lp-nav-in .theme-btn { margin-inline-start: 0; } }
.theme-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--gold-2); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .4s var(--ease), background .2s; }
.theme-btn:hover { background: rgba(214, 180, 106, .1); }
.theme-btn:active { transform: rotate(40deg) scale(.92); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .moon, html[data-theme="light"] .theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .moon { display: block; }
.landing, .landing .lp-nav, .landing .why, .landing .pkg, .landing .lp-section.soft, .landing .lp-foot { transition: background-color .4s ease, color .4s ease; }
.pkg .price small .sar { height: 1.55em; vertical-align: -.1em; color: var(--gold-2); }
html[data-theme="light"] .landing .pkg .price small .sar { color: var(--brand); }
/* مع كثرة التصاميم: النقاط تلتف داخل الشاشة والأسهم ثابتة */
.car-nav { max-width: 100%; }
.car-btn { flex: none; }
.dots { flex-wrap: wrap; justify-content: center; min-width: 0; max-width: min(420px, calc(100vw - 150px)); row-gap: .45rem; }
.dots button { flex: none; }
dialog.wiz { max-width: 100%; }

/* عدد ضيوف يكتبه العميل */
.g-custom { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .2rem; }
.g-custom input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1.5px solid rgba(214, 180, 106, .5); background: rgba(255,255,255,.04);
  color: inherit; font: 700 1.2rem var(--font); text-align: center; }
.g-custom input:focus { outline: none; border-color: var(--gold); }
.g-custom span { font-weight: 600; opacity: .8; }
html[data-theme="light"] .landing .g-custom input { background: #fff; border-color: rgba(var(--brand-rgb), .3); }

/* أيقونات حسابات السوشيال في التذييل */
.landing .socials { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.landing .socials[hidden] { display: none; }
.landing .socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold, #c8902e); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.landing .socials a:hover, .landing .socials a:focus-visible { transform: translateY(-2px); background: var(--gold, #c8902e); color: #fff; }
.landing .socials svg { width: 19px; height: 19px; }
html[data-theme="light"] .landing .socials a { color: #8a6420; }

/* معاينة أنواع الدعوات: أصغر وأخف على الجوال */
@media (max-width: 700px) {
  .types-demo { gap: 1rem; margin-top: 1.6rem; }
  .type-tabs button { padding: .65rem .5rem; border-radius: 14px; }
  .type-tabs button b { font-size: .88rem; }
  .type-tabs button span { font-size: .74rem; }
  .demo-device { width: min(232px, 66vw); border-width: 6px; border-radius: 26px; }
  .demo-screen { height: 410px; padding: 10px 8px; position: relative; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
  .demo-screen .inv-main { padding: 1.2rem .7rem .9rem; }
  .demo-screen .inv-title { font-size: 1.5rem; }
  .demo-screen .inv-date .d-num { font-size: 2rem; }
  .demo-screen .inv-date .d-side { font-size: .74rem; }
  .demo-screen .inv-stub { padding: .8rem .7rem 1.1rem; }
  .demo-screen .qr-box { width: 112px; }
  .demo-screen .btn.big { min-height: 40px; font-size: .85rem; }
  .demo-screen p, .demo-screen .inv-hosts, .demo-screen .inv-time { font-size: .82rem; }
}
@media (min-width: 960px) {
  .types-demo { grid-template-columns: minmax(0, 1fr) 300px; max-width: 820px; }
  .types-demo .type-tabs { width: 100%; max-width: 380px; justify-self: center; gap: .7rem; }
  .types-demo .type-tabs button { text-align: start; padding: 1rem 1.2rem; }
  .types-demo .type-tabs button b { font-size: 1.02rem; }
}

/* ---------- التذييل: كل شي في الوسط ---------- */
.foot-c { display: grid; justify-items: center; text-align: center; gap: 0; }
.to-top { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.4rem; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem; transition: background-color .2s; }
.to-top span { font-size: 1.1rem; }
.to-top:hover { background: rgba(214, 180, 106, .12); }
.landing .foot-c .socials { justify-content: center; gap: .6rem; margin-top: 1.2rem; flex-wrap: nowrap; }
.landing .foot-c .socials a { flex: none; width: 46px; height: 46px; background: #fff; color: #1d1d1d; border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.landing .foot-c .socials a:hover, .landing .foot-c .socials a:focus-visible { background: var(--gold); color: #1b1305; }
.landing .foot-c .socials svg { width: 22px; height: 22px; }
.foot-hr { width: 100%; border: 0; border-top: 1px solid rgba(214, 180, 106, .25); margin: 1.6rem 0 1.8rem; }
.foot-logo { justify-content: center; font-size: 2.3rem; }
.foot-logo .logo-img { height: 56px; max-width: 220px; }
.foot-desc { margin-top: .9rem; max-width: 32em; font-size: .95rem; line-height: 1.9; color: var(--text-2); }
.foot-h { margin-top: 1.6rem; font-size: 1.05rem; color: var(--text); }
.foot-links2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.2rem; width: min(100%, 520px); margin-top: 1.2rem; }
.foot-links2 a, .foot-links2 > span { color: var(--text-2); text-decoration: none; font-size: .93rem; line-height: 1.6; }
.foot-links2 a:hover { color: var(--gold); }
.foot-links2 .fl-group { display: contents; }
.lp-foot .legal { justify-content: center; text-align: center; }
.lp-foot .legal:not(:has(span:not([hidden]))) { display: none; }
.lp-foot .copy { text-align: center; }
html[data-theme="light"] .landing .to-top, html[data-theme="light"] .landing .foot-h { color: #15302a; }
html[data-theme="light"] .landing .foot-desc, html[data-theme="light"] .landing .foot-links2 a { color: #44574f; }
.foot-lwrap { display: grid; justify-items: center; width: 100%; }
/* الجوال: القائمة في الزاوية، واسم المتجر بالنص */
@media (max-width: 959px) {
  .lp-nav-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; }
  .lp-nav-in .burger { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .lp-nav-in .wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
  .lp-nav-in .theme-btn { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
}
/* عرض التصاميم الدوّار */
.gal-flow { position: relative; margin-top: 1.4rem; height: 520px; perspective: 1100px; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.gal-flow .gal-card { position: absolute; top: 8px; left: 50%; width: min(62vw, 290px); margin-left: calc(min(62vw, 290px) / -2); transition: transform .45s var(--ease), opacity .45s; will-change: transform; transform-origin: 50% 40%; }
.gal-flow.dragging .gal-card { transition: none; }
.gal-flow .gal-card:hover { box-shadow: none; }
.gal-flow .gal-card:not(.on) .gal-meta, .gal-flow .gal-card:not(.on) .gal-go { opacity: 0; visibility: hidden; }
.gal-flow .gal-card.on .gal-go { display: flex !important; }
.gal-flow .gal-img { pointer-events: auto; }
.gal-flow .gal-img img, .gal-flow .gal-img svg { -webkit-user-drag: none; }
.gal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .4rem auto 0; max-width: 520px; }
.gal-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .18); cursor: pointer; transition: width .3s, background .3s; }
.gal-dots button[aria-current="true"] { width: 26px; background: var(--btn-bg, var(--gold, #a67b01)); }
@media (min-width: 900px) { .gal-flow .gal-card { width: 300px; margin-left: -150px; } }
#designs { overflow-x: clip; }
.gal-dots.count { align-items: center; gap: .9rem; }
.gal-dots .gd-arr { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid rgba(0, 0, 0, .15); color: inherit; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; }
.gal-dots .gd-n { font-weight: 600; font-size: .95rem; min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
/* العرض الحي: تتبّع الردود + كل شي من الواتساب */
.sc-grid { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 820px) { .sc-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.sc-card { text-align: start; padding: 1.6rem 1.5rem; border-radius: 22px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--lift); }
.sc-card h3 { margin: .2rem 0 .1rem; font-size: 1.3rem; }
.sc-ic { display: inline-grid; color: var(--gold-2, #a67b01); margin-bottom: .6rem; }
.sc-ic svg { width: 30px; height: 30px; }
.sc-ex { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 1.1rem; }
.sc-stat { display: flex; align-items: baseline; gap: .45rem; margin-top: .9rem; }
.sc-stat b { font-size: 2.3rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sc-stat span { color: var(--text-2); font-size: 1rem; }
.sc-bar { height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .06); margin-top: .55rem; overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #d4c08f; transition: width 1.3s cubic-bezier(.2, .8, .2, 1) .15s; }
.sc-bar.ok i { background: #9cc3a2; transition-delay: .35s; }
.go .sc-bar i { width: var(--w); }
.sc-mini { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding: 0; margin: 1.1rem 0 0; color: var(--text-2); font-size: .92rem; }
.sc-mini b { color: var(--text); font-variant-numeric: tabular-nums; }
.sc-flow { position: relative; height: 170px; margin: 1.4rem 0 .6rem; }
.sc-flow > svg { position: absolute; inset: 22px 0; width: 100%; height: calc(100% - 44px); overflow: visible; }
.sc-flow > svg path { fill: none; stroke: rgba(0, 0, 0, .14); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s ease; }
.go .sc-flow > svg path { stroke-dashoffset: 0; }
.go .sc-flow > svg path:nth-child(2) { transition-delay: .2s; }
.go .sc-flow > svg path:nth-child(3) { transition-delay: .4s; }
.sc-hub, .sc-node { position: absolute; display: grid; place-items: center; border-radius: 50%; transform: translate(50%, -50%); }
.sc-hub { width: 64px; height: 64px; right: 15%; top: 50%; background: #1b1b2b; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.sc-hub svg { width: 28px; height: 28px; }
.sc-node { width: 46px; height: 46px; right: 85%; background: #f4efe4; color: var(--gold-2, #a67b01); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.sc-node svg { width: 20px; height: 20px; }
.sc-node.n1 { top: 22px; } .sc-node.n2 { top: 50%; } .sc-node.n3 { top: calc(100% - 22px); }
.go .sc-node { opacity: 1; }
.go .sc-node.n1 { transition-delay: 1s; } .go .sc-node.n2 { transition-delay: 1.15s; } .go .sc-node.n3 { transition-delay: 1.3s; }
.sc-cap { color: var(--text-2); margin: 0; }
@media (prefers-reduced-motion: reduce) { .sc-bar i, .sc-flow > svg path, .sc-node { transition: none !important; } }
/* نقاط الضوء على خطوط الواتساب */
.sc-dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; color: var(--sc-dot, #c9a24a); background: currentColor; box-shadow: 0 0 10px 3px currentColor; opacity: 0; pointer-events: none; z-index: 1; will-change: transform, opacity; }
.sc-hub { z-index: 2; }
.sc-hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.go .sc-hub::after { animation: scPulse 2.4s ease-out 1.6s infinite; }
@keyframes scPulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
.sc-node { z-index: 2; }
.sc-node.ping { animation: scPing .55s ease-out; }
@keyframes scPing { 0% { box-shadow: 0 6px 16px rgba(0, 0, 0, .1), 0 0 0 0 rgba(201, 162, 74, .5); } 40% { scale: 1.14; } 100% { scale: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .1), 0 0 0 14px rgba(201, 162, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .go .sc-hub::after { animation: none; } .sc-dot { display: none; } }
/* ألوان العرض الحي من الإعدادات */
#showcase .sc-hub { background: var(--sc-hub, var(--sc-hub-d, #1b1b2b)); color: var(--sc-hub-ic, var(--sc-hub-ic-d, #fff)); }
#showcase .sc-bar:not(.ok) i { background: var(--sc-bar1, var(--sc-bar1-d, #d4c08f)); }
#showcase .sc-bar.ok i { background: var(--sc-bar2, #9cc3a2); }
#showcase .sc-dot { color: var(--sc-dot, var(--sc-dot-d, #c9a24a)); }
#showcase .sc-node { background: var(--sc-node, #f4efe4); color: var(--sc-node-ic, var(--gold-2, #a67b01)); }
#showcase .sc-ic { color: var(--sc-node-ic, var(--gold-2, #a67b01)); }
/* بطاقة الردود: ردود مباشرة، لمعة الأشرطة، أعمدة الأيقونة */
.sc-card { position: relative; }
.sc-live { position: absolute; top: 1.3rem; inset-inline-end: 1.3rem; display: flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 99px; background: var(--card, #fff); border: 1px solid var(--hair); box-shadow: 0 8px 22px rgba(0, 0, 0, .1); font-size: .85rem; color: var(--text); white-space: nowrap; opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; z-index: 2; }
.sc-live b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; color: #fff; background: #3e9b62; }
.sc-live b.no { background: #b8565b; }
.sc-live.show { animation: scLive 2.6s ease forwards; }
@keyframes scLive { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 12%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.sc-stat b.bump, .sc-mini b.bump { display: inline-block; animation: scBump .6s ease; }
@keyframes scBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: #3e9b62; } 100% { transform: scale(1); } }
.sc-bar i { position: relative; overflow: hidden; }
.go .sc-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%); animation: scShine 3.2s ease-in-out 1.8s infinite; }
.go .sc-bar.ok i::after { animation-delay: 2.4s; }
@keyframes scShine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.sc-cb { transform-box: fill-box; transform-origin: 50% 100%; }
.go .sc-cb { animation: scCb 2.4s ease-in-out infinite; }
.go .sc-cb:nth-child(3) { animation-delay: .3s; } .go .sc-cb:nth-child(4) { animation-delay: .6s; } .go .sc-cb:nth-child(5) { animation-delay: .9s; }
@keyframes scCb { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@media (max-width: 420px) { .sc-live { top: 1rem; inset-inline-end: 1rem; font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .go .sc-bar i::after, .go .sc-cb { animation: none; } }