/* =====================================================================
   DEV MENU — صفحة الهبوط بشكل shadcn/ui (تجربة على الستيجنق، نفس لوحة التحكم)
   للرجوع: احذف سطر <link> هذا الملف من index.html
   ===================================================================== */
:root { --brand: #233d2c; --brand-dark: #1a2e21; --ink: #233d2c; --sand: #f8fafc; --muted: #64748b; --line: #e2e8f0;
  --gold: #3f7a4a; --gold-deep: #3f7a4a;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05); --shadow-button: 0 1px 2px rgba(15, 23, 42, .05); --shadow-primary: 0 1px 2px rgba(15, 23, 42, .1); }
body { background: #f8fafc !important; color: #233d2c !important; }
::selection { background: #233d2c; color: #fff; }
:focus-visible { outline: 2px solid #94a3b8 !important; outline-offset: 2px; }

/* الشريط العلوي */
.topbar nav { background: rgba(255, 255, 255, .85) !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 4px 16px -8px rgba(15, 23, 42, .15) !important; }
.topbar a.lnk { color: #64748b !important; font-weight: 500 !important; }
.topbar a.lnk:hover { color: #233d2c !important; background: #f1f5f9 !important; }
.topbar a.lnk:active { color: #fff !important; background: #233d2c !important; }

/* الأزرار */
.btn { border-radius: 8px !important; font-weight: 600 !important; }
.btn-main { background: #233d2c !important; color: #fff !important; box-shadow: var(--shadow-primary) !important; }
.btn-main:hover { background: #1a2e21 !important; }
.btn-soft { background: #fff !important; border: 1px solid #e2e8f0 !important; box-shadow: var(--shadow-button) !important; color: #233d2c !important; }
.btn-soft:hover { background: #f8fafc !important; color: #233d2c !important; }
.btn-gold { background: #3f7a4a !important; color: #fff !important; box-shadow: var(--shadow-primary) !important; }
.pill { color: #3f7a4a !important; background: #f0f7f1; border: 1px solid #cfe3d3; border-radius: 999px; padding: 4px 12px; }

/* العناوين */
.hero-h, .h2 { color: #233d2c; letter-spacing: -.02em; }
.hero-h em { color: #233d2c !important; }
.h2 em { color: #3f7a4a !important; }
.lead, .sub { color: #64748b !important; }

/* البطاقات: أبيض، إطار رفيع، حواف 12 */
.prod, .after, .cmp, details.q, .reg, .price-chip, .demo, .biz {
  background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: var(--shadow-card) !important;
}
.prod:hover, .biz:hover { box-shadow: 0 6px 20px -8px rgba(15, 23, 42, .15) !important; }
.reg, .demo { box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .2) !important; }
.prod-ic { border-radius: 12px !important; }
.prod li i, .cmp-row .yes i { color: #16a34a !important; }
.prod .from { border-top: 1px solid #f1f5f9 !important; }
.biz-ic { background: #dbeafe !important; color: #2563eb !important; border-radius: 10px !important; }
.biz:nth-child(4n+2) .biz-ic { background: #dcfce7 !important; color: #16a34a !important; }
.biz:nth-child(4n+3) .biz-ic { background: #fef3c7 !important; color: #d97706 !important; }
.biz:nth-child(4n+4) .biz-ic { background: #ede9fe !important; color: #7c3aed !important; }

/* التجربة والتبويبات */
.tabs { background: #f1f5f9 !important; border-radius: 10px !important; }
.tabs button { border-radius: 7px !important; color: #64748b !important; font-weight: 500 !important; }
.tabs button:hover { background: rgba(255, 255, 255, .6) !important; color: #233d2c !important; }
.tabs button[aria-selected="true"] { background: #fff !important; color: #233d2c !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .1) !important; }
.phone { border-radius: 24px !important; box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .35) !important; }
.ring-card { background: #f8fafc !important; border: 1px solid #e2e8f0; border-radius: 12px !important; }
.ring-ic { background: #dbeafe !important; color: #2563eb !important; border-radius: 10px !important; }
.logos span { border-radius: 12px !important; border-color: #e2e8f0 !important; }

/* كيف يعمل */
.step-row { border-color: #e2e8f0 !important; }
.step-n { width: 32px; height: 32px; min-width: 32px !important; padding: 0 !important; border-radius: 999px; display: grid; place-items: center; background: #233d2c; color: #fff !important; font-size: 14px !important; }

/* الأسعار: قسم كحلي غامق */
.dark { background: #233d2c !important; border-radius: 16px !important; color: #f8fafc !important; }
.dark .sub { color: #94a3b8 !important; }
.period { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .1) !important; border-radius: 10px !important; }
.period button { border-radius: 7px !important; color: #94a3b8 !important; font-weight: 500 !important; }
.period button[aria-pressed="true"] { background: #fff !important; color: #233d2c !important; font-weight: 600 !important; }
.period small { color: #4ade80 !important; }
.preset { border-color: rgba(255, 255, 255, .15) !important; color: #cbd5e1 !important; font-weight: 500 !important; border-radius: 8px !important; }
.preset[aria-pressed="true"] { background: #fff !important; color: #233d2c !important; border-color: #fff !important; }
.feat-pick { background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 12px !important; }
.feat-pick[aria-checked="true"] { background: rgba(255, 255, 255, .07) !important; border-color: #fff !important; }
.feat-pick .box { border-radius: 6px !important; }
.feat-pick[aria-checked="true"] .box { background: #fff !important; border-color: #fff !important; color: #233d2c !important; }
.feat-pick p, .feat-pick .pr small { color: #94a3b8 !important; }
.summary { background: #fff !important; border-radius: 12px !important; }
.summary .disc { color: #16a34a !important; }
.after .n { background: #233d2c !important; border-radius: 999px !important; }

/* المقارنة والأسئلة */
.cmp-row { border-color: #e2e8f0 !important; }
.cmp-row .yes { background: #f8fafc !important; }
details.q summary { font-weight: 600 !important; }
details.q .faq-list li::before { background: #94a3b8 !important; }

/* التسجيل */
.lbl { font-weight: 500 !important; color: #233d2c; }
.field, .type-chip, .sector, .otp-box { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }
.field:focus, .otp-box:focus { border-color: #94a3b8 !important; box-shadow: 0 0 0 3px rgba(148, 163, 184, .3) !important; }
.type-chip, .sector { font-weight: 500 !important; color: #233d2c !important; }
.peer:checked + .type-chip, .sector[aria-checked="true"], .otp-box.filled { background: #233d2c !important; border-color: #233d2c !important; color: #fff !important; }
.chosen { background: #f8fafc !important; border: 1px solid #e2e8f0; border-radius: 10px !important; }
.disc-note { color: #16a34a !important; }
.toast { background: #233d2c !important; border-radius: 10px !important; }
/* داخل قسم الأسعار الأخضر: الكلمة الملوّنة فاتحة عشان تنقرأ */
.dark .h2 em, .dark .pill { color: #a7d7ae !important; }
.dark .pill { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); }
/* قسم الأسعار الأخضر: كل الكتابة بيضاء، والوصف أبيض أخف (الملخص الأبيض يبقى كتابته غامقة) */
.dark { color: #fff !important; }
.dark :is(h2, h3, .h2, .h2 em, b, strong):not(.summary *) { color: #fff !important; }
.dark :is(.sub, p, small, .feat-pick p, .feat-pick .pr small):not(.summary *) { color: rgba(255, 255, 255, .75) !important; }
.dark .feat-pick, .dark .feat-pick .pr { color: #fff !important; }
.dark .period button[aria-pressed="false"], .dark .preset[aria-pressed="false"] { color: rgba(255, 255, 255, .8) !important; }
.dark .period button[aria-pressed="true"] small { color: #3f7a4a !important; }
.dark .period button[aria-pressed="false"] small { color: #a7d7ae !important; }
.dark .pill { color: #fff !important; }
.dark .h2 em { color: #fff !important; }
.dark .h2 span, .dark .h2 [class*="text-"] { color: #fff !important; }