/* Revinn services pages — design tokens follow the site's own identity */
.rv { --rv-primary: #660099; --rv-primary-dark: #4a0a6e; --rv-primary-soft: #7a1cc2; --rv-accent: #FF0B5A; --rv-bg: #f6f1fa; --rv-surface: #fff; --rv-muted-bg: #faf8fc; --rv-text: #2b2b2b; --rv-text-muted: #6b6b6b; --rv-border: #e6e6e6; --rv-success: #1C9A0C; --rv-whatsapp: #1C9A0C; --rv-gold: #e08a00;
      --rv-r-sm: 10px; --rv-r-md: 16px; --rv-r-lg: 24px; --rv-sh-sm: 0 1px 3px rgba(102,0,153,.06); --rv-sh-md: 0 4px 12px rgba(102,0,153,.08); --rv-sh-lg: 0 12px 28px rgba(102,0,153,.12);
      font-family: "DinNextLTArabic", system-ui, sans-serif; color: var(--rv-text); background: var(--rv-surface); direction: rtl; }
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }
.rv-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.rv-container--narrow { max-width: 820px; }
.rv-section { padding: 3.5rem 0; }
.rv-section--muted { background: var(--rv-muted-bg); }
.rv-h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; color: var(--rv-primary); text-align: center; margin: 0 0 .5rem; }
.rv-sub { text-align: center; color: var(--rv-text-muted); font-size: 1rem; margin: 0 auto 2rem; max-width: 680px; line-height: 1.8; }
.rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 2.9rem; padding: 0 1.4rem; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, color .15s; font-family: inherit; }
.rv-btn:hover { transform: translateY(-1px); text-decoration: none; }
.rv-btn:focus-visible { outline: 3px solid rgba(102,0,153,.35); outline-offset: 2px; }
.rv-btn--primary { background: var(--rv-primary); color: #fff; }
.rv-btn--primary:hover { background: var(--rv-primary-dark); color: #fff; box-shadow: var(--rv-sh-md); }
.rv-btn--accent { background: var(--rv-accent); color: #fff; }
.rv-btn--whatsapp { background: var(--rv-whatsapp); color: #fff; }
.rv-btn--whatsapp:hover { background: #178308; color: #fff; }
.rv-btn--light { background: #fff; color: var(--rv-primary); }
.rv-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.rv-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.rv-btn[disabled] { background: #eee; color: #9a9a9a; cursor: not-allowed; transform: none; }
.rv-breadcrumb { padding: 14px 0 0; font-size: .82rem; }
.rv-breadcrumb ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; color: var(--rv-text-muted); }
.rv-breadcrumb li + li::before { content: '›'; margin-inline-end: 8px; color: #b5b5b5; }
.rv-breadcrumb a { color: var(--rv-primary); text-decoration: none; }
.rv-badge { position: absolute; top: 14px; inset-inline-start: 14px; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.rv-badge--hot { background: var(--rv-accent); color: #fff; }
.rv-badge--soon { background: #f1f1f1; color: #6b6b6b; }
@media (max-width: 767px) { .rv-section { padding: 2.4rem 0; } }

/* shared sections (hero, stats, grids, why, faq, final) — used by the hub and the service pages */
.rv-hero { background: linear-gradient(160deg, var(--rv-primary) 0%, var(--rv-primary-dark) 100%); color: #fff; text-align: center; padding: 3.5rem 0 3rem; margin-top: 12px; }
.rv-hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; margin: 0 0 .6rem; color: #fff; }
.rv-final .rv-h2 { color: #fff; }
.rv-hero__sub { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 640px; margin: 0 auto 2rem; line-height: 1.8; }
.rv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 0 auto; }
.rv-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--rv-r-md); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rv-stat svg { color: #ffd18a; }
.rv-stat__value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.rv-stat__label { font-size: .8rem; color: rgba(255,255,255,.8); }
.rv-grid { display: grid; gap: 20px; }
.rv-grid--why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rv-why { background: #fff; border: 1px solid var(--rv-border); border-radius: var(--rv-r-md); padding: 22px 18px; text-align: center; }
.rv-why__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--rv-bg); color: var(--rv-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.rv-why h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.rv-why p { font-size: .86rem; color: var(--rv-text-muted); margin: 0; line-height: 1.7; }
.rv-consult { text-align: center; }
.rv-faq { display: grid; gap: 10px; }
.rv-faq__item { background: #fff; border: 1px solid var(--rv-border); border-radius: var(--rv-r-md); overflow: hidden; }
.rv-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 700; color: var(--rv-text); }
.rv-faq__item summary::-webkit-details-marker { display: none; }
.rv-faq__item summary svg { flex-shrink: 0; color: var(--rv-primary); transition: transform .2s; }
.rv-faq__item[open] summary { color: var(--rv-primary); }
.rv-faq__item[open] summary svg { transform: rotate(180deg); }
.rv-faq__answer { padding: 0 18px 16px; color: #444; line-height: 1.9; font-size: .95rem; }
.rv-faq__answer p { margin: 0; }
.rv-final { background: var(--rv-primary); color: #fff; text-align: center; padding: 3rem 0; }
.rv-final .rv-h2, .rv-final .rv-sub { color: #fff; }
.rv-final .rv-sub { color: rgba(255,255,255,.85); margin-bottom: 1.4rem; }
.rv-final__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 991px) { .rv-grid--why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-hero { padding: 2.6rem 0 2.2rem; } }
@media (max-width: 480px) { .rv-grid--why { grid-template-columns: 1fr; } }
.rv h1, .rv h2, .rv h3 { background: none; padding: 0; line-height: 1.35; }
.rv-panel__head h2, .rv-panel__head h3 { color: var(--rv-text); font-size: 1rem; }
/* <header> inside the services pages is a plain section/panel header, not the site header */
.rv header, .rv .rv-panel__head, .rv .rv-modal__head { background: none; color: inherit; position: static; height: auto; min-height: 0; box-shadow: none; }
.rv .rv-panel__head { padding: 0; margin-bottom: 8px; }
.rv .rv-modal__head { padding: 16px 20px; border-bottom: 1px solid var(--rv-border); }
/* FAQ in two columns so the page stays short; each item opens independently */
.rv-faq--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.rv-faq--cols .rv-faq__item summary { padding: 14px 16px; font-size: .92rem; }
@media (max-width: 767px) { .rv-faq--cols { grid-template-columns: 1fr; } }
.rv .rv-h2 { display: block; width: 100%; text-align: center; margin-inline: auto; }
.rv .rv-sub { text-align: center; }
/* tighter top of every section: heading sits close to the previous block */
.rv .rv-section { padding: 2rem 0 2.75rem; }
.rv .rv-h2 { margin-top: 0; }
.rv .rv-section--tight { padding-top: 1.75rem; }
/* one vertical scale for every section on the services pages */
.rv .rv-section, .rv .rv-section--tight, .rv .rv-final, .rv .rv-consult { padding: 2rem 0 2.75rem; }
.rv .rv-h2 { margin-bottom: .5rem; }
.rv .rv-sub, .rv .rv-why-head .rv-sub { margin-bottom: 1.75rem; }
.rv .rv-hero { padding: 2.75rem 0 2.75rem; }
.rv .rv-hero--flush { padding-top: 1.2rem; }
.rv .rv-work__more { margin-top: 1.25rem; }
.rv .rv-final .rv-sub { margin-bottom: 1.4rem; }
@media (max-width: 767px) { .rv .rv-section, .rv .rv-final, .rv .rv-consult { padding: 1.75rem 0 2.25rem; } }

/* hero flush under the header with a light breadcrumb inside (hub + service pages) */
.rv-hero--flush { margin-top: 0; padding-top: 1.2rem; }
.rv-breadcrumb--light { padding: 0 0 1.6rem; text-align: start; }
.rv-breadcrumb--light ol { color: rgba(255,255,255,.7); }
.rv-breadcrumb--light a { color: #fff; } .rv-breadcrumb--light li + li::before { color: rgba(255,255,255,.5); }
.rv-hero__top .rv-progress { width: 100%; max-width: 640px; margin-inline: auto; }