/* =========================================================
   Venus AI — صفحة الهبوط ولوحة التطبيق
   صفحة الهبوط. مستقلة تمامًا عن app.css الخاص بلوحة التطبيق.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --bg: #04120B; --surf: #061A11; --surf-2: #082517; --panel: rgba(9,32,21,.9);
  --ink: #EAF4EE; --ink-1: #C4D6CB; --ink-2: #9BB4A6; --ink-3: #8AA396;
  --ac: #1FE85B; --ac-hi: #6BFF95; --ac-lo: #A9FFC2; --ac-2: #0FC748; --ac-3: #0A9A38; --ac-4: #07802E;
  --ac-txt: #9DF0B0; --ac-txt2: #D0FCDB; --on-ac: #04120B;
  --shadow: rgba(0,0,0,.9); --nav-bg: rgba(4,18,11,.82);
  --grid: rgba(31,232,91,.085); --grid-strong: rgba(31,232,91,.13);
  --sans: 'Inter', 'TheYearofHandicrafts', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --display: 'Space Grotesk', 'TheYearofHandicrafts', system-ui, sans-serif;
  --mono: 'Space Grotesk', 'TheYearofHandicrafts', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
  /* هندسة الحواف: صفائح شبه قائمة الزوايا بدل الكبسولات والبطاقات المستديرة */
  --r-slab: 3px; --r-in: 2px; --tick: 15px;
  --hair: color-mix(in srgb, var(--ink) 11%, transparent);
  --wrap: 1220px;
}
:root[data-theme="light"] {
  --bg: #F2F7F2; --surf: #FFFFFF; --surf-2: #E9F3EB; --panel: rgba(255,255,255,.94);
  --ink: #08210F; --ink-1: #29412F; --ink-2: #4B6254; --ink-3: #5C7467;
  --ac: #0A7D31; --ac-hi: #086427; --ac-lo: #065420; --ac-2: #0A7D31; --ac-3: #086427; --ac-4: #054A1C;
  --ac-txt: #075C22; --ac-txt2: #054A1C; --on-ac: #FFFFFF;
  --shadow: rgba(8,33,15,.16); --nav-bg: rgba(242,247,242,.86);
  --grid: rgba(10,125,49,.16); --grid-strong: rgba(10,125,49,.24);
}

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .55s ease, color .55s ease;
}
a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ac-hi); }
::selection { background: var(--ac); color: var(--on-ac); }
.mono { font-family: var(--mono); }
h1, h2, h3, h4 { font-family: var(--display); }

/* ---------- الزوايا المشطوفة ---------- */
/* ركنان متقابلان مقصوصان بزاوية 45°: أعلى-البداية وأسفل-النهاية.
   الحدّ يُرسم بطبقتين لأن clip-path يقصّ أي border عادي على القطر:
   خلفية العنصر نفسها هي لون الحدّ، و::before المقصوص للداخل هو الحشو.
   مقدار الإزاحة 3.4px يجعل سُمك الحدّ على القطر مساويًا لسُمكه على
   الأضلاع المستقيمة (1px ÷ جيب 45°). */
.service, .plan, .log-panel, .cta-box, .auth-panel, .method,
.btn-primary, .btn-ghost, .cta-btn, .cta-mail, .plan-cta, .nav-cta,
.auth-submit, .plan-badge {
  --cut: 18px;
  --shape-out: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                       calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --shape-in: polygon(calc(var(--cut) - 3.4px) 0, 100% 0, 100% calc(100% - var(--cut) + 3.4px),
                      calc(100% - var(--cut) + 3.4px) 100%, 0 100%, 0 calc(var(--cut) - 3.4px));
  border-radius: 0;
  clip-path: var(--shape-out);
}
/* في الاتجاه العربي يُقصّ الركنان المقابلان ليبقى القصّ في اتجاه القراءة */
[dir="rtl"] .service, [dir="rtl"] .plan, [dir="rtl"] .log-panel,
[dir="rtl"] .cta-box, [dir="rtl"] .auth-panel, [dir="rtl"] .method,
[dir="rtl"] .btn-primary, [dir="rtl"] .btn-ghost, [dir="rtl"] .cta-btn,
[dir="rtl"] .cta-mail, [dir="rtl"] .plan-cta, [dir="rtl"] .nav-cta,
[dir="rtl"] .auth-submit, [dir="rtl"] .plan-badge {
  --shape-out: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                       100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --shape-in: polygon(0 0, calc(100% - var(--cut) + 3.4px) 0, 100% calc(var(--cut) - 3.4px),
                      100% 100%, calc(var(--cut) - 3.4px) 100%, 0 calc(100% - var(--cut) + 3.4px));
}
/* طبقة الحشو: تحت المحتوى وفوق طبقة الحدّ */
.service::before, .plan::before, .log-panel::before, .cta-box::before,
.auth-panel::before, .method::before, .btn-ghost::before,
.cta-mail::before, .plan-cta::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  clip-path: var(--shape-in);
  transition: background .45s ease;
}
/* الخط الأخضر النابت على القصّة نفسها */
.service::after, .plan::after, .log-panel::after,
.cta-box::after, .auth-panel::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  top: var(--cut); left: 0; right: auto;
  width: calc(var(--cut) * 1.4143); height: 1.5px;
  background: var(--ac); opacity: .6;
  transform-origin: 0 0; transform: rotate(-45deg);
  transition: opacity .4s ease;
}
[dir="rtl"] .service::after, [dir="rtl"] .plan::after,
[dir="rtl"] .log-panel::after, [dir="rtl"] .cta-box::after,
[dir="rtl"] .auth-panel::after {
  top: 0; left: calc(100% - var(--cut)); right: auto;
  transform: rotate(45deg);
}

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; z-index: 99; padding: 10px 16px; border-radius: 999px; background: var(--ac); color: var(--on-ac); }

/* ---------- حركات الظهور ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .75s var(--ease);
}
[data-reveal="left"] { transform: translate3d(-28px, 12px, 0); }
[dir="rtl"] [data-reveal="left"] { transform: translate3d(28px, 12px, 0); }
[data-reveal="scale"] { transform: translateY(18px) scale(.97); }
[data-reveal="wipe"] { transform: translateY(28px); }
[data-reveal="fade"] { transform: none; }
[data-reveal].in, [dir="rtl"] [data-reveal].in { opacity: 1; transform: none; }
[data-line] { transform: scaleX(0); transform-origin: left center; transition: transform 1.15s var(--ease) .12s; }
[dir="rtl"] [data-line] { transform-origin: right center; }
[data-reveal].in [data-line] { transform: scaleX(1); }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] blockquote, [dir="rtl"] p,
[dir="rtl"] .kicker, [dir="rtl"] .auth-kicker, [dir="rtl"] .field-label,
[dir="rtl"] .auth-head-title, [dir="rtl"] .auth-step-count, [dir="rtl"] .auth-or,
[dir="rtl"] .mono { letter-spacing: 0 !important; }
[dir="rtl"] h1, [dir="rtl"] h2 { line-height: 1.35 !important; font-weight: 700; }
[dir="rtl"] blockquote { line-height: 1.7 !important; }
[dir="rtl"] .kicker, [dir="rtl"] .auth-kicker, [dir="rtl"] .field-label {
  text-transform: none; font-weight: 600;
}

@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- الخلفية ---------- */
.page { position: relative; width: 100%; min-height: 100vh; overflow-x: clip; overflow-y: visible; }
.bg-layer { position: fixed; pointer-events: none; z-index: 0; }

/* ---------- خلفية ماتريكس (لوح رسم خلف كل شيء) ---------- */
.matrix-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 1;
}
:root[data-theme="light"] .matrix-bg { opacity: 1; }
@media print { .matrix-bg { display: none; } }

/* الهالفتون: نفس خلفية لوحة التطبيق (app.css) حرفيًا، فالموقع كله بخلفية واحدة. */
.halftone { display: none; } /* استُبدل بلوح matrix.js */
.halftone {
  position: fixed; inset-inline: 0; top: 0; height: min(72vh, 720px);
  pointer-events: none; z-index: 0;
}
.halftone::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(var(--ac) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: .42;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 22%, rgba(0,0,0,.28) 52%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 22%, rgba(0,0,0,.28) 52%, transparent 88%);
}
.halftone::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 100% at 50% -12%,
    color-mix(in srgb, var(--ac-3) 30%, transparent) 0%,
    color-mix(in srgb, var(--ac-4) 12%, transparent) 38%,
    transparent 72%);
  filter: blur(26px);
}
:root[data-theme="light"] .halftone::before { opacity: .3; }


/* ---------- الهيدر (عايم) ---------- */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 14px 16px 0;
  pointer-events: none;
  transition: padding .35s var(--ease);
}
.nav-bar.stuck { padding-top: 10px; }
.nav-progress {
  display: none;
}
.nav {
  pointer-events: auto;
  max-width: min(var(--wrap), calc(100% - 0px));
  margin: 0 auto;
  padding: 10px 14px 10px 16px;
  display: flex; align-items: center; gap: 18px;
  border-radius: var(--r-slab);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--surf) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent) inset,
    0 18px 50px -28px var(--shadow),
    0 8px 24px -16px color-mix(in srgb, var(--ac) 28%, transparent);
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s var(--ease);
}
.nav-bar.stuck .nav {
  background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
  border-color: color-mix(in srgb, var(--ac) 22%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent) inset,
    0 22px 55px -26px var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--ac) 8%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15.5px; font-weight: 700; }
.brand:hover { color: var(--ink); }
.brand-mark {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-in);
  background: linear-gradient(150deg, var(--ac), var(--ac-4));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--ac) 70%, transparent);
}
.brand-mark i { width: 8px; height: 8px; border-radius: 2px; background: var(--on-ac); }
.brand-dot { color: var(--ac); }
.nav-spacer { flex: 1; }
.nav-links { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.nav-links a {
  color: inherit; padding: 8px 12px; border-radius: var(--r-in);
  transition: color .25s ease, background .25s ease;
}
.nav-links a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.icon-btn, .lang-btn {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-1); cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .25s var(--ease);
}
.icon-btn:hover, .lang-btn:hover {
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent);
  transform: translateY(-1px);
}
.icon-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-in); overflow: hidden; flex: 0 0 auto; }
.icon-btn span { display: block; font-size: 15px; line-height: 1; transition: transform .55s var(--ease), opacity .3s ease; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r-in);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0;
}
.nav-cta {
  --cut: 10px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: var(--ac); color: var(--on-ac); font-size: 13.5px; font-weight: 600;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--ac) 38%, transparent));
  transition: transform .25s var(--ease), background .25s ease;
}
.nav-cta:hover { transform: translateY(-2px); background: var(--ac-hi); color: var(--on-ac); }
.nav-login {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  padding: 8px 12px; border-radius: var(--r-in);
  transition: color .25s ease, background .25s ease;
}
.nav-login:hover {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 10%, transparent);
}

main { position: relative; z-index: 1; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 28px; }

/* ---------- انتقالات بين الصفحات (خفيف — بدون إخفاء المحتوى) ---------- */
html.page-ready:not(.page-leaving) main {
  animation: page-main-in .45s var(--ease) both;
}
html.page-ready:not(.page-leaving) .nav-bar .nav {
  animation: page-nav-in .4s var(--ease) both;
}
html.page-leaving main {
  animation: page-main-out .22s ease both;
  pointer-events: none;
}
html.page-leaving .nav-bar .nav {
  animation: page-nav-out .2s ease both;
  pointer-events: none;
}
html.page-leaving[data-leave="fwd"] main { --leave-x: 16px; }
html.page-leaving[data-leave="back"] main { --leave-x: -16px; }
[dir="ltr"] html.page-leaving[data-leave="fwd"] main { --leave-x: -16px; }
[dir="ltr"] html.page-leaving[data-leave="back"] main { --leave-x: 16px; }

@keyframes page-main-in {
  from { opacity: .92; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes page-nav-in {
  from { opacity: .9; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes page-main-out {
  to { opacity: .85; transform: translate3d(var(--leave-x, 12px), 6px, 0); }
}
@keyframes page-nav-out {
  to { opacity: .85; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  html.page-ready main,
  html.page-ready .nav-bar .nav,
  html.page-leaving main,
  html.page-leaving .nav-bar .nav {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* الهيرو والأقسام الأساسية تظهر حتى لو تأخّر سكربت الظهور */
.hero [data-reveal],
.services [data-reveal],
.plans [data-reveal],
.steps [data-reveal],
.faq-list [data-reveal],
.cta-box[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- الهيرو ---------- */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 176px 28px 96px; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-in);
  border: 1px solid color-mix(in srgb, var(--ac) 28%, transparent);
  background: color-mix(in srgb, var(--ac) 7%, transparent);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ac-txt);
}
.badge .dot {
  margin-inline-start: 8px; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ac); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ac) 90%, transparent);
}
.badge .tag { padding: 4px 9px; border-radius: var(--r-in); background: color-mix(in srgb, var(--ac) 14%, transparent); color: var(--ac-txt2); }
.hero h1 {
  margin: 30px auto 0; max-width: 15ch; font-size: clamp(42px, 7.8vw, 100px);
  line-height: .96; font-weight: 600; letter-spacing: -.045em; text-wrap: balance;
}
.grad {
  position: relative; display: inline-block;
  background: linear-gradient(100deg, var(--ac) 10%, var(--ac-lo) 45%, var(--ac-3) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.1em; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: .6;
}
.hero-sub { margin: 30px auto 0; max-width: 62ch; font-size: clamp(15px, 1.5vw, 18.5px); line-height: 1.68; color: var(--ink-2); }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.btn-primary {
  --cut: 12px;
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  background: linear-gradient(135deg, var(--ac), var(--ac-2)); color: var(--on-ac); font-size: 15px; font-weight: 600;
  filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--ac) 40%, transparent));
  transition: transform .3s var(--ease), filter .3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px); color: var(--on-ac);
  filter: drop-shadow(0 18px 32px color-mix(in srgb, var(--ac) 55%, transparent));
}
.btn-ghost {
  --cut: 12px;
  position: relative; display: inline-flex; align-items: center; padding: 15px 26px; border: 0;
  background: color-mix(in srgb, var(--ink) 17%, transparent);
  color: var(--ink); font-size: 15px; font-weight: 500;
  transition: background .3s ease, transform .3s var(--ease);
}
.btn-ghost::before { background: color-mix(in srgb, var(--surf) 90%, transparent); }
.btn-ghost:hover {
  background: color-mix(in srgb, var(--ac) 55%, transparent); transform: translateY(-2px); color: var(--ink);
}
.btn-ghost:hover::before { background: color-mix(in srgb, var(--ac) 8%, var(--surf)); }

/* ---------- لوحة سجل التنفيذ ---------- */
.log-panel {
  --cut: 32px;
  position: relative;
  margin: 74px auto 0; max-width: 1000px; border: 0;
  background: color-mix(in srgb, var(--ac) 26%, transparent);
}
.log-panel::before { background: color-mix(in srgb, var(--surf) 95%, transparent); }
.log-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.log-head .led { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.log-head .led.on { background: var(--ac); }
.log-title { margin-inline-start: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.log-live { font-family: var(--mono); font-size: 11.5px; color: var(--ac); }
.log-body { position: relative; padding: 26px 22px 30px; text-align: start; }
.scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 10%, transparent), transparent);
  animation: scanline 6.5s linear infinite;
}
.log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.log-card {
  padding: 2px 0 4px; border-radius: 0; border: 0;
  padding-inline-start: 15px; background: none;
  border-inline-start: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  transition: border-color .4s ease;
}
.log-card.now { border-inline-start-color: var(--ac); }
.log-card.next { border-inline-start-style: dashed; }
.log-day { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3); }
.log-card.now .log-day { color: var(--ac-txt); }
.log-label { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.log-card.next .log-label { color: var(--ink-2); }
.caret { display: inline-block; width: 8px; height: 15px; margin-inline-start: 5px; vertical-align: -2px; background: var(--ac); animation: blink 1.1s step-end infinite; }
.log-track { margin-top: 12px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.log-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--ac-2), var(--ac)); transition: width 2.2s var(--ease); }

/* ---------- ترويسات الأقسام ---------- */
.sec { max-width: var(--wrap); margin: 0 auto; padding: 112px 28px 0; }
.sec-lg { padding-top: 118px; }
.sec-head { max-width: 720px; }
.kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ac); }
.sec-head h2 { margin: 16px 0 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; font-weight: 600; letter-spacing: -.035em; }
.sec-head p { margin: 18px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-2); }

/* ---------- الخدمات ---------- */
.services { margin-top: 54px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.service {
  --cut: 24px;
  position: relative; padding: 32px 28px 36px; border: 0;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  transition: background .45s ease;
}
.service::before { background: color-mix(in srgb, var(--surf) 93%, transparent); }
.service:hover { background: color-mix(in srgb, var(--ac) 55%, transparent); }
.service:hover::before { background: color-mix(in srgb, var(--ac) 5%, var(--surf)); }
.service:hover::after { opacity: 1; }
.service-glyph {
  display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: var(--ink-3); transition: color .35s ease;
}
.service:hover .service-glyph { color: var(--ac); }
.service h3 { margin: 18px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.service p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.bullets { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-1); }
.bullet::before { content: ''; margin-top: 7px; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--ac); }

/* ---------- المراحل ---------- */
.steps { margin-top: 48px; display: flex; flex-direction: column; }
.step {
  position: relative; display: grid; grid-template-columns: minmax(0,132px) minmax(0,1fr) minmax(0,300px);
  gap: 26px; align-items: start; padding: 34px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  transition: background .4s ease;
}
.step:hover { background: color-mix(in srgb, var(--ac) 3.5%, transparent); }
.step-line { position: absolute; top: -1px; inset-inline-start: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--ac), transparent); }
.step-days { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ac); }
.step-title { font-size: clamp(22px, 2.6vw, 31px); font-weight: 600; letter-spacing: -.03em; }
.step p { margin: 10px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.step-out { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 11px; border-radius: var(--r-in);
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-1);
}
.steps-end { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------- المؤشرات ---------- */

/* ---------- الأسعار ---------- */
.plans { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.plan {
  --cut: 28px;
  position: relative; display: flex; flex-direction: column; padding: 36px 28px 30px;
  border: 0;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  transition: background .45s ease;
}
.plan::before { background: color-mix(in srgb, var(--surf) 93%, transparent); }
.plan:hover { background: color-mix(in srgb, var(--ac) 45%, transparent); }
/* الخطة المميّزة: حدّها كله أخضر وقصّتها كاملة الوضوح */
.plan.featured { background: var(--ac); }
.plan.featured::before { background: color-mix(in srgb, var(--ac) 9%, var(--surf)); }
.plan.featured::after { opacity: 1; }
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-name { font-size: 15px; font-weight: 600; }
.plan-badge {
  --cut: 7px;
  padding: 4px 10px; background: var(--ac); color: var(--on-ac);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; font-weight: 700;
}
.plan-price-row { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
.plan-price { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -.045em; }
.plan-unit { font-size: 13.5px; color: var(--ink-3); }
.plan p { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.plan-rule { margin: 24px 0 26px; height: 1px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.plan-features { display: flex; flex-direction: column; gap: 11px; }
.plan-feature { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--ink-1); }
.plan-feature::before { content: '\2713'; flex: 0 0 auto; margin-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--ac); }
.plan-fill { flex: 1; min-height: 26px; }
.plan-cta {
  --cut: 12px;
  position: relative; margin-top: 8px; display: block; padding: 14px; text-align: center;
  font-size: 14.5px; font-weight: 600; border: 0;
  background: color-mix(in srgb, var(--ink) 17%, transparent); color: var(--ink);
  transition: background .3s ease, filter .3s ease;
}
.plan-cta::before { background: color-mix(in srgb, var(--surf) 92%, transparent); }
.plan-cta:hover { background: color-mix(in srgb, var(--ac) 55%, transparent); }
.plan.featured .plan-cta { background: var(--ac); color: var(--on-ac); }
.plan.featured .plan-cta::before { background: var(--ac); }
.plan-cta:hover { transform: none; filter: brightness(1.12); color: var(--ink); }
.plan.featured .plan-cta:hover { color: var(--on-ac); }

/* ---------- الاقتباس ---------- */

/* ---------- الأسئلة ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px; align-items: start; }
/* قائمة مفصولة بخطوط شعرية بدل صندوق لكل سؤال */
.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hair); }
.faq {
  border-radius: 0; overflow: hidden; border: 0; background: none;
  border-bottom: 1px solid var(--hair);
  transition: background .35s ease;
}
.faq.open { background: none; }
.faq.open .faq-q { color: var(--ac-txt); }
.faq-q {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 21px 0;
  border: 0; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15.5px; font-weight: 500; text-align: start; line-height: 1.45; cursor: pointer;
}
.faq-q > span:not(.faq-sign) { flex: 1; min-width: 0; }
.faq-sign {
  flex: 0 0 20px;
  display: grid; place-items: center;
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  aspect-ratio: 1 / 1;
  border-radius: 0; border: 0; background: none;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 17px; font-weight: 400; line-height: 1;
  transform: rotate(0deg);
  transition: transform .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.faq-q:hover .faq-sign { color: var(--ac); }
.faq.open .faq-sign { transform: rotate(45deg); color: var(--ac); }
.faq-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s ease; }
.faq.open .faq-a { max-height: 320px; opacity: 1; }
.faq-a p { margin: 0; padding-block: 0 22px; padding-inline: 0 48px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

/* ---------- نداء الختام ---------- */
.cta-sec { padding-top: 128px; }
.cta-box {
  --cut: 46px;
  position: relative; padding: clamp(44px, 7vw, 92px) clamp(28px, 5vw, 64px); border: 0;
  background: color-mix(in srgb, var(--ac) 34%, transparent);
  text-align: center; overflow: hidden;
}
.cta-box::before {
  background: radial-gradient(ellipse 120% 140% at 50% 0%,
    color-mix(in srgb, var(--ac) 16%, transparent), transparent 60%), var(--bg);
}
.cta-box::after { opacity: 1; }
.cta-box .cta-grid {
  position: absolute; inset: -1px; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 70%);
}
.cta-badge {
  position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: var(--r-in);
  border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ac-txt);
}
.cta-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ac) 90%, transparent); }
.cta-box h2 { position: relative; margin: 26px auto 0; max-width: 24ch; font-size: clamp(32px, 5.6vw, 66px); line-height: 1.04; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.cta-box p { position: relative; margin: 22px auto 0; max-width: 54ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.cta-actions { position: relative; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }
.cta-btn {
  --cut: 13px;
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  background: var(--ac); color: var(--on-ac); font-size: 15.5px; font-weight: 600;
  filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--ac) 45%, transparent));
  transition: transform .3s var(--ease), background .3s ease;
}
.cta-btn:hover { transform: translateY(-2px); background: var(--ac-hi); color: var(--on-ac); }
.cta-mail {
  --cut: 13px;
  position: relative; display: inline-flex; align-items: center; padding: 16px 30px; border: 0;
  background: color-mix(in srgb, var(--ink) 19%, transparent);
  color: var(--ink); font-size: 15.5px; font-weight: 500;
  transition: background .3s ease, transform .3s var(--ease);
}
.cta-mail::before { background: var(--bg); }
.cta-mail:hover { background: color-mix(in srgb, var(--ac) 55%, transparent); transform: translateY(-2px); color: var(--ink); }

/* ---------- التذييل ---------- */
.foot {
  max-width: var(--wrap); margin: 118px auto 0; padding: 34px 28px 44px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.foot-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.foot-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-in); background: linear-gradient(150deg, var(--ac), var(--ac-4)); }
.foot-mark i { width: 7px; height: 7px; border-radius: 2px; background: var(--on-ac); }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.foot-links a { color: inherit; }
.foot-links a:hover { color: var(--ac); }

/* ---------- الشاشات الصغيرة ---------- */
@media (max-width: 900px) {
  .nav-links, .nav-login { display: none; }
  .nav { gap: 10px; padding: 8px 10px 8px 12px; }
  .hero { padding-top: 132px; }
  .step { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .faq-grid { gap: 28px; }
  .services { grid-template-columns: 1fr; gap: 0; }
  .service { padding: 26px 0 30px; }
}
@media (max-width: 600px) {
  .wrap, .sec, .hero, .foot { padding-inline: 18px; }
  .nav-bar { padding: 10px 12px 0; }
  .nav { gap: 8px; max-width: 100%; }
  .hero { padding-top: 118px; padding-bottom: 64px; }
  .sec, .sec-lg, .cta-sec { padding-top: 84px; }
  .log-panel { margin-top: 48px; }
  .foot { margin-top: 76px; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .lang-btn span:first-child { display: none; }
}

/* =========================================================
   الأوث — شاشة اختيار الطريقة ثم خطوات
   نفس لغة صفحة الهبوط (الأخضر): mono kickers، حدود رفيعة،
   توهّج نحو الأكسنت عند التفاعل. تدعم الوضعين والاتجاهين.
   ========================================================= */
.auth-main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 108px 28px 56px; }
.auth-col { width: 100%; max-width: 496px; }

/* اللوحة */
.auth-panel {
  --cut: 30px;
  position: relative; border: 0;
  background: color-mix(in srgb, var(--ac) 26%, transparent);
}
.auth-panel::before { background: color-mix(in srgb, var(--surf) 95%, transparent); }
.auth-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.auth-head .led { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.auth-head .led.on { background: var(--ac); }
.auth-head-title { margin-inline-start: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.auth-step-count { font-family: var(--mono); font-size: 11.5px; color: var(--ac); letter-spacing: .08em; }
.auth-body { position: relative; padding: 34px 30px 32px; text-align: start; overflow: hidden; }

/* العنوان */
.auth-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ac); }
.auth-body h1 { margin: 14px 0 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; }
.auth-lede { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* مؤشر الخطوات */
.auth-track { display: flex; align-items: center; gap: 6px; margin-top: 22px; }
.auth-track i {
  height: 3px; flex: 1; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  transform-origin: right center;
}
[dir="ltr"] .auth-track i { transform-origin: left center; }
.auth-track i.on {
  background: linear-gradient(90deg, var(--ac-2), var(--ac));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--ac) 75%, transparent);
  transform: scaleX(0);
  opacity: 1;
}
.auth-panel.is-in .auth-track i.on {
  animation: auth-track-fill .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

/* انتقالات خطوات الأوث */
.auth-stage {
  --slide: 36px;
  will-change: transform, opacity, filter;
}
.auth-panel[data-enter="fwd"] .auth-stage {
  opacity: 0; transform: translate3d(var(--slide), 10px, 0) scale(.985); filter: blur(8px);
}
.auth-panel[data-enter="back"] .auth-stage {
  opacity: 0; transform: translate3d(calc(var(--slide) * -1), 10px, 0) scale(.985); filter: blur(8px);
}
[dir="ltr"] .auth-panel[data-enter="fwd"] .auth-stage {
  transform: translate3d(calc(var(--slide) * -1), 10px, 0) scale(.985);
}
[dir="ltr"] .auth-panel[data-enter="back"] .auth-stage {
  transform: translate3d(var(--slide), 10px, 0) scale(.985);
}
.auth-panel.is-in .auth-stage {
  animation: auth-stage-in .62s var(--ease) both;
}
.auth-panel.is-out .auth-stage {
  animation: auth-stage-out .34s ease both;
  pointer-events: none;
}
.auth-panel.is-out[data-leave="fwd"] .auth-stage { --out-x: -28px; }
.auth-panel.is-out[data-leave="back"] .auth-stage { --out-x: 28px; }
[dir="ltr"] .auth-panel.is-out[data-leave="fwd"] .auth-stage { --out-x: 28px; }
[dir="ltr"] .auth-panel.is-out[data-leave="back"] .auth-stage { --out-x: -28px; }

.auth-panel.is-in .auth-stage > * {
  animation: auth-item-in .55s var(--ease) both;
  animation-delay: calc(var(--stagger, 0) * 55ms + 80ms);
}
.auth-panel.is-in .auth-head .led.on {
  animation: auth-led-pulse 1.4s ease-in-out infinite;
}

@keyframes auth-stage-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes auth-stage-out {
  to { opacity: 0; transform: translate3d(var(--out-x, -24px), 8px, 0) scale(.98); filter: blur(6px); }
}
@keyframes auth-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes auth-track-fill {
  from { transform: scaleX(0); opacity: .35; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes auth-led-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ac) 18%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel[data-enter] .auth-stage,
  .auth-panel.is-in .auth-stage,
  .auth-panel.is-out .auth-stage,
  .auth-panel.is-in .auth-stage > *,
  .auth-panel.is-in .auth-track i.on,
  .auth-panel.is-in .auth-head .led.on {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* أزرار اختيار الطريقة */
.methods { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.method {
  position: relative; display: flex; align-items: center; gap: 15px; width: 100%;
  --cut: 16px;
  padding: 17px 18px; text-align: start; border: 0;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  color: var(--ink);
  transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.method:hover {
  transform: none; color: var(--ink);
  background: color-mix(in srgb, var(--ac) 55%, transparent);
}
.method::before { background: color-mix(in srgb, var(--surf) 93%, transparent); }
.method:hover::before { background: color-mix(in srgb, var(--ac) 6%, var(--surf)); }
.method:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.method-glyph {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-in);
  border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent);
  background: color-mix(in srgb, var(--ac) 9%, transparent); color: var(--ac);
}
.method-glyph svg { width: 21px; height: 21px; }
.method-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.method-title { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.method-sub { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.method-go { flex: 0 0 auto; font-family: var(--mono); font-size: 15px; color: var(--ink-3); transition: color .3s ease, transform .35s var(--ease); }
.method:hover .method-go { color: var(--ac); transform: translateX(-4px); }
[dir="ltr"] .method:hover .method-go { transform: translateX(4px); }

/* فاصل */
.auth-or { margin: 22px 0; display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* الحقول */
.auth-form { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.field-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.field-input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-slab);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink); font-family: var(--sans); font-size: 15px; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.field-input::placeholder { color: var(--ink-3); opacity: .75; }
.field-input:focus {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  background: color-mix(in srgb, var(--ac) 5%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 16%, transparent);
}
.field-hint { margin-top: 7px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

/* حقل الهاتف */
.phone-row { display: flex; gap: 10px; direction: ltr; }
.phone-row .field-input { flex: 1; }
.phone-cc {
  flex: 0 0 118px; height: 52px; padding: 0 12px; border-radius: var(--r-slab);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink); font-family: var(--mono); font-size: 13.5px; outline: none; cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.phone-cc:focus { border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 16%, transparent); }
.phone-cc option { background: var(--surf); color: var(--ink); }

/* خانات الكود */
.otp { display: flex; gap: 10px; direction: ltr; justify-content: space-between; }
.otp input {
  flex: 1; min-width: 0; height: 62px; padding: 0; border-radius: var(--r-slab); text-align: center;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink); font-family: var(--mono); font-size: 25px; font-weight: 500; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s var(--ease);
}
.otp input::-webkit-outer-spin-button, .otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp input:focus {
  border-color: color-mix(in srgb, var(--ac) 60%, transparent);
  background: color-mix(in srgb, var(--ac) 7%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 16%, transparent); transform: translateY(-2px);
}
.otp input.filled { border-color: color-mix(in srgb, var(--ac) 34%, transparent); color: var(--ac-txt2); }

/* أزرار النموذج */
.auth-submit {
  --cut: 13px;
  width: 100%; height: 54px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--ac), var(--ac-2)); color: var(--on-ac);
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--ac) 40%, transparent));
  transition: transform .3s var(--ease), filter .3s ease, opacity .3s ease;
}
.auth-submit:hover { transform: translateY(-2px); filter: drop-shadow(0 18px 32px color-mix(in srgb, var(--ac) 55%, transparent)); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.auth-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3);
  transition: color .3s ease;
}
.auth-back:hover { color: var(--ac); }
.auth-back span { font-size: 13px; }

/* تنبيهات */
.auth-alert {
  margin-top: 22px; display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--r-slab); font-size: 13.5px; line-height: 1.6;
  border: 1px solid color-mix(in srgb, #FF6B5B 40%, transparent);
  background: color-mix(in srgb, #FF6B5B 10%, transparent); color: #FF9F94;
}
:root[data-theme="light"] .auth-alert { color: #B0301F; }
.auth-alert::before { content: '!'; flex: 0 0 auto; display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-family: var(--mono); font-size: 11px;
  background: color-mix(in srgb, #FF6B5B 22%, transparent); }
.auth-note {
  margin-top: 20px; padding: 13px 15px; border-radius: var(--r-slab);
  border: 1px dashed color-mix(in srgb, var(--ac) 34%, transparent);
  background: color-mix(in srgb, var(--ac) 7%, transparent);
  font-size: 13px; line-height: 1.65; color: var(--ac-txt);
}
.auth-note b { font-family: var(--mono); font-size: 17px; letter-spacing: .22em; color: var(--ac); }

/* أسفل اللوحة */
.auth-foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-3); }
.auth-foot a { color: var(--ac); }
.auth-foot a:hover { color: var(--ac-hi); }
.auth-resend { border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ac); transition: color .3s ease; }
.auth-resend:disabled { color: var(--ink-3); cursor: not-allowed; }
.auth-legal { margin-top: 26px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.auth-legal a { color: var(--ink-2); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.auth-legal a:hover { color: var(--ac); border-bottom-color: var(--ac); }

/* شريط الثقة تحت اللوحة */
.auth-aside { margin-top: 22px; display: flex; align-items: center; gap: 12px; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); flex-wrap: wrap; }
.auth-aside i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ac) 80%, transparent); }

@media (max-width: 600px) {
  .auth-main { padding: 96px 18px 40px; }
  .auth-body { padding: 28px 20px 26px; }
  .otp { gap: 7px; }
  .otp input { height: 54px; font-size: 21px; }
  .phone-cc { flex-basis: 100px; }
}