:root {
  --ink: #101418;
  --ink-soft: #3d4852;
  --paper: #f7f4ee;
  --card: #fffdf9;
  --accent: #0e5a4a;
  --accent-soft: #e5f0ed;
  --line: #e0dcd3;
  --gold: #ac8a3e;
  --danger: #b42318;
  --shadow: 0 12px 40px rgba(16, 20, 24, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceae4;
    --ink-soft: #b3b0a7;
    --paper: #12151a;
    --card: #1a1e24;
    --accent: #4bbf9f;
    --accent-soft: #16241f;
    --line: #2a2e35;
    --gold: #d6b060;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(14, 90, 74, 0.12), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgba(185, 138, 47, 0.10), transparent 55%),
    var(--paper);
  color: var(--ink);
  line-height: 1.9;
}
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

header {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
}
header .wrap,
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .3px;
  text-decoration: none; color: var(--ink);
  flex: 0 0 auto;
}
.brand .dot { color: var(--accent); }
.nav {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.nav a {
  text-decoration: none; color: var(--ink-soft); font-size: .92rem; font-weight: 600;
}
.nav a:hover { color: var(--accent); }
.nav .lang {
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px;
}

.hero { padding: 10px 0 6px; }
.launch-banner {
  background: #0f172a;
  color: #e2e8f0;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 12px;
  letter-spacing: .01em;
}
.launch-banner[hidden] { display: none; }
.auth-box {
  max-width: 22rem;
  margin: 24px auto 48px;
  padding: 0;
}
.auth-box h1 { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; }
.auth-box .hint { color: var(--ink-soft); font-size: .9rem; margin-bottom: 16px; }
.auth-box label { display: block; font-size: .82rem; font-weight: 700; margin: 12px 0 4px; }
.auth-box input, .auth-box select, .auth-box textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  background: #fff;
}
.auth-box .btn { width: 100%; margin-top: 16px; cursor: pointer; }
.auth-box .err { color: #b91c1c; font-size: .85rem; margin-top: 10px; min-height: 1.2em; }
.auth-box .alt { margin-top: 14px; font-size: .9rem; }

.pw-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-field input {
  padding-inline-end: 2.6rem;
}
.pw-toggle {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
}
.pw-toggle:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.pw-toggle.is-on { color: var(--accent); }
.pw-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }

.auth-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  color: var(--ink);
}
.auth-check input {
  width: auto !important;
  margin: 0;
  accent-color: var(--accent);
}
.auth-check-ico {
  display: inline-flex;
  color: var(--accent);
}
.auth-check-ico svg { width: 1.05rem; height: 1.05rem; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-social-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-box .btn.auth-social {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 700;
}
.auth-box .btn.auth-social:hover {
  border-color: var(--accent);
}
.auth-google-host {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.auth-social-hint {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.portal-svc { margin-top: 8px; }
.portal-svc .svc-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.live-pill {
  font-size: .68rem;
  font-weight: 800;
  color: #047857;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
button.live-pill-btn {
  border: 1px solid #a7f3d0;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  color: #047857;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
button.live-pill-btn:hover {
  background: #d1fae5;
  border-color: #34d399;
}
.portal-order-strip {
  margin: 18px 0 8px;
  max-width: 28rem;
}
.portal-order-title {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
}
.portal-order-strip label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 4px;
}
/* The note box inherited body line-height 1.9, so rows="3" rendered a 111px
   slab that swallowed the order strip on both desktop and mobile (owner,
   2026-08-01). Two lines is the honest default for "your note / site URL";
   it grows with what you type, and stops at ~7 lines so it can never take the
   screen again. .portal-order-strip textarea is the only textarea styled by
   this rule, so nothing else moves. */
.portal-order-strip textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  line-height: 1.5;
  min-height: 3rem;                /* two typed lines + padding */
  max-height: 11rem;               /* never more than ~7 lines */
  overflow-y: auto;
  resize: vertical;
  background: #fff;
}
.price-basis {
  display: inline-block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--ink-soft);
}
/* A client's note is arbitrary text. A pasted URL with tracking parameters is
   one unbreakable token, and it pushed the order card past the page edge on
   the live portal (owner screenshot 2026-08-01). */
.portal-order-note {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.portal-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.portal-order-actions .btn {
  width: auto;
  margin-top: 0;
  cursor: pointer;
}
.portal-commercial-state {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 76%, var(--paper));
  overflow-wrap: anywhere;
}
.portal-commercial-state h4 { margin: 0 0 8px; }
.portal-commercial-state p { margin: 6px 0; }
.portal-commercial-state ul { margin: 4px 0 8px; }
.portal-rewrite-page{margin:.75rem 0;padding:.7rem;border:1px solid rgba(128,128,128,.28);border-radius:10px}
.portal-rewrite-page summary{cursor:pointer;font-weight:700;overflow-wrap:anywhere}
.portal-rewrite-code{max-height:18rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left;padding:.75rem;border-radius:8px;background:#111827;color:#f8fafc;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.portal-sandbox-label {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-weight: 800;
  font-size: .8rem;
}
.portal-ops-panel {
  margin-top: 14px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.portal-ops-panel > summary { cursor: pointer; font-weight: 800; }
.portal-ops-field { display: grid; gap: 4px; margin-top: 9px; }
.portal-ops-field span { font-size: .8rem; font-weight: 700; }
.portal-ops-field input,
.portal-ops-field select,
.portal-ops-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.portal-ops-field textarea { min-height: 4rem; resize: vertical; }

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 20px; padding: 4px 12px; margin-bottom: 16px;
}
.ride {
  display: inline-block;
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0;
  letter-spacing: 0.02em;
}
/* One formal headline block — no «اركب معنا» / Ride with us */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.28;
  margin: 0;
  max-width: 28ch;
}
.ride-same,
.hero-rest {
  font-size: 1em;
  font-weight: 800;
  line-height: inherit;
}
.ride-same { color: var(--accent); }
.hero-rest { color: var(--ink); }
.hero-rest em { font-style: normal; color: var(--accent); }
.ride-line, .hero-sub {
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
}
.hint-assist {
  margin-top: 28px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 600;
}
.badge-inline {
  color: var(--ink-soft); font-size: .82rem;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
}
.hero h1 {
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  font-weight: 800; line-height: 1.4; max-width: 28ch;
}
.hero h1.hero-title {
  max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { margin-top: 6px; max-width: 54ch; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border-radius: 999px; padding: 10px 18px;
  font-weight: 700; font-size: .95rem; border: 1px solid transparent;
  cursor: pointer;
}
/* `.primary` and `.ghost` existed ONLY under `.svc-actions`, so every button
   outside a service card fell back to inherited colour — including «دخول»,
   which is the single most prominent action on the home page, rendered as
   grey text on a transparent border (measured live 2026-08-01). A brand
   button must look like one wherever it stands. */
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.lang-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--card);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
}
.lang-pick .lang-ico {
  font-size: .78rem;
  opacity: .7;
  letter-spacing: -0.04em;
}
.lang-pick select {
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding: 0;
  max-width: 7.5rem;
}
.btn.btn-nav {
  padding: 6px 14px;
  font-size: .85rem;
}
.btn.ghost.btn-nav { background: transparent; }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 4px 12px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 20px; font-size: .8rem; font-weight: 600;
}
.status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

.services { padding: 4px 0 36px; }
.services-title, .services h2, .dropped h2, .how h2 {
  font-size: 1.05rem; margin-bottom: 2px; font-weight: 800;
}
.section-lead { color: var(--ink-soft); margin-bottom: 4px; max-width: 52ch; font-size: .86rem; line-height: 1.45; }

/* Dense Linear/Vercel-style stack — text + hairlines, no boxes, no numbers */
.svc-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 36rem;
}
.svc-row {
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.svc-row:hover .svc-body h3 { color: var(--accent); }
.svc-body { max-width: 36rem; }
.svc-body h3 {
  font-size: .95rem;
  font-weight: 750;
  margin: 0;
  color: var(--ink);
  display: inline;
  line-height: 1.35;
}
.svc-role-inline {
  font-size: .65rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-inline-start: 6px;
  vertical-align: baseline;
  white-space: nowrap;
}
.svc-body p {
  margin: 1px 0 0;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}
.svc-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.svc-link:hover .svc-body h3 { color: var(--accent); }
.svc-cta { margin-top: 8px; }
.svc-cta a {
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
}
.svc-cta a:hover { text-decoration: underline; }
.svc-detail-list .svc-row { scroll-margin-top: 88px; }
.svc-more { margin-top: 12px; }
.svc-more a {
  font-weight: 800;
  text-decoration: none;
  font-size: .95rem;
}
.svc-more a:hover { text-decoration: underline; }

.hero-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
  align-items: start;
}
.hero-main { min-width: 0; }
@media (max-width: 720px) {
  .hero-wrap { grid-template-columns: 1fr; }
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.grid-3, .grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.grid-3, .grid.grid-4 { grid-template-columns: 1fr; }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
}
.card.featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow);
}
.tag {
  display: inline-block; font-size: .7rem; font-weight: 800;
  border-radius: 999px; padding: 2px 8px; margin-bottom: 6px;
}
.tag.keep { background: var(--accent-soft); color: var(--accent); }
.tag.new { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.card h3 { font-size: 1rem; margin-bottom: 4px; }
.promise { color: var(--ink-soft); margin-bottom: 0; font-size: .9rem; line-height: 1.65; }
.card ul { margin: 0 18px 12px 0; color: var(--ink-soft); font-size: .92rem; }
.fit { font-size: .86rem; color: var(--ink-soft); }
.card-link { font-weight: 800; text-decoration: none; }

.dropped { padding: 8px 0 48px; }
.drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 14px;
}
.drop-grid > div {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 16px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.drop-grid h3 { font-size: .98rem; margin-bottom: 6px; }
.drop-grid p { color: var(--ink-soft); font-size: .9rem; }

.how { padding: 0 0 80px; }
.steps {
  margin: 14px 22px 0 0;
  color: var(--ink-soft);
}
.steps li { margin-bottom: 8px; }

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  font-size: .9rem; color: var(--ink-soft);
}
footer .wrap {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
}
.footer-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
footer a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* Shape feedback — client steers look */
.shape-feedback { position: relative; }
.sf-open {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}
.sf-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(320px, 86vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 40;
}
.sf-title { font-weight: 800; margin-bottom: 8px; }
.sf-panel label {
  display: block; font-size: .82rem; margin: 8px 0 4px; color: var(--ink-soft);
}
.sf-panel input, .sf-panel select, .sf-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.sf-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sf-send, .sf-cancel {
  border-radius: 999px; border: 1px solid var(--line);
  padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 700;
}
.sf-send { background: var(--accent); color: #fff; border-color: var(--accent); }
.sf-status { margin-top: 8px; font-size: .8rem; color: var(--ink-soft); }

/* Smart assistant — 58×58; left/top ONLY from JS. Never pin sides in CSS (breaks under-Login + free float). */
.store-employee,
.store-employee.float-icon,
.store-employee.in-header,
.store-employee.dock-content,
.store-employee.float-mid {
  position: fixed !important;
  margin: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 72px !important;
  height: auto !important;
  min-height: 58px;
  max-width: 88px !important;
  overflow: visible !important;
  pointer-events: none;
  transform: none !important;
}
.store-employee.is-dragging {
  opacity: 0.92;
  cursor: grabbing;
}
@media (max-width: 480px) {
  html[dir="rtl"] body { padding-right: 80px; }
  html[dir="ltr"] body { padding-left: 80px; }
  .store-employee,
  .store-employee.float-icon,
  .store-employee.in-header,
  .store-employee.dock-content,
  .store-employee.float-mid {
    min-height: 48px;
  }
  .se-launcher,
  .store-employee.is-reading .se-launcher {
    width: 48px !important;
    height: 48px !important;
  }
  .se-emp { width: 28px; height: 28px; }
  .se-float-caption { display: none !important; }
}
.store-employee > * {
  pointer-events: auto;
}
.store-employee .se-gate[hidden],
.store-employee .se-chat[hidden],
.store-employee .se-composer[hidden],
.store-employee .se-needs[hidden],
.store-employee .se-panel[hidden] {
  display: none !important;
}
.store-employee .se-wait {
  display: none !important;
}
.se-float-caption {
  display: block !important;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--accent);
  max-width: 72px;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}
.store-employee.is-reading .se-float-caption {
  opacity: 0.85;
}
.se-launcher {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 2px solid var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  padding: 0 !important;
  cursor: grab;
  font: inherit;
  font-weight: 700;
  width: 58px !important;
  height: 58px !important;
  box-shadow: 0 10px 28px rgba(14, 90, 74, 0.35) !important;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.se-launcher:hover,
.se-launcher.is-open {
  filter: brightness(1.05);
}
.se-launcher:hover .se-emp,
.se-launcher.is-open .se-emp {
  transform: translateY(-1px);
}
.se-emp {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: #fff !important;
  border: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: none;
  transition: transform .15s ease;
}
.se-emp.tiny {
  width: 28px;
  height: 28px;
  color: var(--accent) !important;
  box-shadow: none;
}
.se-emp-svg { width: 70%; height: 70%; display: block; }
.se-label { font-size: .72rem; white-space: nowrap; line-height: 1.2; }
.se-wait {
  font-size: .65rem;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
.store-employee .se-panel {
  /* left/top/width set in JS (fixed to icon) — do not use absolute/RTL inset here */
  position: fixed;
  margin: 0;
  width: min(380px, calc(100vw - 16px));
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(16, 20, 24, 0.16);
  pointer-events: auto;
  z-index: 100001;
}
.store-employee.is-reading .se-launcher {
  width: 58px !important;
  height: 58px !important;
  visibility: visible;
  pointer-events: auto;
}
.store-employee.is-reading .se-chat {
  flex: 1 1 auto;
  height: auto;
  min-height: 120px;
  max-height: none;
  font-size: 1rem;
  line-height: 1.7;
  padding: 16px 18px;
  gap: 10px;
  overflow: auto;
}
.store-employee.is-reading .se-bubble {
  max-width: 92%;
  font-size: 1rem;
  line-height: 1.7;
  padding: 10px 14px;
}
.store-employee.is-reading .se-panel-head {
  padding: 14px 16px;
  flex: 0 0 auto;
}
.store-employee.is-reading .se-composer {
  flex: 0 0 auto;
  padding: 12px 14px 14px;
}

.brand-home-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.home-beside-brand {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.home-beside-brand:hover { color: var(--accent); }

.se-panel {
  width: min(300px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.se-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.se-head-text { display: flex; align-items: center; gap: 8px; }
.se-panel-head strong { display: block; font-size: .92rem; line-height: 1.3; }
.se-live {
  display: block; margin-top: 1px;
  font-size: .72rem; color: var(--accent); font-weight: 700;
}
.se-live.is-offline { color: var(--danger); }
.se-close {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.se-gate { padding: 14px 12px 12px; }
.se-gate p { font-weight: 600; margin-bottom: 10px; line-height: 1.6; }
.se-gate-actions { display: flex; gap: 8px; }
.se-yes, .se-no {
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  padding: 6px 12px; cursor: pointer; font-weight: 700; font: inherit;
}
.se-yes { background: var(--accent); color: #fff; border-color: var(--accent); }
.se-chat {
  height: 180px; overflow: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--paper) 80%, var(--card));
}
.se-bubble {
  max-width: 90%;
  padding: 7px 10px;
  border-radius: 12px;
  white-space: pre-wrap;
  font-size: .88rem;
  line-height: 1.55;
}
.se-bubble.bot { align-self: flex-start; background: var(--accent-soft); }
.se-bubble.user { align-self: flex-end; background: var(--ink); color: var(--paper); }
.se-bubble.se-typing { opacity: .65; }
.se-needs {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft);
  font-size: .84rem;
  line-height: 1.45;
}
.se-needs strong { display: block; margin-bottom: 4px; color: var(--accent); }
.se-needs ul { margin: 0 0 4px 1.1rem; padding: 0; }
.se-needs-hint { color: var(--ink-soft); font-size: .78rem; }
.se-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.se-composer {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.se-composer input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.se-ico-btn {
  position: relative;
  width: 36px; height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.se-ico-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.se-attach-label { margin: 0; }
.se-attach-label.is-uploading { color: var(--accent); border-color: var(--accent); }
.se-ico { display: inline-flex; }
.se-ico-spin svg { animation: se-spin .9s linear infinite; }
@keyframes se-spin { to { transform: rotate(360deg); } }
.se-voice .se-wave { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.se-voice .se-wave i {
  display: block; width: 2px; height: 40%;
  background: currentColor; border-radius: 1px;
  animation: se-bar .7s ease-in-out infinite;
}
.se-voice .se-wave i:nth-child(2) { animation-delay: .12s; height: 70%; }
.se-voice .se-wave i:nth-child(3) { animation-delay: .24s; height: 100%; }
.se-voice .se-wave i:nth-child(4) { animation-delay: .08s; height: 55%; }
@keyframes se-bar {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(1); }
}
.se-voice.listening {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--paper));
}
.se-voice.listening .se-ico-mic { display: none; }
.se-voice.listening .se-wave { display: inline-flex; }
.se-send {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.se-send:disabled, .se-voice:disabled, .se-composer input:disabled, .se-attach-label[hidden] { opacity: .55; }
.se-send:disabled { opacity: .45; }

/* Service product sections (Stripe-like depth, no forced login) */
.svc-detail-list .svc-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.svc-detail-list .svc-row:last-child { border-bottom: 0; }
.svc-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: none;
}
.svc-detail-list h3 { font-size: 1.35rem; margin-bottom: 8px; }
.svc-lead { font-size: 1.02rem; color: var(--ink); margin-bottom: 14px; max-width: 42rem; }
.svc-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 12px 0 18px;
}
.svc-blocks h4 {
  font-size: .78rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 6px;
}
.svc-blocks p, .svc-blocks ul {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.svc-blocks ul { margin: 0; padding-inline-start: 1.1rem; }
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.svc-actions .btn {
  display: inline-flex;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
}
.svc-actions .btn.primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.svc-actions .btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}
.site-foot {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: .85rem;
}
.site-foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .svc-blocks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-top: 18px; }
  .nav a:not(.lang) { font-size: .85rem; }
}

/* --- logo + contact icons (added 2026-07-25) --- */
.brand{display:inline-flex;align-items:center}
.brand-logo{height:3.6rem;width:auto;display:block}
.footer-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.icon-link{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--accent,#0e5a4a);font-weight:600}
.icon-link svg{flex:0 0 auto}
.icon-link.wa{color:#25d366}
.icon-link.wa:hover{color:#128c4a}
.icon-link:hover{opacity:.8}
.icon-link.muted{color:var(--muted,#6b7280);font-weight:400;font-size:.9em}

/* --- modern assistant composer: "+" menu + live voice (2026-07-25) --- */
.se-plus{color:var(--accent,#0e5a4a)}
.se-plus-menu{position:absolute;bottom:52px;left:8px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;min-width:190px;z-index:40;display:flex;flex-direction:column;gap:2px}
.se-plus-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:0;background:none;border-radius:10px;cursor:pointer;font:inherit;color:#111827;text-align:start}
.se-plus-item:hover{background:#f3f4f6}
.se-plus-item svg{flex:0 0 auto;color:var(--accent,#0e5a4a)}
.se-livevoice{color:var(--accent,#0e5a4a)}
.se-voice-overlay{position:absolute;inset:0;background:rgba(250,250,247,.97);border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;z-index:60}
.se-vo-orb{position:relative;width:96px;height:96px;border-radius:50%;background:var(--accent,#0e5a4a);display:flex;align-items:center;justify-content:center}
.se-vo-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent,#0e5a4a);opacity:.55;animation:sePulse 1.8s ease-out infinite}
.se-vo-ring.d2{animation-delay:.9s}
@keyframes sePulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
.se-vo-status{font-weight:600;color:var(--accent,#0e5a4a)}
.se-vo-actions{display:flex;align-items:center;gap:.8rem}
.se-vo-mini{width:44px;height:44px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--accent,#0e5a4a)}
.se-vo-mini:hover{background:#f3f4f6}
.se-vo-end{padding:.5rem 1.4rem;border-radius:999px;border:0;background:#dc2626;color:#fff;font-weight:600;cursor:pointer}

/* --- fix composer: hide legacy attach buttons (replaced by "+" menu) + menu position (2026-07-26) --- */
#se-attach-wrap, #se-camera-wrap, #se-link-btn, .se-livevoice, .se-voice-overlay { display: none !important; }
.se-composer { position: relative; }
.se-plus-menu { position: absolute; bottom: 56px; inset-inline-start: 6px; left: auto; }

/* القائمة مخفية افتراضياً — تظهر فقط عند الضغط على «+» (كانت display:flex تتجاوز [hidden]) */
.se-plus-menu[hidden] { display: none !important; }

/* verdict marks — typographic, not emoji (owner 2026-08-01) */
.mark{display:inline-block;padding:.1em .55em;border-radius:999px;font-size:.86em;font-weight:600;letter-spacing:.2px;border:1px solid currentColor;line-height:1.5}
.mark.ok{color:#1c7c46}
.mark.warn{color:#b07d10}
.mark.bad{color:#b3372f}

/* --- assistant chat v8: modern live conversation (2026-08-06) ---
   Message rows (avatar + bubble + timestamp), pulsing typing dots,
   suggestion chips, slide-in entry, gold focus ring. Logical properties
   only — mirrors cleanly in RTL/LTR. Palette: green #0e5a4a / gold #ac8a3e
   via existing vars. */
.se-chat { gap: 10px; padding: 12px; }
.se-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  animation: se-msg-in .28s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes se-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.se-msg.bot { justify-content: flex-start; }
.se-msg.user { justify-content: flex-end; }
.se-msg-avatar {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 20px; /* sit beside the bubble, above the timestamp */
}
.se-msg-avatar svg { width: 70%; height: 70%; display: block; }
.se-msg.bot.se-follow .se-msg-body { margin-inline-start: 34px; }
.se-msg-body {
  display: flex;
  flex-direction: column;
  max-width: 86%;
  min-width: 0;
}
.se-msg.user .se-msg-body { align-items: flex-end; }
.se-msg.bot .se-msg-body { align-items: flex-start; }
.se-msg-time {
  font-size: .66rem;
  color: var(--ink-soft);
  opacity: .8;
  margin-top: 3px;
  padding-inline: 4px;
}
/* Modern messaging bubbles — asymmetric corners toward the sender */
.se-bubble {
  white-space: normal;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .06);
}
.se-bubble.bot {
  background: var(--card);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 14px;
  border-end-start-radius: 4px;
}
.se-bubble.user {
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 14%, var(--paper)));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 14px;
  border-end-end-radius: 4px;
}
/* Light markdown inside bubbles (bold + lists, DOM-built) */
.se-bubble p { margin: 0 0 .4em; }
.se-bubble p:last-child { margin-bottom: 0; }
.se-bubble ul, .se-bubble ol { margin: .2em 0 .3em; padding-inline-start: 1.2em; }
.se-bubble li { margin-bottom: .15em; }
.se-bubble strong { font-weight: 700; }
/* Live typing indicator — three pulsing dots */
.se-bubble.se-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 1;
  padding: 11px 13px;
  min-height: 0;
}
.se-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .35;
  animation: se-dot-pulse 1.1s ease-in-out infinite;
}
.se-typing i:nth-child(2) { animation-delay: .18s; }
.se-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes se-dot-pulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
/* Suggested-question chips above the composer */
.se-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 2px;
}
.se-chips[hidden] { display: none !important; }
.se-chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.se-chip:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 10%, var(--paper));
}
/* Header: green presence dot + refined close */
.se-live { display: inline-flex; align-items: center; gap: 5px; }
.se-live .se-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: se-dot-ring 2s ease-out infinite;
}
@keyframes se-dot-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.se-close {
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.se-close:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
/* Composer: gold focus ring; send arrow mirrors in RTL */
.se-composer input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
html[dir="rtl"] .se-send svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .se-msg { animation: none; }
  .se-typing i { animation: none; opacity: .7; }
  .se-live .se-dot { animation: none; }
}

/* currency picker (owner 2026-08-01: never dollar-only) */
.ccy-bar{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:.92rem;opacity:.85}
.ccy-picker{padding:.3rem .5rem;border-radius:8px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;font:inherit}
.ccy-note{font-size:.82rem;opacity:.7;margin:0 0 1rem}
.price{white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- data tables: readable at 375px (owner 2026-08-01) ---------------------
   The platform matrix and the sample report were unstyled <table>s. At 375px
   the browser squeezed four text columns into ~90px each (rows 230px tall,
   the matrix 1471px long) AND still pushed the document 13px wider than the
   viewport, so the whole page slid sideways.
   Fix: every table lives in a .table-wrap box. The box is the ONLY thing that
   scrolls horizontally; the table keeps a min-width that stays legible, so
   columns never collapse into slivers and the page itself never moves.
   Regression guard: engines/check_price_consistency.py fails on any <table>
   under site/ that is not wrapped. */
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;   /* scrolling the table must not drag the page */
  margin:0 0 1.1rem;
  border:1px solid rgba(128,128,128,.28);
  border-radius:10px;
}
.table-wrap table{
  border-collapse:collapse;
  width:100%;
  min-width:640px;                 /* below this the columns stop being readable */
  margin:0;
  font-size:.94rem;
  background:transparent;
}
.table-wrap th,
.table-wrap td{
  padding:.6rem .75rem;
  text-align:start;                /* follows dir=rtl/ltr — no per-page override */
  vertical-align:top;
  border:1px solid rgba(128,128,128,.32);
}
.table-wrap th{
  background:rgba(128,128,128,.10);
  font-weight:700;
  line-height:1.4;
}
.table-wrap td:first-child{font-weight:600}
.table-hint{
  margin:-.85rem 0 1.1rem;
  font-size:.8rem;
  opacity:.65;
}
@media (min-width:760px){
  .table-hint{display:none}       /* nothing to scroll once the table fits */
}
@media (max-width:560px){
  .table-wrap table{min-width:600px;font-size:.88rem}
  .table-wrap th,.table-wrap td{padding:.5rem .55rem}
}
/* --- content column: centred, capped, and still unable to widen the page ---
   The 375px table fix above shipped `.wrap{max-width:100%}` here to stop the
   document sliding sideways. Same specificity as the `.wrap` rule at the top
   of this file and later in source order, so it silently overrode the 1040px
   cap on EVERY page: measured on a 1920px viewport the content column was
   1920px wide with 0px gutters — text pinned to both screen edges, which is
   exactly the defect the owner reported.
   The cap belongs here; the overflow protection does not need it. `* {
   box-sizing:border-box }` already keeps the 24px padding inside the cap, and
   the child rules below cap the only elements with intrinsic width. Tables
   are deliberately excluded: they scroll inside .table-wrap, which is itself
   capped at 100%.
   Regression guard: engines/check_layout_shell.py measures the rendered
   column at 1920/1280/768/375 and fails on a full-bleed or overflowing page. */
.wrap{width:100%;max-width:1040px;margin-inline:auto}
.wrap img,.wrap pre{max-width:100%}

/* Exact package selector in the client portal. Each package is a separate
   commercial contract; cards wrap without widening a narrow viewport. */
.portal-package-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.8rem;margin-top:1rem}
.portal-package{min-width:0;padding:1rem;border:1px solid rgba(128,128,128,.28);border-radius:12px;background:rgba(255,255,255,.42)}
.portal-package h4{margin:0 0 .45rem;font-size:1rem}
.portal-package .svc-lead{overflow-wrap:anywhere}
.portal-package-free{border-style:dashed}

/* ═══════════════════════════════════════════════════════════════════════
   MODERN LAYER — 2026-08-06
   Owner: «نريد الموقع حيّاً ويتفاعل مع العميل… استلهم أحدث المواقع».
   Measured from claude.com and gemini.google.com the same day rather than
   guessed: warm off-white paper (not pure white), display headings at a
   LIGHT weight (330–360, not 800) with tight leading, fully-rounded pills,
   and motion on almost every interactive element.

   This is an additive layer on purpose. The tokens above stay the source of
   truth for colour, so dark mode and the brand accent keep working, and a
   single revert of this block returns the old look exactly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --r-lg: 22px;
  --r-md: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --lift: 0 18px 50px -18px rgba(16, 20, 24, .28);
}
@media (prefers-color-scheme: dark) {
  :root { --lift: 0 18px 50px -18px rgba(0, 0, 0, .7); }
}

/* Living background: two slow aurora fields behind the content. Pure CSS,
   composited on the GPU, and switched off entirely for reduced motion. */
body::before {
  content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 18% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(38vw 38vw at 86% 22%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%);
  filter: blur(28px); opacity: .5;
  animation: aurora 26s var(--ease) infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}

/* Display type — the single biggest visual difference from the old page. */
.hero h1, .hero h1.hero-title, .hero-title, .hero-sub, .ride-line {
  font-weight: 360;
  letter-spacing: -0.015em;
  line-height: 1.14;
  font-size: clamp(2.1rem, 5.2vw, 3.65rem);
  max-width: 20ch;
}
.hero-title { gap: 0.04em; }
.ride-same, .hero-rest { font-weight: 360; }
.hero .lead { font-size: 1.06rem; line-height: 1.75; max-width: 58ch; margin-top: 18px; }
.hero { padding: 56px 0 28px; }
h2 { font-weight: 480; letter-spacing: -0.01em; }

/* Buttons: pill, lifting, and honest about focus. */
.btn {
  padding: 12px 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); }
.btn.primary { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }

/* Cards lift toward the pointer and carry a hairline that warms on hover. */
.svc-card, .svc-row, .card, .panel {
  border-radius: var(--r-lg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
}
.svc-card:hover, .svc-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Scroll reveal — the element is invisible ONLY when JS is present to reveal
   it (js-motion is set by motion.js), so a failed script never hides content. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); }
.js-motion [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* A quiet, elegant order control for a package card. */
.pkg-order {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 9px 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-weight: 600; font-size: .92rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  text-decoration: none;
  transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.pkg-order:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pkg-order svg { width: 15px; height: 15px; }

/* Motion is a courtesy, never a requirement. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn, .svc-card, .svc-row, .pkg-order { transition: none; }
  .btn:hover, .svc-card:hover, .svc-row:hover, .pkg-order:hover { transform: none; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}