/* ============================================
   Faney Matabekh Jeddah — Sky Blue & White Theme
   Light by default — Dark mode via [data-theme="dark"]
   ============================================ */

:root,
[data-theme="light"] {
    --color-primary: #0284c7;
    --color-primary-2: #0ea5e9;
    --color-primary-3: #38bdf8;
    --color-primary-soft: #e0f2fe;
    --color-primary-darker: #0369a1;
    --color-accent: #06b6d4;
    --color-bg: #ffffff;
    --color-bg-2: #f8fafc;
    --color-bg-3: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-border: rgba(15, 23, 42, .08);
    --color-border-2: rgba(15, 23, 42, .14);
    --color-text: #0f172a;
    --color-text-2: #334155;
    --color-muted: #64748b;
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --gradient-hero: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    --gradient-accent: linear-gradient(135deg, #38bdf8 0%, #06b6d4 100%);
    --shadow-sm: 0 1px 3px rgba(2, 132, 199, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 6px 20px rgba(2, 132, 199, .12), 0 4px 10px rgba(15, 23, 42, .04);
    --shadow-lg: 0 20px 50px rgba(2, 132, 199, .18);
    --shadow-primary: 0 12px 32px rgba(14, 165, 233, .28);
    --radius: 14px;
    --radius-lg: 22px;
    --transition: .35s cubic-bezier(.2,.7,.2,1);
    color-scheme: light;
}

[data-theme="dark"] {
    --color-primary: #38bdf8;
    --color-primary-2: #7dd3fc;
    --color-primary-3: #bae6fd;
    --color-primary-soft: rgba(14, 165, 233, .12);
    --color-primary-darker: #0ea5e9;
    --color-accent: #22d3ee;
    --color-bg: #0b1220;
    --color-bg-2: #0f172a;
    --color-bg-3: #1e293b;
    --color-surface: #111c2e;
    --color-surface-2: #172238;
    --color-border: rgba(148, 184, 232, .12);
    --color-border-2: rgba(148, 184, 232, .22);
    --color-text: #e2e8f0;
    --color-text-2: #cbd5e1;
    --color-muted: #94a3b8;
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --gradient-hero: linear-gradient(180deg, #0b1220 0%, #0f1c33 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 26px rgba(0, 0, 0, .45);
    --shadow-lg: 0 22px 55px rgba(2, 6, 23, .55);
    --shadow-primary: 0 16px 40px rgba(56, 189, 248, .25);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, Segoe UI, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background .25s ease, color .25s ease;
}

html[dir="ltr"] body { font-family: 'Inter','Cairo', system-ui, sans-serif; }

a { color: var(--color-primary); text-decoration: none; transition: color .25s; }
a:hover { color: var(--color-primary-darker); }

::selection { background: var(--color-primary); color: #fff; }
.skip-link { background: var(--color-primary); color: #fff; padding: 8px 12px; border-radius: 6px; position: fixed; top: 10px; inset-inline-start: 10px; z-index: 9999; }

/* Buttons */
.btn-primary-grad {
    background: var(--gradient-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 12px 26px;
    border-radius: 12px;
    box-shadow: var(--shadow-primary);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary-grad:hover,
.btn-primary-grad:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(14, 165, 233, .42);
    filter: brightness(1.05);
}
.btn-outline-primary-2 {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    font-weight: 700;
    padding: 11px 24px;
    border-radius: 12px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-outline-primary-2:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.btn-whatsapp { background: #25d366; color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 12px; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.btn-whatsapp:hover { background: #1eb558; color: #fff; transform: translateY(-2px); }
.btn-call { background: var(--color-text); color: var(--color-bg); font-weight: 700; padding: 12px 22px; border-radius: 12px; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
.btn-call:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

.badge-primary { background: var(--color-primary-soft); color: var(--color-primary-darker); border: 1px solid rgba(14, 165, 233, .25); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .4px; display: inline-block; }
[data-theme="dark"] .badge-primary { color: var(--color-primary-2); }

/* Topbar */
.topbar { background: var(--gradient-primary); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #fff; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.topbar a { color: rgba(255,255,255,.92); }
.topbar a:hover { color: #fff; }
.topbar .lang-switch { display: inline-flex; gap: 6px; align-items: center; }
.topbar .lang-switch button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.topbar .lang-switch button.active, .topbar .lang-switch button:hover { background: #fff; color: var(--color-primary-darker); border-color: #fff; }
.topbar .theme-toggle { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 34px; height: 34px; border-radius: 999px; display: inline-grid; place-items: center; cursor: pointer; transition: var(--transition); }
.topbar .theme-toggle:hover { background: #fff; color: var(--color-primary-darker); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--color-border); transition: background .25s ease, border-color .25s ease; }
[data-theme="dark"] .site-header { background: rgba(11, 18, 32, .82); }
.site-header .navbar { padding: 14px 0; }
.site-header .brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-weight: 900; font-size: 22px; }
.site-header .brand:hover { color: var(--color-primary-darker); }
.site-header .brand .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--gradient-primary); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 18px; box-shadow: var(--shadow-primary); }
.site-header .nav-link { color: var(--color-text) !important; font-weight: 600; padding: 8px 14px !important; border-radius: 10px; transition: var(--transition); }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--color-primary-darker) !important; background: var(--color-primary-soft); }
[data-theme="dark"] .site-header .nav-link:hover,
[data-theme="dark"] .site-header .nav-link.active { color: var(--color-primary-2) !important; }
.site-header .navbar-toggler { border: 1px solid var(--color-border-2); color: var(--color-text); }
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(14,165,233,.25); }

/* Hero */
.hero { position: relative; padding: 90px 0 120px; background: var(--gradient-hero); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image:
    radial-gradient(circle at 12% 18%, rgba(14, 165, 233, .22) 0, transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(6, 182, 212, .18) 0, transparent 30%);
    pointer-events: none; }
[data-theme="dark"] .hero::before { background-image:
    radial-gradient(circle at 12% 18%, rgba(56, 189, 248, .18) 0, transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(34, 211, 238, .14) 0, transparent 28%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 1.12; margin: 0 0 18px; letter-spacing: -.5px; color: var(--color-text); }
.hero h1 .accent { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .subtitle { color: var(--color-text-2); font-size: 18px; max-width: 700px; line-height: 1.85; }
.hero .hero-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .trust-row { margin-top: 36px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; color: var(--color-text-2); font-size: 14px; }
.hero .trust-row .item i { color: var(--color-primary); font-size: 18px; margin-inline-end: 6px; }

.hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); }

/* Sections */
section { padding: 80px 0; }
.section-title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; margin-bottom: 14px; color: var(--color-text); }
.section-subtitle { color: var(--color-muted); font-size: 16px; margin-bottom: 50px; max-width: 700px; }
.section-eyebrow { color: var(--color-primary-darker); font-weight: 800; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--color-primary-soft); border: 1px solid rgba(14, 165, 233, .22); margin-bottom: 18px; }
[data-theme="dark"] .section-eyebrow { color: var(--color-primary-2); }

.bg-soft { background: var(--color-bg-2); }

/* Cards */
.card-elegant { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); transition: var(--transition); overflow: hidden; height: 100%; box-shadow: var(--shadow-sm); }
.card-elegant:hover { transform: translateY(-6px); border-color: var(--color-primary-3); box-shadow: var(--shadow-md); }

.service-card { display: flex; flex-direction: column; padding: 28px; cursor: pointer; }
.service-card .icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--color-primary-soft); display: grid; place-items: center; color: var(--color-primary); font-size: 24px; margin-bottom: 18px; transition: var(--transition); }
.service-card:hover .icon-wrap { background: var(--gradient-primary); color: #fff; transform: rotate(-6deg); }
.service-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--color-text); }
.service-card p { color: var(--color-muted); font-size: 14.5px; line-height: 1.8; margin: 0 0 18px; flex: 1; }
.service-card .arrow { color: var(--color-primary-darker); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
[data-theme="dark"] .service-card .arrow { color: var(--color-primary-2); }

.project-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--color-bg-3); cursor: pointer; box-shadow: var(--shadow-sm); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.project-card video { width: 100%; height: 100%; object-fit: cover; }
.project-card:hover img { transform: scale(1.08); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2, 6, 23, .82) 100%); }
.project-card .info { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1; padding: 22px; }
.project-card .info .tag { display: inline-block; background: var(--gradient-primary); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.project-card .info h4 { color: #fff; font-weight: 800; font-size: 18px; margin: 0; }
.project-card .info p { color: rgba(255,255,255,.75); margin: 4px 0 0; font-size: 13px; }
.project-card .play-icon { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.project-card .play-icon i { width: 64px; height: 64px; background: rgba(255,255,255,.92); color: var(--color-primary-darker); border-radius: 999px; display: grid; place-items: center; font-size: 26px; box-shadow: var(--shadow-lg); transition: var(--transition); }
.project-card:hover .play-icon i { background: #fff; transform: scale(1.1); }

/* Stats */
.stat-card { padding: 28px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-card .num { font-size: 44px; font-weight: 900; color: var(--color-primary-darker); }
[data-theme="dark"] .stat-card .num { color: var(--color-primary-2); }
.stat-card .label { color: var(--color-muted); font-weight: 600; margin-top: 4px; }

/* Testimonials */
.testimonial { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px; height: 100%; box-shadow: var(--shadow-sm); }
.testimonial .stars { color: #f59e0b; margin-bottom: 14px; }
.testimonial .quote { color: var(--color-text); font-size: 16px; line-height: 1.85; margin-bottom: 18px; }
.testimonial .person { display: flex; align-items: center; gap: 12px; }
.testimonial .person .avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--gradient-primary); display: grid; place-items: center; color: #fff; font-weight: 800; }
.testimonial .person .name { font-weight: 800; color: var(--color-text); }
.testimonial .person .role { color: var(--color-muted); font-size: 13px; }

/* FAQ */
.faq-accordion .accordion-item { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; margin-bottom: 12px; overflow: hidden; }
.faq-accordion .accordion-button { background: transparent !important; color: var(--color-text) !important; font-weight: 700; padding: 20px; }
.faq-accordion .accordion-button:not(.collapsed) { background: var(--color-primary-soft) !important; color: var(--color-primary-darker) !important; box-shadow: none; }
[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) { color: var(--color-primary-2) !important; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(14,165,233,.18); }
.faq-accordion .accordion-body { color: var(--color-text-2); padding: 0 20px 22px; line-height: 1.95; }

/* Area chip */
.area-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--color-text); transition: var(--transition); box-shadow: var(--shadow-sm); }
.area-chip i { color: var(--color-primary); }
.area-chip:hover { border-color: var(--color-primary-3); transform: translateY(-3px); color: var(--color-primary-darker); }
[data-theme="dark"] .area-chip:hover { color: var(--color-primary-2); }

/* CTA banner */
.cta-banner { background: var(--gradient-primary); color: #fff; border-radius: var(--radius-lg); padding: 50px; position: relative; overflow: hidden; box-shadow: var(--shadow-primary); }
.cta-banner::before { content: ""; position: absolute; top: -40%; inset-inline-end: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,.18) 0, transparent 60%); }
.cta-banner * { position: relative; z-index: 1; }
.cta-banner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 900; margin-bottom: 12px; color: #fff; }
.cta-banner p { color: rgba(255,255,255,.92); margin-bottom: 22px; }
.cta-banner .btn-call { background: #fff; color: var(--color-primary-darker); }
.cta-banner .btn-call:hover { background: var(--color-text); color: #fff; }

/* Footer */
.site-footer { background: var(--color-bg-2); border-top: 1px solid var(--color-border); padding: 60px 0 24px; margin-top: 80px; color: var(--color-text-2); }
.site-footer h5 { color: var(--color-text); font-weight: 800; margin-bottom: 18px; }
.site-footer a { color: var(--color-muted); display: block; padding: 4px 0; }
.site-footer a:hover { color: var(--color-primary-darker); }
[data-theme="dark"] .site-footer a:hover { color: var(--color-primary-2); }
.site-footer .social-icons a { display: inline-flex; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--color-border-2); align-items: center; justify-content: center; color: var(--color-text); padding: 0; margin-inline-end: 8px; transition: var(--transition); }
.site-footer .social-icons a:hover { background: var(--gradient-primary); border-color: transparent; color: #fff; }
.site-footer .copyright { color: var(--color-muted); border-top: 1px solid var(--color-border); padding-top: 20px; margin-top: 36px; font-size: 13px; }

/* Floating CTAs */
.floating-ctas { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.floating-ctas a { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 24px; box-shadow: 0 12px 24px rgba(2,6,23,.25); transition: var(--transition); }
.floating-ctas a:hover { transform: scale(1.08); }
.floating-ctas .fab-whatsapp { background: #25d366; }
.floating-ctas .fab-call { background: var(--gradient-primary); color: #fff; }

/* Sticky bottom bar (mobile) */
.sticky-mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--color-surface); backdrop-filter: blur(14px); border-top: 1px solid var(--color-border-2); padding: 10px 12px; }
@media (max-width: 768px) {
    .floating-ctas { display: none; }
    .sticky-mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    main { padding-bottom: 70px; }
}

/* Skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--color-bg-3); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(14, 165, 233, .12), transparent); animation: shimmer 1.6s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
html[dir="ltr"] .skeleton::after { animation-direction: normal; }

/* Form */
.form-input, .form-control, .form-select { background: var(--color-surface); border: 1px solid var(--color-border-2); border-radius: 12px; padding: 14px 16px; color: var(--color-text); width: 100%; font-size: 15px; transition: var(--transition); }
.form-input:focus, .form-control:focus, .form-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, .18); background: var(--color-surface-2); color: var(--color-text); }
.form-input::placeholder, .form-control::placeholder { color: var(--color-muted); }
.form-label { font-weight: 600; margin-bottom: 8px; display: block; color: var(--color-text); }

/* Page intro */
.page-intro { padding: 70px 0 40px; background: var(--gradient-hero); border-bottom: 1px solid var(--color-border); }
.page-intro .breadcrumb-line { color: var(--color-muted); font-size: 13px; margin-bottom: 14px; }
.page-intro .breadcrumb-line a { color: var(--color-muted); }
.page-intro .breadcrumb-line a:hover { color: var(--color-primary-darker); }

/* Route progress bar */
.route-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: 0 50%; z-index: 9999; transition: transform .35s; }
.route-progress.active { transform: scaleX(1); }

/* Animations */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.fade-up.in { opacity: 1; transform: translateY(0); }

/* Utility */
.text-primary-2 { color: var(--color-primary-darker) !important; }
[data-theme="dark"] .text-primary-2 { color: var(--color-primary-2) !important; }
.divider-primary { width: 60px; height: 3px; background: var(--gradient-primary); border-radius: 999px; }

/* Project media gallery */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.media-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-3); cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); }
.media-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.media-item img,
.media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item .media-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(2, 6, 23, .7); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(8px); z-index: 2; }
.media-item .media-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.media-item .media-play i { width: 56px; height: 56px; background: rgba(255,255,255,.95); color: var(--color-primary-darker); border-radius: 999px; display: grid; place-items: center; font-size: 22px; box-shadow: var(--shadow-md); transition: var(--transition); }
.media-item:hover .media-play i { background: #fff; transform: scale(1.1); }

/* Video lightbox */
.video-modal-content { background: var(--color-surface); border: 1px solid var(--color-border); }
.video-modal-content .modal-body { padding: 0; }
.video-modal-content video,
.video-modal-content iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; background: #000; }

/* Before/After comparison */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.before-after .ba-cell { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.before-after .ba-cell img { width: 100%; height: 100%; object-fit: cover; }
.before-after .ba-cell .ba-label { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--gradient-primary); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; }

/* Tabs / pills */
.pill-nav { display: inline-flex; gap: 8px; padding: 6px; background: var(--color-bg-2); border-radius: 999px; border: 1px solid var(--color-border); flex-wrap: wrap; }
.pill-nav button { background: transparent; border: 0; color: var(--color-muted); font-weight: 700; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
.pill-nav button.active, .pill-nav button:hover { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-sm); }

/* LTR adjustments */
html[dir="ltr"] .floating-ctas { inset-inline-end: auto; right: 20px; }
html[dir="ltr"] body { letter-spacing: 0; }

/* Bootstrap overrides for theme parity */
[data-theme="dark"] .navbar-toggler-icon { filter: invert(.9) hue-rotate(180deg); }
[data-theme="dark"] .accordion-button::after { filter: invert(.8) sepia(.3) hue-rotate(170deg); }
.text-muted { color: var(--color-muted) !important; }

/* ============================================================================
 * Preloader (shown before app.js boots, fades out on ready)
 * ============================================================================ */
.app-preloader {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 99999;
    display: grid;
    place-items: center;
    transition: opacity .45s ease, visibility .45s ease;
}
.app-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-content { text-align: center; }
.preloader-logo {
    width: 80px; height: 80px;
    border-radius: 22px;
    background: var(--gradient-primary);
    display: grid; place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 30px;
    margin: 0 auto 22px;
    box-shadow: var(--shadow-primary);
    animation: preloader-pulse 1.6s ease-in-out infinite;
    letter-spacing: 1px;
}
@keyframes preloader-pulse {
    0%, 100% { transform: scale(1); box-shadow: var(--shadow-primary); }
    50% { transform: scale(1.06); box-shadow: 0 22px 60px rgba(14,165,233,.5); }
}
.preloader-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--color-border-2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: preloader-spin 1s linear infinite;
    margin: 0 auto 14px;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
.preloader-text {
    color: var(--color-muted);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
}

/* ============================================================================
 * Gallery (portfolio page + home sample)
 * ============================================================================ */
.gallery-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: var(--color-bg-2);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.gallery-tabs .g-tab {
    background: transparent;
    border: 0;
    color: var(--color-muted);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.gallery-tabs .g-tab:hover { color: var(--color-text); }
.gallery-tabs .g-tab.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.gallery-tabs .g-tab-count {
    background: rgba(255,255,255,.18);
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.gallery-tabs .g-tab:not(.active) .g-tab-count {
    background: var(--color-border);
    color: var(--color-muted);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
@media (min-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.g-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-3);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 0;
    padding: 0;
    width: 100%;
}
.g-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.g-item img,
.g-item video,
.g-item .g-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
    background: #000;
}
.g-item:hover img,
.g-item:hover video { transform: scale(1.08); }
.g-item .g-placeholder {
    background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-bg-3) 100%);
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 38px;
}

.g-item .g-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(2,6,23,.85) 100%);
    opacity: 0;
    transition: opacity .3s;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    color: #fff;
    text-align: start;
}
.g-item:hover .g-overlay { opacity: 1; }
.g-item .g-overlay .g-caption {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.g-item .g-type-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    background: rgba(2, 6, 23, .75);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
.g-item .g-type-badge.video { background: rgba(220, 38, 38, .85); }

.g-item .g-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 1;
}
.g-item .g-play i {
    width: 60px; height: 60px;
    background: rgba(255,255,255,.95);
    color: var(--color-primary-darker);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 26px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.g-item:hover .g-play i {
    background: #fff;
    transform: scale(1.12);
}

.g-skel {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-3);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.g-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,.1), transparent);
    animation: shimmer 1.6s infinite;
}

.gallery-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-muted);
}
.gallery-empty i { font-size: 64px; color: var(--color-primary); opacity: .5; display: block; margin-bottom: 16px; }
.gallery-empty h3 { color: var(--color-text); font-weight: 800; margin: 0 0 8px; font-size: 22px; }
.gallery-empty p { margin: 0; }

/* Image lightbox */
.img-lightbox {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .94);
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.img-lightbox.open { opacity: 1; visibility: visible; }
.img-lightbox .il-close {
    position: absolute;
    top: 18px; inset-inline-end: 18px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    display: grid; place-items: center;
    transition: var(--transition);
    z-index: 2;
}
.img-lightbox .il-close:hover { background: rgba(255,255,255,.25); }
.img-lightbox .il-content {
    max-width: 95vw;
    max-height: 90vh;
    text-align: center;
}
.img-lightbox img {
    max-width: 95vw;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    display: block;
    margin: 0 auto;
}
.img-lightbox .il-caption {
    color: #fff;
    font-weight: 600;
    margin-top: 16px;
    font-size: 15px;
}

/* Blog post body */
#post-content.card-elegant {
    height: auto;
    padding: clamp(20px, 3vw, 36px);
}
.post-body { color: var(--color-text-2); }
.post-body h2 {
    color: var(--color-text);
    font-weight: 900;
    font-size: clamp(20px, 2.4vw, 26px);
    margin: 36px 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--color-primary);
    line-height: 1.4;
}
.post-body h3 {
    color: var(--color-text);
    font-weight: 800;
    font-size: clamp(18px, 2vw, 22px);
    margin: 28px 0 10px;
}
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { padding-inline-start: 24px; margin: 0 0 18px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { color: var(--color-text); font-weight: 800; }
.post-body a {
    color: var(--color-primary-darker);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-primary-3);
    text-underline-offset: 3px;
}
.post-body a:hover { color: var(--color-primary); }
.post-body blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    background: var(--color-primary-soft);
    border-inline-start: 4px solid var(--color-primary);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--color-text);
}
.post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; }

/* Review submission form */
@keyframes spin { to { transform: rotate(360deg); } }
.review-form-wrap {
    margin-top: 32px;
    animation: fadeIn .35s ease;
}
.review-form-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    max-width: 780px;
    margin: 0 auto;
}
.review-close-btn {
    position: absolute;
    top: 14px; inset-inline-end: 14px;
    background: var(--color-bg-3);
    color: var(--color-text-2);
    border: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    transition: var(--transition);
}
.review-close-btn:hover { background: var(--color-danger); color: #fff; }
.review-form-title {
    text-align: center;
    font-weight: 900;
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--color-text);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.review-form-sub {
    text-align: center;
    color: var(--color-muted);
    margin: 0 0 24px;
}
.review-form .form-label { color: var(--color-text); font-weight: 600; margin-bottom: 6px; }
.review-form .form-control {
    background: var(--color-bg-2);
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    border-radius: 10px;
    padding: 10px 14px;
    transition: var(--transition);
}
.review-form .form-control:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}
.review-stars {
    display: inline-flex;
    gap: 6px;
    font-size: 28px;
    color: var(--color-border-2);
    cursor: pointer;
    user-select: none;
}
.review-stars .star { transition: color .15s, transform .15s; }
.review-stars .star:hover { transform: scale(1.15); }
.review-stars .star.on,
.review-stars .star.hover { color: #f59e0b; }
.review-form-actions {
    margin-top: 22px;
    text-align: center;
}
.review-form-msg {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
}
.review-form-msg.ok {
    background: rgba(22,163,74,.12);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,.3);
}
.review-form-msg.err {
    background: rgba(220,38,38,.12);
    color: var(--color-danger);
    border: 1px solid rgba(220,38,38,.3);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Unified Gallery Lightbox — images + videos + arrows + swipe */
.gallery-lightbox {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .96);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity .25s ease;
    padding: 20px;
}
.gallery-lightbox.open { display: block; opacity: 1; }
.gallery-lightbox .glb-stage {
    position: absolute;
    inset: 70px 80px 90px 80px;
    display: grid;
    place-items: center;
    touch-action: pan-y;
}
.gallery-lightbox .glb-stage img,
.gallery-lightbox .glb-stage video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    display: block;
    background: #000;
}
.gallery-lightbox .glb-stage iframe {
    width: min(95vw, 1100px);
    height: min(75vh, 620px);
    aspect-ratio: 16/9;
    border: 0;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.gallery-lightbox .glb-close,
.gallery-lightbox .glb-nav {
    position: absolute;
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    transition: var(--transition);
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}
.gallery-lightbox .glb-close { top: 18px; inset-inline-end: 18px; width: 46px; height: 46px; font-size: 20px; }
.gallery-lightbox .glb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 26px; }
.gallery-lightbox .glb-prev { inset-inline-start: 18px; }
.gallery-lightbox .glb-next { inset-inline-end: 18px; }
.gallery-lightbox .glb-close:hover,
.gallery-lightbox .glb-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.07); }
.gallery-lightbox .glb-close:hover { transform: scale(1.07); }
.gallery-lightbox .glb-counter {
    position: absolute;
    top: 22px; inset-inline-start: 22px;
    color: #fff;
    background: rgba(255,255,255,.12);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    z-index: 3;
}
.gallery-lightbox .glb-caption {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 0 80px;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 640px) {
    .gallery-lightbox .glb-stage { inset: 60px 12px 80px 12px; }
    .gallery-lightbox .glb-nav { width: 44px; height: 44px; font-size: 22px; }
    .gallery-lightbox .glb-prev { inset-inline-start: 10px; }
    .gallery-lightbox .glb-next { inset-inline-end: 10px; }
    .gallery-lightbox .glb-close { width: 40px; height: 40px; top: 12px; inset-inline-end: 12px; font-size: 18px; }
    .gallery-lightbox .glb-counter { top: 16px; inset-inline-start: 14px; font-size: 12px; padding: 4px 10px; }
    .gallery-lightbox .glb-caption { padding: 0 14px; font-size: 13px; bottom: 14px; }
    .gallery-lightbox .glb-stage iframe { height: min(60vh, 380px); }
}