/* Hallmark · صفحات الزبون الجديدة (الرئيسية، أعمالنا، تابع طلبك) · نفس ثيم amber-night · بدون عجقة: وجه واضح، إجراء واحد أساسي */

/* النافذة العلوية: روابط بدل «متاحين» */
.pill-nav .brand { text-decoration: none; color: var(--color-ink); }
.nav-links { display: flex; align-items: center; gap: var(--space-2xs); }
.nav-links a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); white-space: nowrap; }
.nav-links a:hover { color: var(--color-ink); background: var(--color-paper-3); }
.nav-links .nav-cta { background: var(--color-accent-soft); color: var(--color-accent); }

.stage { width: min(1040px, calc(100% - 32px)); margin: 0 auto; }

/* البطل: الوجه يمين والكلام يسار (بالموبايل فوق بعض) */
.persona-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding: var(--space-2xl) 0 var(--space-xl); }
.persona { margin: 0; display: grid; gap: var(--space-md); justify-items: center; }
.persona-frame { position: relative; width: min(100%, 340px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--color-paper-2); border: 1px solid var(--color-line);
  box-shadow: 0 30px 80px var(--color-bloom-1); transition: box-shadow var(--dur-med) var(--ease-out); }
.persona-frame video, .persona-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.persona-frame .v-talk { opacity: 0; transition: opacity 180ms linear; }
.persona[data-talk="1"] .persona-frame .v-talk { opacity: 1; }
/* للوجوه اللي صورة بس: نفَس خفيف، وحلقة لما يحكي */
.persona-frame img { animation: breathe 6s ease-in-out infinite; transform-origin: 50% 30%; }
.persona[data-talk="1"] .persona-frame { box-shadow: 0 0 0 4px var(--color-accent), 0 30px 90px var(--color-bloom-1); }
.persona[data-talk="1"] .persona-frame img { animation: talk 0.42s ease-in-out infinite alternate, breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1.01); } 50% { transform: scale(1.03); } }
@keyframes talk { from { filter: brightness(1); } to { filter: brightness(1.07); } }
@media (prefers-reduced-motion: reduce) { .persona-frame img { animation: none !important; } }
.persona figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; }
.persona figcaption strong { font-family: var(--font-display); font-size: var(--text-lg); }
.persona figcaption span { color: var(--color-ink-2); font-size: var(--text-sm); }
.ai-badge { margin-top: 4px; font-size: var(--text-xs) !important; color: var(--color-accent) !important; background: var(--color-accent-soft); padding: 2px 12px; border-radius: var(--radius-pill); }

.persona-copy { display: grid; gap: var(--space-md); justify-items: start; text-align: start; min-width: 0; }
.eyebrow { color: var(--color-live); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-xs); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); }
.persona-copy h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -0.015em; line-height: 1.2; max-width: 16ch; }
.persona-copy h1 em { font-style: normal; color: var(--color-accent); }
.persona-copy .lede { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 34rem; }
.actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-xs); }
.actions .call { --size: clamp(128px, 22vw, 160px); }
.write-link { text-decoration: none; }
.persona-copy .captions { text-align: start; min-height: 2.8em; }
.persona-copy .quick { max-width: 100%; }

/* الخطوة الجاية بعد الطلب / الملف / السعر */
.next { max-width: 100%; }
.next .btn { text-decoration: none; }

/* الدردشة بعرض مريح */
.stage .chat { margin: var(--space-xl) auto; max-width: 760px; }

/* روابط الصفحات الثانية */
.links-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 760px; margin: 0 auto var(--space-lg); }
.link-card { display: grid; gap: 4px; padding: var(--space-lg); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper-2); text-decoration: none; color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.link-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.link-card strong { font-family: var(--font-display); font-size: var(--text-lg); }
.link-card span { color: var(--color-ink-2); font-size: var(--text-sm); }
.center-note { margin: 0 auto var(--space-xl); text-align: center; }

/* ───────── صفحة داخلية (أعمالنا · تابع طلبك) ───────── */
.page { width: min(1040px, calc(100% - 32px)); margin: var(--space-xl) auto var(--space-3xl); display: grid; gap: var(--space-xl); }
.back { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
.back:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.page-head { display: grid; gap: var(--space-sm); }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-head p { color: var(--color-ink-2); max-width: 40rem; }

/* أعمالنا */
.cats { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.cats button { border: 1px solid var(--color-line); background: transparent; color: var(--color-ink-2); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.cats button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-lg); }
.show { display: grid; gap: var(--space-sm); min-width: 0; }
.show .frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--color-paper-2); border: 1px solid var(--color-line); }
.show .frame.wide { aspect-ratio: 16 / 9; }
.show .frame button { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: none; }
.show .frame img { width: 100%; height: 100%; object-fit: cover; }
.show .frame .play { position: absolute; inset: auto auto 12px 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; }
.show .frame .play::before { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--color-accent-ink); margin-inline-start: 3px; }
.show .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.show h3 { font-size: var(--text-md); line-height: 1.4; }
.show p { color: var(--color-ink-3); font-size: var(--text-xs); }

/* تابع طلبك */
.track-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-sm); align-items: end; max-width: 760px; }
.track-form label { display: grid; gap: 4px; font-size: var(--text-sm); color: var(--color-ink-2); }
.track-form input { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); min-width: 0; }
.ticket { display: grid; gap: var(--space-lg); padding: var(--space-xl); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper-2); max-width: 760px; }
.ticket h2 { font-size: var(--text-xl); }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.steps span { font-size: var(--text-xs); color: var(--color-ink-3); border-top: 4px solid var(--color-line); padding-top: 6px; text-align: center; }
.steps span.on { color: var(--color-ink); border-color: var(--color-accent); }
.kv { display: grid; gap: var(--space-xs); }
.kv p b { color: var(--color-ink); font-weight: 600; }
.kv p { color: var(--color-ink-2); }

@media (max-width: 760px) {
  .persona-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-xl); }
  .persona-frame { width: min(62vw, 260px); }
  .persona-copy { justify-items: center; text-align: center; }
  .persona-copy h1 { max-width: none; }
  .persona-copy .captions { text-align: center; }
  .actions { justify-content: center; }
  .links-row { grid-template-columns: minmax(0, 1fr); }
  .track-form { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-links a:not(.nav-cta) { display: none; }
}
.actions .call small { max-width: 78%; margin-inline: auto; line-height: 1.35; }
@media (max-width: 760px) { .actions .call { --size: 150px; } }
@media (max-width: 760px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } .show h3 { font-size: var(--text-sm); } }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-md); }
@media (max-width: 760px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-grid .link-card { padding: var(--space-md); } .tools-grid .link-card strong { font-size: var(--text-md); } }
@media (max-width: 760px) { .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; } .cats::-webkit-scrollbar { display: none; } }

/* إرفاق ملفات ودفع CliQ */
.attach { display: inline-grid; place-items: center; width: 42px; min-width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-line); color: var(--color-ink-2); cursor: pointer; }
.attach:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.attach:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.attach-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; justify-self: start; }
.attach-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.quick-row .attach-btn { grid-column: 1 / -1; justify-content: center; }
.pay-kv { display: grid; gap: 6px; }
.pay-kv p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.pay-kv span { color: var(--color-ink-2); font-size: var(--text-sm); }
.pay-kv b { font-family: var(--font-display); letter-spacing: .02em; }
.pay-kv .copy { border: 1px solid var(--color-line); background: transparent; color: var(--color-ink-2); border-radius: var(--radius-pill); padding: 0 10px; font-size: var(--text-xs); cursor: pointer; }
.files-list { display: grid; gap: 8px; }
.file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--color-line); border-radius: 10px; padding: 8px 12px; }
.file-row p { margin: 0; overflow-wrap: anywhere; min-width: 0; font-size: var(--text-sm); }

/* المالية */
.finance { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.finance > h2 { font-size: var(--text-xl); }
.fin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-kpis .kpi b { font-size: var(--text-xl); }
.fin-pkgs { display: grid; gap: 6px; }
.fin-pkgs h2 { font-size: var(--text-lg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 600px) { .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rev-text { font: inherit; color: inherit; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: 10px; padding: 10px 12px; width: 100%; }
.next .btn + .btn { margin-inline-start: 6px; }