/*
Theme Name: Sanad Media Ultimate Final
Theme URI: https://sanadmedia.store
Description: قالب احترافي لوكالة سند ميديا للدعاية والإعلان - وكالة دعاية وإعلان متخصصة في تصميم الهويات البصرية وإدارة السوشيال ميديا
Version: 4.1.1
Author: Sanaad Media
Author URI: https://sanadmedia.store
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanaad-media
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ========================================
   سند ميديا - نظام التصميم
   ======================================== */

:root {
  --primary: #C40000;
  --primary-light: #C40000;
  --primary-dark: #8F0000;
  --accent: #C40000;
  --background: #ffffff;
  --foreground: #1F1F1F;
  --border: #e5e5e5;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ========================================
   إعادة تعيين وأساسيات
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  direction: rtl;
}

body {
  font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-size: 16px;
}

/* ========================================
   الخطوط والنصوص
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.875rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

/* ========================================
   الحاوية والتخطيط
   ======================================== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container-fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========================================
   الشريط العلوي (Header)
   ======================================== */

.site-header {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.site-description {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ========================================
   القائمة الرئيسية
   ======================================== */

.main-navigation {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.main-navigation a {
  color: var(--foreground);
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.main-navigation a:hover,
.main-navigation a.active {
  color: var(--primary-light);
}

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-light);
  transition: width 0.3s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
  width: 100%;
}

.cta-button {
  background-color: var(--primary-light);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.cta-button:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   قسم البطل (Hero)
   ======================================== */

.hero-section {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-text h1 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
}

.hero-text p {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin-bottom: 2rem;
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-lg);
}

/* ========================================
   الأقسام العامة
   ======================================== */

section {
  padding: 5rem 0;
}

section.alt {
  background-color: var(--gray-50);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   الخدمات
   ======================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: white;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.service-icon {
  width: 60px;
  height: 60px;
  background-color: var(--gray-100);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: var(--primary-light);
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  background-color: var(--primary-light);
  color: white;
  transform: scale(1.1);
}

.service-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.service-card p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

/* ========================================
   المحفظة
   ======================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.portfolio-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.1);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(106, 4, 15, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h3 {
  color: white;
  margin-bottom: 0.5rem;
}

.portfolio-overlay p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

/* ========================================
   نموذج الاتصال
   ======================================== */

.contact-section {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1.5rem;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background-color: var(--primary-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.contact-text h3 {
  color: var(--primary);
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
}

.contact-text p {
  color: var(--gray-600);
  margin: 0;
}

/* ========================================
   النموذج
   ======================================== */

.contact-form {
  background-color: white;
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--foreground);
}

.form-group label .required {
  color: var(--danger);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(188, 52, 38, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.form-submit {
  background-color: var(--primary-light);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.form-submit:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.form-privacy {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-privacy i {
  color: var(--success);
}

/* ========================================
   قسم لماذا تختار سند ميديا
   ======================================== */

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.why-us-card {
  background-color: white;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: center;
}

.why-us-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.why-us-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.5rem;
  color: white;
  transition: all 0.3s ease;
}

.why-us-card:hover .why-us-icon {
  transform: scale(1.15) rotate(5deg);
}

.why-us-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.why-us-card p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

/* ========================================
   التذييل (Footer)
   ======================================== */

.site-footer {
  background-color: var(--gray-900);
  color: var(--gray-300);
  padding: 3rem 0 1rem;
  margin-top: 5rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column h3 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column a {
  color: var(--gray-300);
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: var(--primary-light);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  width: 40px;
  height: 40px;
  background-color: var(--gray-800);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--primary-light);
  color: white;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: 2rem;
  text-align: center;
  color: var(--gray-500);
}

/* ========================================
   الاستجابة
   ======================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-text h1 {
    font-size: 2.25rem;
  }

  .main-navigation {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .contact-content {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  section {
    padding: 3rem 0;
  }

  .hero-text h1 {
    font-size: 1.75rem;
  }

  .main-navigation {
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  .cta-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* ========================================
   Sanad Media V2 refinements + mobile fixes
   ======================================== */
:root {
  --sanad-red: #D70000;
  --sanad-black: #1F1F1F;
  --sanad-gray: #555555;
  --sanad-light: #F2F2F2;
  --container-pad: clamp(1rem, 3vw, 2rem);
}

html, body { overflow-x: hidden; }
body { background: #fff; color: var(--sanad-black); }
img { max-width: 100%; height: auto; }
.container { width: min(1280px, calc(100% - 2rem)); padding-left: 0; padding-right: 0; }

.site-header {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(31,31,31,.08);
}
.header-content { min-height: 76px; gap: 1rem; }
.site-logo { color: var(--sanad-black); min-width: 0; }
.site-logo:hover { color: var(--sanad-black); }
.site-logo img, .custom-logo-link img { height: 52px; max-width: 190px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.site-title-text { font-size: 1.15rem; color: var(--sanad-black); }
.brand-copy small { color: #555; font-weight: 700; font-size: .82rem; }
.fallback-logo-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--sanad-red); color:#fff; display:grid; place-items:center; font-weight:900; font-size:1.6rem; }

.nav-menu { display:flex; align-items:center; gap: 1.4rem; list-style:none; margin:0; padding:0; }
.nav-menu a { color: var(--sanad-black); font-weight: 800; font-size: .96rem; }
.header-cta { white-space: nowrap; padding: .72rem 1.15rem; border-radius: 999px; }
.menu-toggle { display:none; width: 44px; height:44px; border:0; border-radius: 14px; background:#fff; box-shadow: var(--shadow-sm); align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; }
.menu-toggle span { width:22px; height:2px; border-radius: 9px; background: var(--sanad-black); transition: .25s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.section-with-shapes::before, .section-with-shapes::after { content:""; position:absolute; border-radius: 999px; pointer-events:none; }
.section-with-shapes::before { width: 520px; height: 520px; border: 34px solid rgba(215,0,0,.08); left: -160px; top: -180px; }
.section-with-shapes::after { width: 360px; height: 360px; background: radial-gradient(circle, rgba(215,0,0,.09), transparent 70%); right: -120px; bottom: -130px; }
.hero-section { padding: clamp(3.5rem, 8vw, 7rem) 0; background: linear-gradient(135deg,#fff 0%,#fafafa 100%); }
.hero-content { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:var(--sanad-red); font-weight:900; margin-bottom:.85rem; }
.eyebrow::before { content:""; width:34px; height:3px; border-radius:9px; background:var(--sanad-red); }
.hero-text h1 { color: var(--sanad-black); font-size: clamp(2.1rem, 5vw, 4.7rem); letter-spacing: -.04em; margin-bottom:1rem; }
.hero-text h1 span, .section-header h2 span { color: var(--sanad-red); }
.hero-text p { color: var(--sanad-gray); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 620px; }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap: wrap; margin: 2rem 0; }
.cta-button, .form-submit { background: linear-gradient(135deg, #E10000, #B90000); color:#fff !important; border-radius: 999px; border:0; box-shadow: 0 14px 30px rgba(215,0,0,.22); }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.35rem; border-radius:999px; border:1px solid rgba(31,31,31,.14); color:var(--sanad-black); font-weight:800; background:#fff; }
.hero-mini-cards { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-mini-cards span { display:inline-flex; align-items:center; gap:.45rem; background:#fff; color:#333; border:1px solid rgba(31,31,31,.08); border-radius:999px; padding:.65rem .9rem; box-shadow: var(--shadow-sm); font-weight:800; }
.hero-mini-cards i { color: var(--sanad-red); }
.hero-image img, .section-visual img { border-radius: 28px; box-shadow: 0 20px 55px rgba(31,31,31,.12); object-fit: cover; }

.stats-strip { padding: 0 0 3rem; margin-top: -1.5rem; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.stats-grid div { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius: 22px; padding:1.2rem; text-align:center; box-shadow: var(--shadow-md); }
.stats-grid strong { display:block; font-size: clamp(1.4rem, 4vw, 2.4rem); color:var(--sanad-red); line-height:1; }
.stats-grid span { color:#555; font-weight:800; }

.split-section { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.section-copy h2, .section-header h2 { color: var(--sanad-black); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.025em; }
.section-copy p, .section-header p { color:#555; font-size: 1.08rem; }
.feature-list { display:grid; gap:.75rem; margin-top:1.4rem; }
.feature-list span { display:flex; gap:.7rem; align-items:center; font-weight:800; color:#333; }
.feature-list i { color:var(--sanad-red); }

.services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.service-card { border-radius: 24px; padding: 1.45rem; box-shadow: 0 8px 24px rgba(31,31,31,.06); border-color: rgba(31,31,31,.07); }
.service-icon { width: 86px; height: 86px; background: #fff5f5; border-radius: 22px; }
.service-icon img { width: 78px; height: 78px; object-fit: contain; display:block; }
.service-card:hover .service-icon { background:#fff0f0; color: var(--sanad-red); transform: translateY(-4px) scale(1.03); }
.service-card h3 { color: var(--sanad-black); font-size: 1.2rem; }
.text-link { display:inline-flex; margin-top:.55rem; color:var(--sanad-red); font-weight:900; }

.process-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; counter-reset: step; }
.process-card { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius: 24px; padding:1.5rem; box-shadow: var(--shadow-sm); position:relative; overflow:hidden; }
.process-card::after { content:""; position:absolute; inset:auto auto -40px -40px; width:110px; height:110px; border-radius:50%; background:rgba(215,0,0,.07); }
.process-number { display:grid; place-items:center; width:44px; height:44px; border-radius: 14px; background:var(--sanad-red); color:#fff; font-weight:900; margin-bottom:1rem; }
.process-card h3 { color:var(--sanad-black); font-size:1.2rem; }
.process-card p { color:#555; margin:0; }

.portfolio-filters { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:2rem; }
.filter-button { border:1px solid rgba(31,31,31,.1); background:#fff; color:#333; padding:.72rem 1rem; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:900; }
.filter-button.active, .filter-button:hover { background:var(--sanad-red); color:#fff; border-color:var(--sanad-red); }
.enhanced-portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-card { background:#fff; position:relative; box-shadow: var(--shadow-md); border:1px solid rgba(31,31,31,.08); }
.portfolio-card img { height: 260px; object-fit: cover; transform:none !important; }
.portfolio-card-body { padding:1.2rem; }
.portfolio-badge { display:inline-flex; background:#fff0f0; color:var(--sanad-red); font-weight:900; padding:.35rem .7rem; border-radius:999px; margin-bottom:.75rem; font-size:.82rem; }
.portfolio-card-body h3 { font-size:1.2rem; color:var(--sanad-black); margin-bottom:.5rem; }
.portfolio-card-body p { color:#555; margin:0; font-size:.95rem; }
.portfolio-overlay { display:none; }
.portfolio-card.is-hidden { display:none; }

.apps-cards { display:grid; gap:1rem; }
.app-mini-card { display:grid; grid-template-columns: 150px 1fr; align-items:center; gap:1rem; background:#fff; border-radius:22px; border:1px solid rgba(31,31,31,.08); padding:.75rem; box-shadow: var(--shadow-sm); }
.app-mini-card img { width:150px; height:95px; object-fit:cover; border-radius:16px; }
.app-mini-card strong { color:var(--sanad-black); font-size:1.15rem; }

.faq-list { max-width: 850px; margin:0 auto; display:grid; gap:.8rem; }
.faq-item { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius:18px; padding:1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor:pointer; font-weight:900; color:var(--sanad-black); }
.faq-item p { margin:.8rem 0 0; color:#555; }

.contact-content { grid-template-columns: .9fr 1.1fr; }
.contact-item { align-items:center; background:#fff; border:1px solid rgba(31,31,31,.08); border-radius:20px; padding:1rem; box-shadow: var(--shadow-sm); }
.contact-icon { background: var(--sanad-red); border-radius:16px; }
.contact-text h3 { color:var(--sanad-black); }
.contact-form { border:1px solid rgba(31,31,31,.08); border-radius: 24px; box-shadow: 0 18px 45px rgba(31,31,31,.08); }
.form-group input, .form-group textarea { border:1px solid rgba(31,31,31,.12); background:#fbfbfb; }
.whatsapp-inline { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; padding:.9rem; border-radius:999px; color:#128c7e; background:#f2fffb; font-weight:900; }

.site-footer { margin-top:0; background:#111; border-top:4px solid var(--sanad-red); }
.footer-brand p { color:#cfcfcf; }
.footer-contact-list i { color:var(--sanad-red); margin-left:.5rem; }
.floating-whatsapp { position:fixed; left:18px; bottom:18px; z-index:999; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff !important; font-size:2rem; box-shadow:0 14px 35px rgba(0,0,0,.24); }

@media (max-width: 1080px) {
  .services-grid, .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enhanced-portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .main-navigation { gap: .75rem; }
  .nav-menu { gap: .85rem; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 1.25rem, 1280px); }
  .header-content { min-height: 68px; }
  .site-logo img, .custom-logo-link img { height: 44px; max-width: 150px; }
  .brand-copy { display:none; }
  .menu-toggle { display:flex; }
  .main-navigation {
    position: fixed;
    top: 68px;
    right: .75rem;
    left: .75rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    padding: 1rem;
    border-radius: 22px;
    background:#fff;
    box-shadow: 0 18px 50px rgba(31,31,31,.18);
    border:1px solid rgba(31,31,31,.08);
  }
  .main-navigation.active { display:flex; }
  .nav-menu { flex-direction: column; align-items: stretch; gap:0; }
  .nav-menu li { border-bottom:1px solid rgba(31,31,31,.06); }
  .nav-menu a { display:block; padding:.85rem .5rem; }
  .header-cta { text-align:center; width:100%; }

  .hero-content, .split-section, .contact-content { grid-template-columns: 1fr; }
  .reverse-on-mobile .section-copy { order: 1; }
  .reverse-on-mobile .apps-cards { order: 2; }
  .hero-section { padding-top: 2.5rem; }
  .hero-text { text-align:center; }
  .eyebrow { justify-content:center; }
  .hero-actions, .hero-mini-cards { justify-content:center; }
  .hero-image img { border-radius: 22px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid, .process-grid, .enhanced-portfolio-grid { grid-template-columns: 1fr; }
  .service-card { padding: 1.1rem; }
  .portfolio-card img { height: 220px; }
  .app-mini-card { grid-template-columns: 118px 1fr; }
  .app-mini-card img { width:118px; height:76px; }
  .contact-item { gap:.85rem; }
  .contact-form { padding:1.25rem; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  section { padding: 2.75rem 0; }
  .hero-text h1 { font-size: clamp(2rem, 12vw, 2.7rem); }
  .section-copy h2, .section-header h2 { font-size: clamp(1.55rem, 9vw, 2.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions a { width:100%; }
  .hero-mini-cards { display:grid; grid-template-columns: 1fr; }
  .stats-grid { gap:.7rem; }
  .stats-grid div { padding: .95rem .5rem; border-radius: 16px; }
  .services-grid { gap:.8rem; }
  .service-card { display:grid; grid-template-columns: 72px 1fr; text-align:right; gap: .7rem 1rem; align-items:center; }
  .service-card .service-icon { grid-row: span 3; width:64px; height:64px; margin:0; }
  .service-icon img { width:58px; height:58px; }
  .service-card h3 { margin:0; font-size:1.05rem; }
  .service-card p { margin:0; font-size:.9rem; }
  .text-link { margin-top:.15rem; }
  .portfolio-card img { height: 205px; }
  .footer-content { grid-template-columns: 1fr; }
  .floating-whatsapp { width:52px; height:52px; font-size:1.75rem; left:14px; bottom:14px; }
}

/* ========================================
   SEO pages + indexing-friendly templates
   ======================================== */
.page-main .page-hero,
.page-hero {
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.75rem, 6vw, 5rem);
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: .5rem 0 .85rem;
  color: var(--sanad-black);
}
.page-hero p {
  color: var(--sanad-gray);
  max-width: 760px;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  font-weight: 600;
}
.narrow-container { max-width: 940px; }
.page-content-section { background: #fff; }
.page-entry-card {
  background: #fff;
  border: 1px solid rgba(31,31,31,.08);
  border-radius: 28px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.page-featured-image { margin: 0 0 1.5rem; }
.page-featured-image img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-sm); }
.rich-content { color: var(--sanad-black); font-size: 1.05rem; line-height: 1.9; }
.rich-content h2, .rich-content h3 { color: var(--sanad-black); margin: 1.6rem 0 .75rem; }
.rich-content p { color: #444; margin-bottom: 1rem; }
.rich-content a { color: var(--sanad-red); font-weight: 800; }
.single-cta { margin-top: 2rem; display: flex; justify-content: flex-start; }
.portfolio-image-link { display:block; overflow:hidden; border-radius: 22px 22px 0 0; }
.portfolio-card h2 { font-size: 1.15rem; margin: .65rem 0 .5rem; }
.portfolio-card h2 a, .service-card h2 a { color: var(--sanad-black); }
.portfolio-card h2 a:hover, .service-card h2 a:hover { color: var(--sanad-red); }
.pagination, .nav-links { display:flex; justify-content:center; gap:.65rem; flex-wrap:wrap; margin-top:2rem; }
.page-numbers { display:inline-flex; min-width:42px; min-height:42px; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(31,31,31,.12); color:var(--sanad-black); font-weight:800; background:#fff; }
.page-numbers.current, .page-numbers:hover { background:var(--sanad-red); color:#fff; border-color:var(--sanad-red); }

@media (max-width: 820px) {
  .page-hero { text-align: center; padding-top: 2.5rem; }
  .page-hero p { margin-left: auto; margin-right: auto; }
  .single-cta { justify-content: center; }
  .page-entry-card { border-radius: 22px; }
}

@media (max-width: 520px) {
  .page-hero h1 { font-size: clamp(1.8rem, 10vw, 2.5rem); }
  .page-entry-card { padding: 1.1rem; }
  .rich-content { font-size: .98rem; line-height: 1.8; }
  .single-cta .cta-button { width: 100%; text-align:center; }
}


/* ========================================
   ترقية استراتيجية سند ميديا V2
   ======================================== */
:root{
  --luxury-black:#222222;
  --soft-text:#555555;
  --white:#FFFFFF;
  --surface:#F2F2F2;
  --transition-smooth:cubic-bezier(.22,1,.36,1);
  --shadow-premium:0 22px 70px rgba(34,34,34,.10);
}

html{scroll-padding-top:92px}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
section{position:relative}
.section-with-shapes:before,
.section-with-shapes:after{
  content:"";position:absolute;pointer-events:none;z-index:0;border-radius:999px;
  background:radial-gradient(circle, rgba(196,0,0,.11), rgba(196,0,0,0) 68%);
}
.section-with-shapes:before{width:420px;height:420px;top:-180px;left:-120px}
.section-with-shapes:after{width:260px;height:260px;bottom:-120px;right:-80px}

.site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.site-logo img,.custom-logo{max-height:54px;width:auto}
.brand-copy strong{font-weight:900}
.brand-copy small{color:#555;font-weight:600}
.nav-menu a{position:relative;font-weight:800}
.nav-menu a:after{
  content:"";position:absolute;right:0;bottom:-7px;width:0;height:2px;background:var(--primary);
  transition:width .28s var(--transition-smooth);border-radius:8px;
}
.nav-menu a:hover:after,.nav-menu a.active:after{width:100%}

.hero-section{overflow:hidden;background:
  linear-gradient(135deg,#fff 0%,#fff 45%,#f9f9f9 100%);
}
.hero-section .container,.hero-content{position:relative;z-index:1}
.hero-text h1{letter-spacing:-1.5px;font-weight:900}
.hero-slogan{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.65rem 1rem;
  border:1px solid rgba(196,0,0,.14);background:rgba(196,0,0,.06);color:var(--primary);
  border-radius:999px;font-weight:900;box-shadow:0 10px 30px rgba(196,0,0,.08);
}
.hero-slogan:before{content:"";width:9px;height:9px;background:var(--primary);border-radius:50%;box-shadow:0 0 0 8px rgba(196,0,0,.10)}
.hero-image img,.section-visual img{
  border-radius:34px;box-shadow:var(--shadow-premium);
  transform:perspective(1200px) rotateY(-3deg);
  transition:transform .5s var(--transition-smooth), box-shadow .5s var(--transition-smooth);
}
.hero-image img:hover,.section-visual img:hover{transform:perspective(1200px) rotateY(0deg) translateY(-5px);box-shadow:0 28px 90px rgba(34,34,34,.16)}

.cta-button,.secondary-button,.form-submit{
  position:relative;overflow:hidden;border-radius:999px;transition:transform .28s var(--transition-smooth),box-shadow .28s var(--transition-smooth),background .28s var(--transition-smooth);
}
.cta-button:before,.form-submit:before{
  content:"";position:absolute;inset:0;transform:translateX(110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .6s var(--transition-smooth);
}
.cta-button:hover:before,.form-submit:hover:before{transform:translateX(-110%)}
.cta-button:hover,.secondary-button:hover,.form-submit:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(196,0,0,.18)}

.service-card,.portfolio-card,.process-card,.contact-item,.page-entry-card,.faq-item{
  transition:transform .32s var(--transition-smooth), box-shadow .32s var(--transition-smooth), border-color .32s var(--transition-smooth);
}
.service-card:hover,.portfolio-card:hover,.process-card:hover,.contact-item:hover,.faq-item:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-premium);border-color:rgba(196,0,0,.15);
}
.service-icon img{filter:drop-shadow(0 15px 24px rgba(34,34,34,.12));transition:transform .35s var(--transition-smooth)}
.service-card:hover .service-icon img{transform:scale(1.08) rotate(-3deg)}

.portfolio-image-wrap{position:relative;overflow:hidden;border-radius:24px 24px 0 0;background:#f2f2f2}
.portfolio-image-wrap:after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(34,34,34,.45));
  opacity:0;transition:opacity .35s var(--transition-smooth);
}
.portfolio-card:hover .portfolio-image-wrap:after{opacity:1}
.portfolio-card img{transition:transform .55s var(--transition-smooth)}
.portfolio-card:hover img{transform:scale(1.055)}
.portfolio-open{border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:900;color:var(--primary);padding:0}

.packages-section{padding:90px 0;background:linear-gradient(180deg,#fff,#fafafa)}
.packages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.package-card{
  background:#fff;border:1px solid rgba(34,34,34,.08);border-radius:30px;padding:2rem;box-shadow:0 14px 40px rgba(34,34,34,.07);
  position:relative;overflow:hidden;transition:.32s var(--transition-smooth);
}
.package-card:before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--primary);opacity:.2}
.package-card.featured{background:#222;color:#fff;transform:translateY(-10px)}
.package-card.featured p,.package-card.featured li,.package-card.featured .package-price{color:#fff}
.package-card:hover{transform:translateY(-10px);box-shadow:0 28px 80px rgba(34,34,34,.14)}
.package-tag{display:inline-flex;padding:.45rem .8rem;border-radius:999px;background:rgba(196,0,0,.08);color:var(--primary);font-weight:900;margin-bottom:1rem}
.package-card.featured .package-tag{background:rgba(255,255,255,.12);color:#fff}
.package-price{display:block;font-size:1.4rem;color:#222;margin:0 0 1.25rem;font-weight:900}
.package-card ul{list-style:none;padding:0;margin:0 0 1.5rem}
.package-card li{display:flex;gap:.7rem;align-items:flex-start;margin:.75rem 0;color:#555;font-weight:700}
.package-card li i{color:var(--primary);margin-top:.25rem}
.package-card.featured li i{color:#fff}
.package-button{width:100%;justify-content:center;text-align:center}

.motion-showcase-section{padding:85px 0}
.motion-preview-card{
  min-height:360px;border-radius:36px;background:
  radial-gradient(circle at 22% 20%,rgba(196,0,0,.3),transparent 34%),
  linear-gradient(135deg,#222,#0f0f0f);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 30px 90px rgba(34,34,34,.24);
  position:relative;overflow:hidden;
}
.play-pulse{width:88px;height:88px;border-radius:50%;background:#C40000;display:grid;place-items:center;font-size:2rem;box-shadow:0 0 0 0 rgba(196,0,0,.45);animation:pulseRing 1.8s infinite}
.motion-preview-card strong{font-size:2rem;margin-top:1.5rem;font-family:'Poppins','Cairo',sans-serif}
.motion-preview-card small{opacity:.75;letter-spacing:1px}
.motion-lines span{position:absolute;height:2px;background:rgba(255,255,255,.12);width:55%;right:12%;animation:floatLine 6s infinite linear}
.motion-lines span:nth-child(1){top:20%}.motion-lines span:nth-child(2){top:50%;animation-delay:1s}.motion-lines span:nth-child(3){top:78%;animation-delay:2s}
@keyframes pulseRing{70%{box-shadow:0 0 0 28px rgba(196,0,0,0)}100%{box-shadow:0 0 0 0 rgba(196,0,0,0)}}
@keyframes floatLine{0%{transform:translateX(25%);opacity:.08}50%{opacity:.25}100%{transform:translateX(-45%);opacity:.08}}

.trust-section{padding:90px 0;background:#fff}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-bottom:2.5rem}
.testimonial-card{background:#fff;border:1px solid rgba(34,34,34,.08);border-radius:28px;padding:1.6rem;box-shadow:0 14px 38px rgba(34,34,34,.06)}
.testimonial-card i{color:var(--primary);font-size:1.8rem;margin-bottom:1rem}
.testimonial-card p{color:#555;font-weight:700}.testimonial-card strong{color:#222;font-weight:900}
.partners-marquee{overflow:hidden;border-radius:24px;border:1px solid rgba(34,34,34,.08);background:#f9f9f9;padding:1rem}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marqueeRtl 24s linear infinite}
.marquee-track span{white-space:nowrap;background:#fff;border-radius:999px;padding:.75rem 1.25rem;color:#222;font-weight:900;box-shadow:0 8px 25px rgba(34,34,34,.06)}
@keyframes marqueeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.contact-form select,.contact-form input,.contact-form textarea{
  width:100%;border:1px solid rgba(34,34,34,.12);border-radius:16px;padding:.95rem 1rem;background:#fff;font-family:inherit;
}
.contact-form select:focus,.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(196,0,0,.08)
}

.portfolio-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:1rem}
.portfolio-modal.is-open{display:flex}
.portfolio-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
.portfolio-modal-content{
  position:relative;z-index:1;width:min(980px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:32px;box-shadow:0 30px 100px rgba(0,0,0,.35);
  display:grid;grid-template-columns:1.05fr .95fr;direction:rtl;
}
.portfolio-modal-image{width:100%;height:100%;min-height:420px;object-fit:cover;background:#f2f2f2}
.portfolio-modal-body{padding:2rem}
.portfolio-modal-body h3{font-size:2rem;font-weight:900}
.portfolio-modal-close{position:absolute;top:1rem;left:1rem;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#222;font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.case-story{display:grid;gap:.8rem;margin:1.4rem 0}
.case-story div{background:#f7f7f7;border-radius:18px;padding:1rem;border-right:3px solid var(--primary)}
.case-story strong{display:block;color:#222;margin-bottom:.25rem}.case-story span{color:#555;font-weight:700}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media(max-width:1024px){
  .packages-grid,.testimonials-grid{grid-template-columns:1fr}
  .package-card.featured{transform:none}
  .portfolio-modal-content{grid-template-columns:1fr}
  .portfolio-modal-image{height:360px;min-height:0}
}

@media(max-width:768px){
  html{scroll-padding-top:78px}
  .container{padding-inline:1rem}
  .site-header{position:sticky}
  .header-content{padding:.75rem 0}
  .site-logo img,.custom-logo{max-height:42px}
  .brand-copy small{display:none}
  .main-navigation.active{
    top:72px;max-height:calc(100dvh - 72px);overflow:auto;
    border-radius:0 0 26px 26px;box-shadow:0 22px 50px rgba(34,34,34,.14)
  }
  .hero-section{padding:54px 0 36px}
  .hero-content,.split-section{grid-template-columns:1fr!important;gap:1.5rem;text-align:right}
  .hero-text h1{font-size:clamp(2.1rem,10vw,3.3rem);line-height:1.08}
  .hero-text p{font-size:1rem}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:.75rem}
  .hero-mini-cards{grid-template-columns:1fr;gap:.5rem}
  .hero-image img,.section-visual img{border-radius:24px;transform:none}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .section-header h2,.section-copy h2{font-size:clamp(1.8rem,7vw,2.45rem)}
  .services-grid,.portfolio-grid,.process-grid,.apps-cards{grid-template-columns:1fr!important}
  .portfolio-filters{display:flex;overflow:auto;gap:.5rem;padding-bottom:.5rem;scroll-snap-type:x mandatory}
  .filter-button{white-space:nowrap;scroll-snap-align:start}
  .portfolio-card img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .packages-section,.trust-section,.motion-showcase-section{padding:56px 0}
  .form-row{grid-template-columns:1fr}
  .contact-content{grid-template-columns:1fr!important}
  .portfolio-modal{padding:.75rem;align-items:flex-end}
  .portfolio-modal-content{border-radius:26px 26px 0 0;max-height:90dvh}
  .portfolio-modal-image{height:260px}
  .portfolio-modal-body{padding:1.25rem}
  .floating-whatsapp{bottom:18px;left:18px;width:56px;height:56px}
}

@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr}
  .hero-slogan{font-size:.9rem}
  .portfolio-modal-image{height:220px}
}



/* ========================================
   تعدد اللغات / LTR + Currency + Chatbot
   ======================================== */
html[dir="ltr"], body.ltr-layout{direction:ltr;text-align:left}
body.ltr-layout{font-family:'Poppins','Inter','Cairo',sans-serif}
body.ltr-layout .site-logo,
body.ltr-layout .header-content,
body.ltr-layout .hero-actions,
body.ltr-layout .feature-list span,
body.ltr-layout .contact-item,
body.ltr-layout .package-card li{direction:ltr}
body.ltr-layout .nav-menu a:after{right:auto;left:0}
body.ltr-layout .section-with-shapes:before{left:auto;right:-120px}
body.ltr-layout .section-with-shapes:after{right:auto;left:-80px}
body.ltr-layout .case-story div{border-right:0;border-left:3px solid var(--primary)}
body.ltr-layout .notification{right:auto;left:20px;border-right:0;border-left:4px solid var(--primary)}
body.ltr-layout .floating-whatsapp{right:28px;left:auto}
body.ltr-layout .portfolio-modal-content{direction:ltr}
body.ltr-layout .portfolio-modal-close{left:auto;right:1rem}
body.ltr-layout .menu-toggle{margin-left:auto;margin-right:0}

.header-actions{display:flex;align-items:center;gap:.75rem}
.language-switcher,.currency-switcher{
  display:inline-flex;align-items:center;gap:.4rem;background:#f5f5f5;border:1px solid rgba(34,34,34,.08);
  padding:.35rem;border-radius:999px;box-shadow:0 8px 20px rgba(34,34,34,.04)
}
.language-switcher a,.currency-button{
  min-width:42px;height:34px;display:grid;place-items:center;border-radius:999px;border:0;background:transparent;
  color:#555;font-weight:900;font-family:inherit;cursor:pointer;transition:.25s ease
}
.language-switcher a.active,.language-switcher a:hover,.currency-button.active,.currency-button:hover{
  background:#C40000;color:#fff;box-shadow:0 10px 20px rgba(196,0,0,.18)
}
.currency-switcher{margin:0 auto 1.5rem;widh:max-content;display:flex;justify-content:center}
.currency-switcher span{font-weight:900;color:#222;margin-inline:.35rem}
.currency-note{display:block;color:#777;font-weight:700;margin-top:-.75rem;margin-bottom:1rem}

.sanad-chatbot{position:fixed;bottom:96px;left:24px;z-index:9998}
body.ltr-layout .sanad-chatbot{left:auto;right:24px}
.chatbot-toggle{
  border:0;border-radius:999px;background:#222;color:#fff;padding:.85rem 1rem;display:flex;align-items:center;gap:.5rem;
  font-family:inherit;font-weight:900;box-shadow:0 18px 45px rgba(34,34,34,.22);cursor:pointer
}
.chatbot-toggle i{color:#fff}
.chatbot-panel{
  display:none;position:absolute;bottom:58px;left:0;width:min(360px,calc(100vw - 32px));background:#fff;border-radius:26px;
  box-shadow:0 26px 80px rgba(0,0,0,.22);overflow:hidden;border:1px solid rgba(34,34,34,.08)
}
body.ltr-layout .chatbot-panel{left:auto;right:0}
.chatbot-panel.is-open{display:block}
.chatbot-header{background:#222;color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between}
.chatbot-close{border:0;background:transparent;color:#fff;font-size:1.6rem;cursor:pointer}
.chatbot-messages{padding:1rem;display:grid;gap:.65rem}
.chatbot-messages p{margin:0;color:#555;font-weight:700}
.chatbot-messages button{
  border:1px solid rgba(196,0,0,.12);background:rgba(196,0,0,.04);border-radius:16px;padding:.8rem;text-align:start;
  font-family:inherit;font-weight:800;color:#222;cursor:pointer
}
.chatbot-messages .bot-answer{background:#f7f7f7;border-radius:16px;padding:.85rem;color:#333;border-inline-start:3px solid #C40000}
.chatbot-whatsapp{margin:0 1rem 1rem;display:flex!important;justify-content:center}

@media(max-width:880px){
  .header-actions{width:100%;justify-content:space-between;gap:.5rem}
  .main-navigation.active .header-actions{margin-top:1rem}
  .language-switcher a{min-width:40px}
}
@media(max-width:768px){
  .sanad-chatbot{bottom:86px;left:16px}
  body.ltr-layout .sanad-chatbot{right:16px}
  .chatbot-toggle span{display:none}
  .chatbot-panel{width:calc(100vw - 28px)}
  .language-switcher{padding:.25rem}
}


/* ========================================
   إصلاح أيقونات الأزرار العائمة - واتساب / مساعدة
   ======================================== */

.floating-whatsapp,
.sanad-chatbot .chatbot-toggle {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.22) !important;
  text-decoration: none !important;
}

.floating-whatsapp {
  background: #25D366 !important;
  color: #FFFFFF !important;
  left: 24px !important;
  bottom: 24px !important;
  right: auto !important;
}

.sanad-chatbot {
  left: 24px !important;
  bottom: 100px !important;
  right: auto !important;
  z-index: 99998 !important;
}

.sanad-chatbot .chatbot-toggle {
  background: #222222 !important;
  color: #FFFFFF !important;
}

.floating-whatsapp i,
.sanad-chatbot .chatbot-toggle i,
.sanad-chatbot .chatbot-toggle span {
  display: none !important;
}

.floating-whatsapp::before {
  content: "☎";
  font-family: Arial, sans-serif !important;
  font-size: 31px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  transform: rotate(-12deg);
}

.sanad-chatbot .chatbot-toggle::before {
  content: "💬";
  font-family: "Apple Color Emoji","Segoe UI Emoji",Arial,sans-serif !important;
  font-size: 31px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .floating-whatsapp,
  .sanad-chatbot .chatbot-toggle {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  .floating-whatsapp {
    left: 18px !important;
    bottom: 18px !important;
  }

  .sanad-chatbot {
    left: 18px !important;
    bottom: 88px !important;
  }

  .floating-whatsapp::before,
  .sanad-chatbot .chatbot-toggle::before {
    font-size: 28px !important;
  }
}

body.ltr-layout .floating-whatsapp {
  right: 24px !important;
  left: auto !important;
}

body.ltr-layout .sanad-chatbot {
  right: 24px !important;
  left: auto !important;
}

@media (max-width: 768px) {
  body.ltr-layout .floating-whatsapp {
    right: 18px !important;
    left: auto !important;
  }

  body.ltr-layout .sanad-chatbot {
    right: 18px !important;
    left: auto !important;
  }
}


/* ========================================
   بنرات سند ميديا النهائية المتجاوبة
   المقاسات المعتمدة: 959x500 / 786x500 / 767x500
   ======================================== */
.sanad-final-banner,
.hero-image.final-responsive-banner,
.section-visual.final-responsive-banner {
  width: 100%;
  height: 500px;
  min-height: 500px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(34,34,34,.10);
  background: #fff;
}

.sanad-final-banner picture,
.hero-image.final-responsive-banner picture,
.section-visual.final-responsive-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sanad-final-banner img,
.hero-image.final-responsive-banner img,
.section-visual.final-responsive-banner img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 32px;
  transform: none !important;
}

@media (max-width: 800px) {
  .sanad-final-banner,
  .hero-image.final-responsive-banner,
  .section-visual.final-responsive-banner,
  .sanad-final-banner img,
  .hero-image.final-responsive-banner img,
  .section-visual.final-responsive-banner img {
    height: 500px;
    min-height: 500px;
  }
}

@media (max-width: 520px) {
  .sanad-final-banner,
  .hero-image.final-responsive-banner,
  .section-visual.final-responsive-banner,
  .sanad-final-banner img,
  .hero-image.final-responsive-banner img,
  .section-visual.final-responsive-banner img {
    height: 500px;
    min-height: 500px;
    border-radius: 24px;
  }
}


/* ========================================
   تحسين مستمر: عرض سينمائي للأعمال + نموذج حملة ذكي
   ======================================== */
.cinematic-portfolio-section {
  padding: 95px 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(196,0,0,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  overflow: hidden;
}

.cinematic-showcase-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: center;
}

.cinematic-stage {
  position: relative;
  min-height: 430px;
  border-radius: 38px;
  background: #222222;
  overflow: hidden;
  box-shadow: 0 34px 95px rgba(34,34,34,.22);
}

.cinematic-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.10)),
    radial-gradient(circle at 70% 35%, rgba(196,0,0,.35), transparent 45%);
  z-index: 1;
}

.cinematic-film-strip {
  position: absolute;
  inset-inline: 22px;
  top: 20px;
  display: flex;
  justify-content: space-between;
  opacity: .22;
  z-index: 2;
}

.cinematic-film-strip span {
  width: 18px;
  height: 11px;
  background: #fff;
  border-radius: 3px;
}

.cinematic-slides {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: cinematicSlide 24s linear infinite;
  position: absolute;
  bottom: 28px;
  inset-inline-start: 28px;
  z-index: 2;
}

.cinematic-card {
  width: 240px;
  height: 285px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
  transform: rotate(-2deg);
}

.cinematic-card:nth-child(even) { transform: rotate(2deg) translateY(-18px); }

.cinematic-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.cinematic-card div {
  padding: .9rem;
}

.cinematic-card strong {
  display: block;
  color: #222;
  font-weight: 900;
  margin-bottom: .2rem;
}

.cinematic-card small {
  color: #666;
  font-weight: 700;
}

.cinematic-copy .cinematic-badges {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.cinematic-badges span {
  background: #fff;
  border: 1px solid rgba(196,0,0,.12);
  color: #222;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(34,34,34,.06);
}

.smart-campaign-section {
  padding: 95px 0;
  background: #222222;
  color: #fff;
}

.smart-campaign-section .section-header h2,
.smart-campaign-section .section-header p { color: #fff; }

.smart-campaign-box {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 1.5rem;
  align-items: start;
}

.smart-form,
.smart-result {
  background: #fff;
  color: #222;
  border-radius: 32px;
  padding: 1.6rem;
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
}

.smart-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.smart-form label {
  font-weight: 900;
  color: #222;
  margin-bottom: .45rem;
  display: block;
}

.smart-form input,
.smart-form select,
.smart-form textarea {
  width: 100%;
  border: 1px solid rgba(34,34,34,.12);
  border-radius: 16px;
  padding: .95rem 1rem;
  font-family: inherit;
  background: #fafafa;
}

.smart-result {
  min-height: 100%;
  border: 1px solid rgba(196,0,0,.18);
}

.smart-result h3 {
  color: #C40000;
  font-weight: 900;
}

.smart-result-list {
  display: grid;
  gap: .7rem;
  margin: 1rem 0;
}

.smart-result-list div {
  background: #f7f7f7;
  border-right: 4px solid #C40000;
  border-radius: 16px;
  padding: .9rem 1rem;
}

.smart-result-list strong {
  display: block;
  margin-bottom: .25rem;
  color: #222;
}

.smart-result-list span {
  color: #666;
  font-weight: 700;
}

@keyframes cinematicSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

body.ltr-layout .smart-result-list div {
  border-right: 0;
  border-left: 4px solid #C40000;
}

@media (max-width: 980px) {
  .cinematic-showcase-grid,
  .smart-campaign-box {
    grid-template-columns: 1fr;
  }

  .cinematic-stage {
    min-height: 380px;
  }
}

@media (max-width: 620px) {
  .smart-form .form-row {
    grid-template-columns: 1fr;
  }

  .cinematic-card {
    width: 205px;
    height: 260px;
  }

  .cinematic-card img {
    height: 170px;
  }
}


/* ========================================
   أيقونات السوشيال ميديا فقط - sanadmedia22 مخفي خلف الروابط
   ======================================== */
.social-icons-only,
.contact-social-list {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.social-icons-only a,
.contact-social-list a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #C40000;
  border: 1px solid rgba(196,0,0,.16);
  box-shadow: 0 10px 28px rgba(34,34,34,.08);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  text-decoration: none;
}

.social-icons-only a:hover,
.contact-social-list a:hover {
  transform: translateY(-4px);
  background: #C40000;
  color: #FFFFFF;
  box-shadow: 0 16px 38px rgba(196,0,0,.20);
}

.social-icons-only i,
.contact-social-list i {
  font-size: 1.05rem;
  line-height: 1;
}

.contact-social-icons {
  margin: 1.1rem 0 1.4rem;
  padding: 1rem;
  border-radius: 22px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(34,34,34,.06);
}

.site-footer .social-icons-only {
  margin-top: 1rem;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  .social-icons-only,
  .contact-social-list {
    justify-content: center;
  }

  .social-icons-only a,
  .contact-social-list a {
    width: 42px;
    height: 42px;
  }
}


/* حذف قسم الإحصائيات المطلوب */
.stats-strip,
.stats-section,
.stats-grid {
  display: none !important;
}


/* ========================================
   سلايدر البنرات الرئيسية 1200×400
   ======================================== */
.hero-slider-wrap {
  width: 100%;
}

.sanad-hero-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 400px;
  border-radius: 34px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 24px 70px rgba(34,34,34,.14);
}

.sanad-slider-track,
.sanad-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sanad-slide {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .8s ease, transform 1.1s ease;
  z-index: 1;
}

.sanad-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.sanad-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 34px;
  transform: none !important;
}

.sanad-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}

.sanad-slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: #CFCFCF;
  cursor: pointer;
  padding: 0;
  transition: width .25s ease, background .25s ease;
}

.sanad-slider-dots button.active {
  width: 26px;
  border-radius: 999px;
  background: #C40000;
}

@media (max-width: 980px) {
  .sanad-hero-slider,
  .sanad-slide img {
    height: 360px;
  }
}

@media (max-width: 768px) {
  .hero-slider-wrap {
    margin-top: 1rem;
  }

  .sanad-hero-slider {
    height: 280px;
    border-radius: 26px;
  }

  .sanad-slide img {
    height: 280px;
    border-radius: 26px;
  }
}

@media (max-width: 520px) {
  .sanad-hero-slider {
    height: 210px;
    border-radius: 22px;
  }

  .sanad-slide img {
    height: 210px;
    border-radius: 22px;
  }
}


/* ========================================
   إصلاح نهائي لسلايدر البنرات: عرض شريحة واحدة فقط
   ======================================== */
.hero-slider-wrap {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.sanad-hero-slider {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  aspect-ratio: 3 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(34,34,34,.14) !important;
}

.sanad-slider-track {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.sanad-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(1.02) !important;
  transition: opacity .75s ease, visibility .75s ease, transform 1s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.sanad-slide.active,
.sanad-slide:first-child:not(.slider-ready .sanad-slide:first-child) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.sanad-hero-slider.slider-ready .sanad-slide:first-child:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
}

.sanad-slide img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 32px !important;
  transform: none !important;
}

.sanad-slider-dots {
  position: absolute !important;
  z-index: 10 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(8px) !important;
}

.sanad-slider-dots button {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #BFBFBF !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: width .25s ease, background .25s ease !important;
}

.sanad-slider-dots button.active {
  width: 24px !important;
  background: #C40000 !important;
}

@media (max-width: 768px) {
  .hero-slider-wrap {
    margin-top: 1rem !important;
  }

  .sanad-hero-slider {
    border-radius: 22px !important;
    aspect-ratio: 3 / 1 !important;
  }

  .sanad-slide img {
    border-radius: 22px !important;
  }
}

@media (max-width: 520px) {
  .sanad-hero-slider {
    width: 100% !important;
    aspect-ratio: 3 / 1 !important;
  }
}


/* ========================================
   إصلاح أيقونات السوشيال والزر العائم
   ======================================== */
.social-icons-only a,
.contact-social-list a,
.site-footer .social-links a {
  position: relative;
  overflow: hidden;
}

.social-icon-svg,
.floating-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 0;
}

.social-icon-svg svg,
.floating-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.social-icons-only i,
.contact-social-list i,
.site-footer .social-links i {
  display: none !important;
}

/* ألوان المنصات */
.social-link-instagram { color: #E4405F !important; }
.social-link-facebook { color: #1877F2 !important; }
.social-link-x { color: #111111 !important; }
.social-link-tiktok { color: #111111 !important; }
.social-link-snapchat { color: #FFCC00 !important; }
.social-link-youtube { color: #FF0000 !important; }

.social-icons-only a:hover,
.contact-social-list a:hover,
.site-footer .social-links a:hover {
  color: #FFFFFF !important;
}

.floating-whatsapp,
.sanad-chatbot .chatbot-toggle {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.floating-whatsapp .floating-icon-svg,
.sanad-chatbot .chatbot-toggle .floating-icon-svg {
  width: 30px;
  height: 30px;
  color: #FFFFFF;
}

.floating-whatsapp i,
.sanad-chatbot .chatbot-toggle i {
  display: none !important;
}

.sanad-chatbot .chatbot-toggle span:not(.floating-icon-svg) {
  display: none !important;
}

.floating-whatsapp::before,
.sanad-chatbot .chatbot-toggle::before {
  content: none !important;
}

@media (max-width: 768px) {
  .floating-whatsapp .floating-icon-svg,
  .sanad-chatbot .chatbot-toggle .floating-icon-svg {
    width: 28px;
    height: 28px;
  }
}


/* ========================================
   إعادة بناء احترافية بمعايير عالمية + معرض أعمال موسع
   ======================================== */
:root {
  --sanad-red: #C40000;
  --sanad-black: #222222;
  --sanad-gray: #666666;
  --sanad-soft: #F7F7F8;
  --sanad-border: rgba(34,34,34,.08);
  --sanad-shadow: 0 24px 70px rgba(34,34,34,.10);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-main section {
  scroll-margin-top: 96px;
}

.hero-section {
  min-height: auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(42px, 6vw, 84px);
}

.hero-content {
  align-items: center;
}

.hero-text h1 {
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.hero-text p {
  max-width: 680px;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.section-header {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2,
.section-copy h2 {
  letter-spacing: -.025em;
}

.global-portfolio-section {
  background:
    radial-gradient(circle at 12% 16%, rgba(196,0,0,.08), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7f7f8 100%);
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(70px, 8vw, 120px);
}

/* قسم من نحن بدون الصورة التعريفية */
.about-section .about-text-only {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
}

.about-section .about-text-only .section-copy {
  width: 100%;
}

.portfolio-master-header p {
  color: #555;
  font-weight: 700;
}

.portfolio-control-panel {
  position: sticky;
  top: 78px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 1rem;
  align-items: center;
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid var(--sanad-border);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 45px rgba(34,34,34,.07);
}

.portfolio-search-wrap {
  position: relative;
}

.portfolio-search {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(34,34,34,.10);
  background: #fff;
  padding: 0 1.15rem;
  font-family: inherit;
  font-weight: 800;
  color: #222;
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.portfolio-search:focus {
  border-color: rgba(196,0,0,.45);
  box-shadow: 0 0 0 5px rgba(196,0,0,.08);
}

.global-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.global-portfolio-grid .portfolio-card {
  grid-column: span 4;
  border: 1px solid rgba(34,34,34,.08);
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 35px rgba(34,34,34,.06);
  transform: translateY(0);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .32s ease;
}

.global-portfolio-grid .portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 80px rgba(34,34,34,.14);
  border-color: rgba(196,0,0,.18);
}

.global-portfolio-grid .portfolio-featured-card {
  grid-column: span 6;
}

.global-portfolio-grid .portfolio-collage-card {
  grid-column: span 6;
}

.global-portfolio-grid .portfolio-image-wrap {
  aspect-ratio: 16 / 11;
  background: #f1f1f1;
  overflow: hidden;
}

.global-portfolio-grid .portfolio-featured-card .portfolio-image-wrap {
  aspect-ratio: 16 / 9;
}

.global-portfolio-grid .portfolio-collage-card .portfolio-image-wrap {
  aspect-ratio: 16 / 9;
}

.global-portfolio-grid .portfolio-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22,1,.36,1), filter .35s ease;
}

.global-portfolio-grid .portfolio-card:hover .portfolio-image-wrap img {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.02);
}

.portfolio-card-body {
  padding: 1.15rem 1.15rem 1.25rem;
}

.portfolio-card-meta {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: .85rem;
}

.portfolio-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .72rem;
  border-radius: 999px;
  background: rgba(196,0,0,.08);
  color: var(--sanad-red);
  font-size: .78rem;
  font-weight: 900;
}

.portfolio-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .72rem;
  border-radius: 999px;
  background: #f2f2f2;
  color: #555;
  font-size: .78rem;
  font-weight: 900;
}

.portfolio-card h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 900;
  color: #222;
}

.portfolio-card p {
  color: #666;
  font-weight: 700;
  line-height: 1.75;
  min-height: 3.2em;
}

.portfolio-open {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .45rem;
  color: var(--sanad-red) !important;
}

.portfolio-open::after {
  content: "↗";
  font-weight: 900;
}

.portfolio-empty-state {
  text-align: center;
  padding: 2rem;
  border-radius: 28px;
  background: #fff;
  border: 1px dashed rgba(196,0,0,.28);
  color: #222;
}

.portfolio-empty-state strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
}

.portfolio-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 20%, rgba(196,0,0,.20), transparent 32%),
    #222;
  color: #fff;
  box-shadow: 0 28px 80px rgba(34,34,34,.18);
}

.portfolio-bottom-cta h3 {
  margin: 0 0 .35rem;
  color: #fff;
  font-weight: 900;
}

.portfolio-bottom-cta p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-weight: 700;
}

.portfolio-bottom-cta .cta-button {
  white-space: nowrap;
}

.portfolio-modal-content {
  border: 1px solid rgba(255,255,255,.12);
}

.case-story div {
  transition: transform .25s ease, background .25s ease;
}

.case-story div:hover {
  transform: translateX(-4px);
  background: #fff5f5;
}

.service-card,
.package-card,
.testimonial-card,
.contact-item {
  border: 1px solid rgba(34,34,34,.08);
}

.site-footer {
  background:
    radial-gradient(circle at 12% 12%, rgba(196,0,0,.16), transparent 28%),
    #1f1f1f;
}

@media (max-width: 1100px) {
  .global-portfolio-grid .portfolio-card,
  .global-portfolio-grid .portfolio-featured-card,
  .global-portfolio-grid .portfolio-collage-card {
    grid-column: span 6;
  }

  .portfolio-control-panel {
    position: static;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .global-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .global-portfolio-grid .portfolio-card,
  .global-portfolio-grid .portfolio-featured-card,
  .global-portfolio-grid .portfolio-collage-card {
    grid-column: auto;
  }

  .portfolio-control-panel {
    padding: .85rem;
    border-radius: 22px;
  }

  .portfolio-filters {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: .3rem;
  }

  .portfolio-bottom-cta {
    display: grid;
    text-align: center;
  }

  .portfolio-bottom-cta .cta-button {
    width: 100%;
    justify-content: center;
  }
}