/* Shared UI kit: buttons, links, chips, rows, cards, forms, marquee, reveals. */

/* Arabic headings: Plex Arabic tops out at 700 */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-weight: 700; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease, color var(--dur-fast) ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-light { background: var(--cream); color: var(--green); }
.btn-light:hover { background: var(--cream-dim); }
.btn-dark { background: var(--green); color: var(--cream); }
.btn-dark:hover { background: var(--green-700); }
.btn-ghost { border: 1px solid rgb(250 247 242 / 0.5); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); }
.btn-cta { padding: 0.65rem 1.3rem; }

/* ---- Big arrow link ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-lg);
  font-weight: 700;
  margin-block-start: var(--space-4);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(6px); }
[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-6px); }
.link-arrow:hover { text-decoration: underline; }

/* ---- Chips ---- */
.chip {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.theme-invert .chip { border-color: rgb(250 247 242 / 0.35); }
a.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-soon { border-style: dashed; opacity: 0.7; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Headings & text helpers ---- */
.h-big {
  font-size: var(--text-2xl);
  max-inline-size: 26ch;
  margin-block: var(--space-2) var(--space-4);
}
.lead { font-size: var(--text-lg); max-inline-size: 55ch; }
.prose p { margin-block-end: var(--space-3); max-inline-size: 62ch; }

/* ---- Numbered rows (pains, guarantees, steps) ---- */
.numrows { display: grid; margin-block-start: var(--space-5); }
.numrow {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-lg);
  font-weight: 600;
}
.theme-invert .numrow { border-color: rgb(250 247 242 / 0.16); }
.numrow-num {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--accent);
}
[lang="ar"] .numrow-num { font-weight: 700; }

/* ---- Cards: reasons / models / units ---- */
.reasons-grid, .models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.reason, .model {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform var(--dur-fast) var(--ease-out);
}
.theme-invert .reason, .theme-invert .model { border-color: rgb(250 247 242 / 0.16); }
.reason:hover, .model:hover { transform: translateY(-4px); }
.reason h3, .model h3 { font-size: var(--text-lg); margin-block: var(--space-2); }
.reason p, .model p { font-size: var(--text-sm); opacity: 0.85; }

.units-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.unit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.theme-invert .unit-card { border-color: rgb(250 247 242 / 0.16); }
.unit-card:hover { transform: translateY(-4px); }
.unit-card.is-soon { opacity: 0.65; }
.unit-head { display: flex; align-items: baseline; gap: var(--space-3); }
.unit-num { font-size: var(--text-xl); font-weight: 800; color: var(--accent); }
.unit-name { font-size: var(--text-xl); }
.unit-line { margin-block: var(--space-2) var(--space-3); opacity: 0.85; }
.unit-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.unit-list { display: grid; gap: 0.5rem; font-size: var(--text-sm); }
.unit-list a:hover { text-decoration: underline; }

/* ---- Tick list ---- */
.ticklist { display: grid; gap: var(--space-2); }
.ticklist li { padding-inline-start: 1.6rem; position: relative; }
.ticklist li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  font-weight: 900;
  color: var(--accent);
}

/* ---- Service rows (listing) ---- */
.svc-rows { margin-block-start: var(--space-5); }
.svc-row a {
  display: grid;
  grid-template-columns: 4rem 1.2fr 2fr auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--line);
  transition: padding-inline-start var(--dur-fast) var(--ease-out);
}
.svc-row a:hover { padding-inline-start: var(--space-3); }
.svc-num { font-weight: 900; color: var(--accent); }
[lang="ar"] .svc-num { font-weight: 700; }
.svc-name { font-size: var(--text-xl); font-weight: 700; }
[lang="ar"] .svc-name { font-weight: 700; }
.svc-tag { font-size: var(--text-sm); opacity: 0.75; }
.svc-arrow { font-size: var(--text-xl); transition: transform var(--dur-fast) var(--ease-out); }
[dir="rtl"] .svc-arrow { transform: scaleX(-1); }
.svc-row a:hover .svc-arrow { transform: translateX(6px); }
[dir="rtl"] .svc-row a:hover .svc-arrow { transform: scaleX(-1) translateX(6px); }

/* ---- CTA band ---- */
.ctaband { background: var(--cream-dim); }
.ctaband-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---- Marquee ---- */
.marquee {
  overflow: hidden;
  background: var(--cream);
  color: var(--green);
  border-block: 1px solid var(--cream-line);
  padding-block: var(--space-3);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-seq {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline-end: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  white-space: nowrap;
}
[lang="ar"] .marquee-seq { font-weight: 700; }
.marquee-dot { opacity: 0.4; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Forms ---- */
.field { display: grid; gap: 0.4rem; margin-block-end: var(--space-4); }
.field label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); opacity: 0.7; }
[lang="ar"] .field label { text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--line);
  padding-block: 0.6rem;
  font-size: var(--text-base);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.check { display: flex; gap: 0.6rem; align-items: center; font-size: var(--text-sm); margin-block-end: var(--space-4); }
.check input { accent-color: var(--green); width: 1.1rem; height: 1.1rem; }
.hp { position: absolute; inset-inline-start: -9999px; height: 0; width: 0; opacity: 0; }
.form-msg { min-height: 1.4em; font-size: var(--text-sm); font-weight: 600; margin-block-start: var(--space-2); }
.form-msg.is-ok { color: var(--green-600); }
.theme-invert .form-msg.is-ok, .footer .form-msg.is-ok { color: var(--green-100); }
.form-msg.is-err { color: #a33; }

/* ---- Scroll reveals ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---- Split-text word animation ---- */
[data-split] .wo { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split] .w {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--i, 0ms);
}
[data-split].is-inview .w { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-split] .w { transform: none; }
}

@media (max-width: 60rem) {
  .reasons-grid, .models-grid { grid-template-columns: 1fr; }
  .units-grid { grid-template-columns: 1fr; }
  .svc-row a { grid-template-columns: 3rem 1fr auto; }
  .svc-tag { display: none; }
  .field-row { grid-template-columns: 1fr; }
}