/* ============================================================
   VOLERNA STUDYO — الصفحة الرئيسية العامّة
   assets/vs-landing.css
   ------------------------------------------------------------
   يعتمد على متغيّرات volerna-ui.css: --bg --tx --gold --surf …
   فيتبع الوضع الليلي/النهاري تلقائياً بلا سطر إضافي.
   ============================================================ */

.vsp { --pad: 20px; }

@media (min-width: 720px)  { .vsp { --pad: 32px; } }
@media (min-width: 1100px) { .vsp { --pad: 48px; } }

.vsp-wrap {
    max-width: var(--shell, 1180px);
    margin: 0 auto;
    padding-inline: var(--pad);
}

/* ---------- الشريط العلوي ---------- */
.vsp-nav {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
}
.vsp-nav.is-stuck { border-bottom-color: var(--bd); }

.vsp-nav-in {
    display: flex; align-items: center; gap: 14px;
    height: 62px;
}
.vsp-brand {
    display: flex; align-items: center; gap: 10px;
    font: 700 17px/1 'Cormorant Garamond', Georgia, serif;
    color: var(--tx); letter-spacing: .01em; white-space: nowrap;
}
.vsp-brand .vsp-mark {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    border: 1.5px solid var(--gold); background: var(--goldDim);
    font: 800 14px/1 Manrope, sans-serif; color: var(--gold);
    overflow: hidden;
}
.vsp-brand .vsp-mark img { width: 100%; height: 100%; object-fit: cover; }

.vsp-menu {
    display: none; gap: 4px; margin-inline-start: auto;
}
@media (min-width: 940px) { .vsp-menu { display: flex; } }
.vsp-menu a {
    font: 600 13px/1 Manrope, sans-serif; color: var(--tx2);
    padding: 9px 12px; border-radius: 9px;
    transition: color .2s ease, background .2s ease;
}
.vsp-menu a:hover { color: var(--tx); background: var(--surf); }

.vsp-nav-act {
    display: flex; align-items: center; gap: 8px;
    margin-inline-start: auto;
}
@media (min-width: 940px) { .vsp-nav-act { margin-inline-start: 8px; } }

/* زرّ الشخص — بوّابة الدخول */
.vsp-user {
    width: 40px; height: 40px; flex: none;
    border-radius: 50%; border: 1px solid var(--gEdge);
    background: var(--goldDim); color: var(--gold);
    display: grid; place-items: center; cursor: pointer;
    font-size: 16px;
    transition: transform .25s var(--ease), box-shadow .25s ease;
}
.vsp-user:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--gSoft); }
.vsp-user:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.vsp-theme {
    width: 40px; height: 40px; flex: none;
    border-radius: 50%; border: 1px solid var(--bd);
    background: var(--surf); color: var(--tx2);
    display: grid; place-items: center; cursor: pointer; font-size: 14px;
    transition: color .2s ease;
}
.vsp-theme:hover { color: var(--gold); }

/* ---------- البطل ---------- */
.vsp-hero {
    position: relative; overflow: hidden;
    min-height: 78vh; display: grid; align-items: end;
    border-bottom: 1px solid var(--bd);
}
@media (min-width: 900px) { .vsp-hero { min-height: 86vh; } }

.vsp-hero-bg { position: absolute; inset: 0; }
.vsp-hero-bg img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 1.4s var(--ease);
}
.vsp-hero-bg img.is-on { opacity: 1; }
/* الحجاب فوق الصورة — يضمن قراءة النصّ فوق أي صورة مهما كانت فاتحة */
.vsp-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,11,20,.42) 0%, rgba(8,11,20,.22) 26%, rgba(8,11,20,.92) 100%);
}
.vsp-hero.is-bare::after { display: none; }

/* بلا صورة: ارتفاع أقلّ ومحتوى في الوسط — لا فراغ ميّت في الأعلى */
.vsp-hero.is-bare { min-height: 62vh; align-items: center; }
@media (min-width: 900px) { .vsp-hero.is-bare { min-height: 68vh; } }
.vsp-hero.is-bare .vsp-hero-in { padding-block: 60px; }

/* ============================================================
   بطل بلا صورة — قبل رفع أوّل صورة سلايدر
   ------------------------------------------------------------
   خلفية متدرّجة مع وهج ذهبي وشبكة خفيفة. أنظف بكثير من صورة
   نائبة تحمل نصّاً يتصادم مع العنوان. تختفي وحدها فور رفع صورة.
   ============================================================ */
.vsp-hero.is-bare {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.16), transparent 62%),
        linear-gradient(168deg, #131A2E 0%, #0B1020 46%, #171128 100%);
}
html[data-theme="light"] .vsp-hero.is-bare {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.22), transparent 62%),
        linear-gradient(168deg, #23293D 0%, #171C2C 48%, #241C33 100%);
}
.vsp-hero.is-bare::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(90% 70% at 50% 34%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(90% 70% at 50% 34%, #000 25%, transparent 78%);
}
.vsp-hero-in { position: relative; z-index: 2; padding-block: 44px 54px; }

.vsp-kicker {
    font: 700 10.5px/1 Manrope, sans-serif; letter-spacing: .26em;
    text-transform: uppercase; color: var(--gold);
}
.vsp-hero h1 {
    font: 700 clamp(34px, 7.4vw, 68px)/1.06 'Cormorant Garamond', Georgia, serif;
    color: #FFF; margin-top: 14px; letter-spacing: -.01em;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.vsp-hero p {
    font: 500 clamp(14px, 2.2vw, 16.5px)/1.75 Manrope, sans-serif;
    color: rgba(255,255,255,.86); margin-top: 14px; max-width: 52ch;
}

.vsp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vsp-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font: 600 14px/1 Manrope, sans-serif;
    padding: 14px 22px; border-radius: 12px;
    border: 1px solid var(--bd); background: var(--surf); color: var(--tx);
    cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s ease, background .2s ease;
}
.vsp-btn:hover { transform: translateY(-2px); }
.vsp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vsp-btn i { font-size: 15px; }

.vsp-btn.is-gold {
    background: var(--gold); border-color: transparent; color: var(--onGold);
    box-shadow: 0 8px 24px var(--gSoft);
}
.vsp-btn.is-gold:hover { box-shadow: 0 12px 30px var(--gGlow); }
.vsp-btn.is-ghost { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #FFF; }
.vsp-btn.is-wa    { background: #25D366; border-color: transparent; color: #06331A; }

/* نقاط الشرائح */
.vsp-dots { display: flex; gap: 6px; margin-top: 30px; }
.vsp-dots button {
    width: 7px; height: 7px; border-radius: 99px; border: 0; padding: 0;
    background: rgba(255,255,255,.34); cursor: pointer;
    transition: width .45s var(--ease), background .3s ease;
}
.vsp-dots button.is-on { width: 24px; background: var(--gold); }

/* ---------- الأرقام ---------- */
.vsp-stats {
    display: grid; gap: 1px; background: var(--bd);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-bottom: 1px solid var(--bd);
}
.vsp-stat { background: var(--bg); padding: 26px 18px; text-align: center; }
.vsp-stat b {
    display: block; font: 700 30px/1 'Cormorant Garamond', Georgia, serif; color: var(--gold);
}
.vsp-stat span {
    display: block; margin-top: 7px;
    font: 600 11.5px/1.5 Manrope, sans-serif; color: var(--tx3);
    letter-spacing: .04em;
}

/* ---------- الأقسام ---------- */
.vsp-sec { padding-block: clamp(52px, 9vw, 96px); }
.vsp-sec + .vsp-sec { border-top: 1px solid var(--bd); }
.vsp-sec.is-tint { background: var(--bg2); }

.vsp-head { max-width: 62ch; }
.vsp-head h2 {
    font: 700 clamp(26px, 4.4vw, 40px)/1.18 'Cormorant Garamond', Georgia, serif;
    color: var(--tx); margin-top: 12px;
}
.vsp-head p {
    font: 500 15px/1.8 Manrope, sans-serif; color: var(--tx2); margin-top: 14px;
}
.vsp-head p + p { margin-top: 12px; }

/* من نحن */
.vsp-about { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .vsp-about { grid-template-columns: 1.05fr .95fr; gap: 54px; } }
.vsp-about-img {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--bd); box-shadow: var(--sh);
    aspect-ratio: 4 / 3; background: var(--surf);
}
.vsp-about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* الخدمات */
.vsp-grid {
    display: grid; gap: 14px; margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.vsp-card {
    background: var(--surf); border: 1px solid var(--bd);
    border-radius: 16px; padding: 24px 22px;
    transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.vsp-card:hover { transform: translateY(-3px); border-color: var(--gEdge); box-shadow: var(--sh); }
.vsp-card-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--goldDim); color: var(--gold); font-size: 18px;
}
.vsp-card h3 {
    font: 700 17px/1.35 Manrope, sans-serif; color: var(--tx); margin-top: 16px;
}
.vsp-card p {
    font: 500 13.5px/1.75 Manrope, sans-serif; color: var(--tx2); margin-top: 9px;
}

/* الأعمال */
.vsp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.vsp-filters button {
    font: 600 12.5px/1 Manrope, sans-serif;
    padding: 10px 16px; border-radius: 99px; cursor: pointer;
    border: 1px solid var(--bd); background: transparent; color: var(--tx2);
    transition: all .25s var(--ease);
}
.vsp-filters button:hover { color: var(--tx); }
.vsp-filters button.is-on {
    background: var(--goldDim); border-color: var(--gEdge); color: var(--gold);
}

.vsp-works {
    display: grid; gap: 12px; margin-top: 22px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.vsp-work {
    position: relative; display: block; overflow: hidden;
    border-radius: 14px; border: 1px solid var(--bd);
    aspect-ratio: 4 / 5; background: var(--surf);
}
.vsp-work img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s var(--ease);
}
.vsp-work:hover img { transform: scale(1.05); }
.vsp-work figcaption {
    position: absolute; inset-inline: 0; bottom: 0; padding: 26px 14px 13px;
    background: linear-gradient(180deg, transparent, rgba(6,9,18,.86));
    font: 600 12.5px/1.4 Manrope, sans-serif; color: #FFF;
}
.vsp-work figcaption small {
    display: block; margin-top: 3px; color: var(--gold);
    font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.vsp-work[hidden] { display: none; }

/* الفروع */
.vsp-branches {
    display: grid; gap: 14px; margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.vsp-branch {
    border: 1px solid var(--bd); border-radius: 16px; padding: 24px 22px;
    background: var(--surf);
}
.vsp-branch h3 {
    font: 700 17px/1.3 Manrope, sans-serif; color: var(--tx);
    display: flex; align-items: center; gap: 9px;
}
.vsp-branch h3 i { color: var(--gold); font-size: 14px; }
.vsp-branch .vsp-b-main {
    font: 700 9.5px/1 Manrope, sans-serif; letter-spacing: .14em;
    color: var(--gold); background: var(--goldDim);
    padding: 4px 8px; border-radius: 6px; text-transform: uppercase;
}
.vsp-branch dl { margin-top: 16px; display: grid; gap: 10px; }
.vsp-branch dt {
    font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tx3);
}
.vsp-branch dd { font: 500 13.5px/1.6 Manrope, sans-serif; color: var(--tx2); margin-top: 3px; }
.vsp-branch dd a { color: var(--tx2); border-bottom: 1px solid var(--bd); }
.vsp-branch dd a:hover { color: var(--gold); border-color: var(--gEdge); }
.vsp-branch-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vsp-branch-act a {
    font: 600 12px/1 Manrope, sans-serif; padding: 9px 14px; border-radius: 9px;
    border: 1px solid var(--bd); color: var(--tx2);
    display: inline-flex; align-items: center; gap: 7px;
}
.vsp-branch-act a:hover { color: var(--gold); border-color: var(--gEdge); }

/* الآراء */
.vsp-quotes {
    display: grid; gap: 14px; margin-top: 38px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vsp-quote {
    border: 1px solid var(--bd); border-radius: 16px; padding: 26px 24px;
    background: var(--surf); display: flex; flex-direction: column;
}
.vsp-stars { color: var(--gold); font-size: 12.5px; letter-spacing: 2px; }
.vsp-quote blockquote {
    font: 500 14.5px/1.8 Manrope, sans-serif; color: var(--tx2);
    margin-top: 14px; flex: 1;
}
.vsp-quote footer {
    margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--bd);
    font: 700 13px/1.4 Manrope, sans-serif; color: var(--tx);
}
.vsp-quote footer span {
    display: block; font: 500 11.5px/1.4 Manrope, sans-serif; color: var(--tx3); margin-top: 3px;
}

/* الأسئلة */
.vsp-faq { margin-top: 34px; max-width: 78ch; }
.vsp-faq details {
    border-bottom: 1px solid var(--bd);
}
.vsp-faq summary {
    cursor: pointer; list-style: none; padding: 20px 40px 20px 0;
    font: 600 15.5px/1.6 Manrope, sans-serif; color: var(--tx);
    position: relative;
}
.vsp-faq summary::-webkit-details-marker { display: none; }
/* العلامة مرسومة بالـ CSS لا بخطّ أيقونات:
   لو تعطّل تحميل Font Awesome تبقى الإشارة ظاهرة. */
.vsp-faq summary::before,
.vsp-faq summary::after {
    content: ''; position: absolute; inset-inline-end: 6px; top: 50%;
    width: 13px; height: 2px; border-radius: 2px; background: var(--gold);
    transform: translateY(-50%);
    transition: transform .3s var(--ease), opacity .3s ease;
}
.vsp-faq summary::after { transform: translateY(-50%) rotate(90deg); }
.vsp-faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.vsp-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.vsp-faq .vsp-ans {
    font: 500 14px/1.85 Manrope, sans-serif; color: var(--tx2);
    padding: 0 40px 22px 0;
}

/* دعوة أخيرة */
.vsp-final {
    border: 1px solid var(--gEdge); border-radius: 20px;
    background: linear-gradient(150deg, var(--gSoft), var(--surf) 62%);
    padding: clamp(32px, 6vw, 56px); text-align: center;
}
.vsp-final h2 {
    font: 700 clamp(24px, 4.2vw, 36px)/1.2 'Cormorant Garamond', Georgia, serif; color: var(--tx);
}
.vsp-final p {
    font: 500 14.5px/1.75 Manrope, sans-serif; color: var(--tx2);
    margin-top: 12px; max-width: 52ch; margin-inline: auto;
}
.vsp-final .vsp-cta { justify-content: center; }

/* التذييل */
.vsp-foot {
    border-top: 1px solid var(--bd); padding-block: 44px 34px;
    background: var(--bg2);
}
.vsp-foot-grid {
    display: grid; gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.vsp-foot h4 {
    font: 700 10.5px/1 Manrope, sans-serif; letter-spacing: .16em;
    text-transform: uppercase; color: var(--tx3); margin-bottom: 14px;
}
.vsp-foot li { list-style: none; margin-bottom: 9px; }
.vsp-foot a, .vsp-foot p {
    font: 500 13px/1.7 Manrope, sans-serif; color: var(--tx2);
}
.vsp-foot a:hover { color: var(--gold); }
.vsp-foot-social { display: flex; gap: 9px; margin-top: 4px; }
.vsp-foot-social a {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 15px;
    border: 1px solid var(--bd); background: var(--surf); color: var(--tx2);
    transition: all .25s var(--ease);
}
.vsp-foot-social a:hover { color: var(--gold); border-color: var(--gEdge); transform: translateY(-2px); }
.vsp-foot-btm {
    margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--bd);
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
    font: 500 12px/1.6 Manrope, sans-serif; color: var(--tx3);
}
.vsp-foot-btm nav { display: flex; gap: 16px; margin-inline-start: auto; }

/* ============================================================
   نافذة الدخول — تنبثق من زرّ الشخص
   ============================================================ */
.vsp-modal {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center; padding: 20px;
    background: rgba(6, 9, 18, .62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s ease;
}
/* ⚠️ الإخفاء بـ [hidden] لا بـ visibility.
   السبب: عنصر داخل شجرة visibility:hidden لا يقبل التركيز، فكان
   focus() الأوّل يفشل صامتاً ويبقى مستخدم لوحة المفاتيح خلف
   النافذة. و display:grid يتجاوز [hidden] ما لم نصرّح بهذا السطر. */
.vsp-modal[hidden] { display: none; }
.vsp-modal.is-open { opacity: 1; }

.vsp-modal-box {
    width: 100%; max-width: 420px;
    background: var(--bg); border: 1px solid var(--bd);
    border-radius: 20px; padding: 30px 26px 26px;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
    transform: translateY(14px) scale(.97);
    transition: transform .35s var(--ease);
}
.vsp-modal.is-open .vsp-modal-box { transform: none; }

.vsp-modal-x {
    position: absolute; top: 14px; inset-inline-end: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--bd); background: var(--surf); color: var(--tx2);
    display: grid; place-items: center; cursor: pointer; font-size: 13px;
}
.vsp-modal-x:hover { color: var(--gold); }

.vsp-modal-box h2 {
    font: 700 21px/1.3 'Cormorant Garamond', Georgia, serif; color: var(--tx);
    text-align: center;
}
.vsp-modal-box > p {
    font: 500 13px/1.7 Manrope, sans-serif; color: var(--tx3);
    text-align: center; margin-top: 8px;
}

.vsp-choice { display: grid; gap: 10px; margin-top: 24px; }
.vsp-choice a {
    display: flex; align-items: center; gap: 14px;
    padding: 17px 18px; border-radius: 14px;
    border: 1px solid var(--bd); background: var(--surf);
    transition: all .25s var(--ease);
}
.vsp-choice a:hover { border-color: var(--gEdge); background: var(--goldDim); transform: translateY(-2px); }
.vsp-choice a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vsp-choice .vsp-ci {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 17px;
    background: var(--goldDim); color: var(--gold);
}
.vsp-choice b {
    display: block; font: 700 14.5px/1.3 Manrope, sans-serif; color: var(--tx);
}
.vsp-choice span {
    display: block; margin-top: 3px;
    font: 500 12px/1.5 Manrope, sans-serif; color: var(--tx3);
}
.vsp-choice .vsp-ca { margin-inline-start: auto; color: var(--tx3); font-size: 12px; }

.vsp-modal-note {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bd);
    font: 500 12px/1.6 Manrope, sans-serif; color: var(--tx3); text-align: center;
}
.vsp-modal-note a { color: var(--gold); }

/* ---------- تسهيلات ---------- */
.vsp-skip {
    position: absolute; inset-inline-start: -9999px; top: 8px;
    background: var(--gold); color: var(--onGold);
    padding: 10px 18px; border-radius: 10px; z-index: 100;
    font: 600 13px Manrope, sans-serif;
}
.vsp-skip:focus { inset-inline-start: 8px; }

@media (prefers-reduced-motion: reduce) {
    .vsp-hero-bg img, .vsp-work img, .vsp-card, .vsp-btn, .vsp-modal-box {
        transition: none !important;
    }
    .vsp-card:hover, .vsp-btn:hover, .vsp-work:hover img { transform: none; }
}