/*
Theme Name: Saudi Accelerate
Theme URI: https://sai-industry.sa
Author: Saudi Accelerate Industry Co.
Author URI: https://sai-industry.sa
Description: قالب احترافي لشركة تسارع السعودية للصناعة (Saudi Accelerate Industry Co.). مبني خصيصاً للعمل مع Elementor المجاني — كل صفحاته قابلة للتعديل بنظام السحب والإفلات. يدعم RTL بالكامل، ويتضمن صفحات جاهزة: الرئيسية، من نحن، المنتجات، تواصل معنا.
Version: 1.14.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: sai-industry
Tags: rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, elementor
*/

/* ============================================
   Saudi Accelerate — Base Styles
   كل التعديلات البصرية تتم من Elementor → Site Settings
   ============================================ */

:root{
  --sai-bg: #F7F1E6;
  --sai-surface: #FFFFFF;
  --sai-gold: #C8612A;
  --sai-gold-soft: #A84E1E;
  --sai-text: #1E1E1E;
  --sai-muted: #6B6155;
  --sai-border: #E4DCC8;

  /* Third accent — bright warm amber, used for glow/highlight/premium
     touches only (badges, icon rings, hover glow, shimmer). Keeps the
     brand's dark-green + copper identity but lifts the site out of the
     "too muted" feel the client asked to fix. */
  --sai-accent: #F0B23C;
  --sai-accent-soft: #F6CE7C;
  --sai-accent-rgb: 240,178,60;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }

body{
  margin:0;
  font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;
  background:var(--sai-bg);
  color:var(--sai-text);
  line-height:1.7;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

a{ color:var(--sai-gold); text-decoration:none; transition:opacity .2s; }
a:hover{ opacity:.8; }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4,h5,h6{
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:700;
  line-height:1.3;
  margin:0 0 .6em;
  color:var(--sai-text);
}

/* ============================================
   Header
   ============================================ */
.sai-header{
  position:sticky; top:0; z-index:9999;
  background:rgba(247,241,230,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sai-border);
  padding:18px 0;
}
.sai-container{ max-width:1280px; margin:0 auto; padding:0 24px; }
.sai-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sai-logo{ display:flex; align-items:center; gap:12px; }
.sai-logo img{ height:96px; width:auto; }
@media (max-width:782px){ .sai-logo img{ height:72px; } }
.sai-logo-text{ font-weight:700; font-size:20px; color:var(--sai-gold); }

.sai-nav{ display:flex; align-items:center; gap:8px; }
.sai-nav ul{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; gap:4px;
}
.sai-nav a{
  display:block; padding:10px 18px; color:var(--sai-text);
  font-weight:600; font-size:15px; border-radius:6px;
  transition:all .2s;
}
.sai-nav a:hover,
.sai-nav .current-menu-item > a{
  color:var(--sai-gold); background:rgba(200,97,42,.08);
}
.sai-cta{
  background:var(--sai-gold); color:#0D2B2B !important;
  padding:12px 26px !important; border-radius:6px;
  font-weight:700 !important;
  transition:transform .2s, background .2s;
}
.sai-cta:hover{ background:var(--sai-gold-soft); transform:translateY(-1px); }

.sai-menu-toggle{
  display:none; background:transparent; border:1px solid var(--sai-border);
  color:var(--sai-text); padding:10px 14px; border-radius:6px; cursor:pointer;
  font-size:20px;
}

@media (max-width:991px){
  .sai-menu-toggle{ display:block; }
  .sai-nav{
    display:none; position:absolute; top:100%; right:0; left:0;
    background:var(--sai-surface); border-top:1px solid var(--sai-border);
    padding:16px 24px;
  }
  .sai-nav.is-open{ display:block; }
  .sai-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .sai-nav a{ padding:14px 16px; border-bottom:1px solid var(--sai-border); }
}

/* ============================================
   Footer
   ============================================ */
.sai-footer{
  background:#F1E9D8; color:var(--sai-muted);
  border-top:1px solid var(--sai-border);
  padding:60px 0 30px; margin-top:0;
}
.sai-footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px; margin-bottom:40px;
}
.sai-footer h4{ color:var(--sai-gold); margin-bottom:18px; font-size:18px; }
.sai-footer ul{ list-style:none; padding:0; margin:0; }
.sai-footer ul li{ margin-bottom:10px; }
.sai-footer a{ color:var(--sai-muted); }
.sai-footer a:hover{ color:var(--sai-gold); }
.sai-social{ display:flex; gap:12px; }
.sai-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--sai-border);
  border-radius:50%; transition:all .2s;
}
.sai-social a:hover{ background:var(--sai-gold); color:#0D2B2B; border-color:var(--sai-gold); }
.sai-copyright{
  text-align:center; padding-top:24px; border-top:1px solid var(--sai-border);
  font-size:14px; color:var(--sai-muted);
}

/* ============================================
   Content default (when not using Elementor)
   ============================================ */
.sai-page-content{ max-width:1280px; margin:0 auto; padding:80px 24px; }

/* Elementor default page template — remove default container */
.elementor-page .sai-page-content{ max-width:100%; padding:0; }

/* WP admin bar fix for sticky header */
.admin-bar .sai-header{ top:32px; }
@media (max-width:782px){ .admin-bar .sai-header{ top:46px; } }

/* ============================================
   Product Cards (Elementor inner sections)
   — Large portrait image on top, info stacked below
   ============================================ */
.sai-product-card {
  position:relative;
  overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sai-product-card:hover {
  transform:translateY(-6px);
  border-color:var(--sai-gold) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(200,97,42,.25);
}

/* Force inner-section columns to stack vertically (image on top, info below) */
.sai-product-card > .elementor-container,
.sai-product-card .elementor-container {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  position: relative;
}
.sai-product-card > .elementor-container > .elementor-column,
.sai-product-card .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Text overlay on image ----------
   Column 1 = image (defines the card's height, stays in normal flow).
   Column 2 = info block (title / eyebrow / description / link) — lifted
   out of flow and floated over the bottom of the image with a gradient
   scrim behind it for legibility, instead of sitting in its own flat
   solid-color panel underneath the photo. */
.sai-product-card .elementor-column:nth-of-type(1) {
  position: relative;
  z-index: 1;
}
.sai-product-card .elementor-column:nth-of-type(2) {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(13,43,43,0) 0%,
    rgba(9,15,15,.45) 30%,
    rgba(6,10,10,.88) 75%,
    rgba(4,7,7,.96) 100%) !important;
  padding-top: 64px !important;
  transition: padding-top .3s ease;
}
.sai-product-card:hover .elementor-column:nth-of-type(2) {
  padding-top: 52px !important;
}

.sai-product-card .elementor-widget-image,
.sai-product-card .elementor-widget-image .elementor-widget-container,
.sai-product-card .elementor-widget-image a { display:block; line-height:0; margin:0 !important; }

/* Portrait images — taller, full card width, tight to info block */
.sai-product-card .elementor-widget-image img,
.sai-card-img img {
  width:100% !important;
  aspect-ratio: 4 / 5;
  height:auto !important;
  object-fit:cover;
  display:block;
  border-radius:0;
  transition:transform .5s ease;
}
.sai-product-card:hover .elementor-widget-image img,
.sai-product-card:hover .sai-card-img img { transform:scale(1.04); }

@media (max-width:768px){
  .sai-product-card .elementor-widget-image img,
  .sai-card-img img { aspect-ratio: 3 / 4; }
}

/* Category cards use cinematic landscape imagery instead of the
   portrait product photos, so the image doesn't dominate the card
   and the info block stays clearly visible. */
.sai-category-card .elementor-widget-image img,
.sai-category-card .sai-card-img img {
  aspect-ratio: 4 / 3 !important;
  object-position: center 45%;
}
/* Category images are exactly 1600×1200 (4:3) — same ratio on all
   breakpoints so object-fit:cover never has to crop anything. */

/* ----------------------------------------------------------------
   ROOT FIX: the generic .sai-product-card rules above make column 2
   (title + description + link) float with position:absolute over
   the bottom of the image, sized to its own content height. That's
   fine for a short product title, but a category card's info block
   (heading + 2-line description + link) is much taller — so it grew
   upward and covered almost the entire photo, leaving only a thin
   sliver visible at the top (the bug being reported).
   Category cards were never meant to be an image+overlay design —
   sai_category_card() builds a plain solid info panel that belongs
   BELOW the image, not floating on top of it. Put it back in normal
   document flow here so the full image is always visible, with a
   soft cinematic gradient purely for visual polish (not to hide the
   photo). ---------------------------------------------------------- */
.sai-category-card .elementor-column:nth-of-type(1) {
  position: relative;
}
.sai-category-card .elementor-column:nth-of-type(2) {
  position: relative !important;
  left: auto; right: auto; bottom: auto;
  padding-top: 22px !important;
  background: linear-gradient(180deg, #F7F1E6 0%, #FFFFFF 40%) !important;
}
.sai-category-card:hover .elementor-column:nth-of-type(2) {
  padding-top: 22px !important;
}
/* Subtle cinematic vignette baked into the image itself (not the text
   panel), so the photo still feels premium without ever being hidden. */
.sai-category-card .elementor-column:nth-of-type(1)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(6,10,10,.55) 100%);
  pointer-events: none;
}

/* Hint that the card opens a modal */
.sai-product-card .elementor-widget-image a,
.sai-product-card a { cursor:zoom-in; }

/* Category cards link to a listing page, not a lightbox — plain pointer */
.sai-category-card .elementor-widget-image a,
.sai-category-card a { cursor:pointer; }

/* ============================================
   Safety overrides — force dark/gold palette
   even if older Elementor data still has green
   ============================================ */
.elementor-section[data-settings*="0a5c"],
.elementor-section[data-settings*="0A5C"],
.elementor-element[style*="#0a5c"],
.elementor-element[style*="#0A5C"]{
  background-color:#F7F1E6 !important;
}

/* ============================================
   Single Product Page  (dark + gold — no green)
   ============================================ */
.sai-product-hero{
  background:linear-gradient(135deg,#F7F1E6 0%,#FFFFFF 100%);
  padding:38px 0; border-bottom:1px solid rgba(200,97,42,.25);
}
.sai-product-hero .sai-container{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.sai-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(200,97,42,.1); color:var(--sai-text);
  padding:10px 20px; border-radius:8px; border:1px solid rgba(200,97,42,.3);
  font-size:14px; font-weight:600;
}
.sai-back-btn:hover{ background:rgba(200,97,42,.18); opacity:1; }
.sai-product-title{
  display:inline-flex; align-items:center; gap:14px;
  background:rgba(200,97,42,.12); color:var(--sai-text);
  padding:14px 28px; border-radius:10px; border:1px solid rgba(200,97,42,.3);
  font-size:22px; margin:0;
}
.sai-product-title .sai-icon{ color:var(--sai-gold); font-size:24px; }

.sai-product-body{
  background:linear-gradient(180deg,#F7F1E6 0%,#F1E9D8 100%);
  padding:50px 0 80px; min-height:60vh;
}
.sai-product-grid{
  display:grid; grid-template-columns:320px 1fr; gap:36px; align-items:start;
}
@media (max-width:991px){
  .sai-product-grid{ grid-template-columns:1fr; }
}

.sai-meta-card{
  background:rgba(200,97,42,.05); border:1px solid rgba(200,97,42,.18);
  border-radius:10px; padding:18px 22px; margin-bottom:14px;
  position:relative;
}
.sai-meta-card::before{
  content:""; position:absolute; top:-1px; right:18px; height:3px; width:60px;
  background:var(--sai-gold); border-radius:0 0 3px 3px;
}
.sai-meta-label{ color:var(--sai-gold); font-size:13px; font-weight:700; margin-bottom:8px; }
.sai-meta-value{ color:var(--sai-text); font-size:16px; font-weight:600; }

.sai-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px;
}
.sai-thumb,.sai-mthumb{
  padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden;
  background:none; cursor:pointer; aspect-ratio:1; transition:border-color .2s;
}
.sai-thumb img,.sai-mthumb img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .2s; }
.sai-thumb:hover img,.sai-thumb.is-active img,
.sai-mthumb:hover img,.sai-mthumb.is-active img{ opacity:1; }
.sai-thumb.is-active,.sai-mthumb.is-active{ border-color:var(--sai-gold); }

.sai-product-slider{
  position:relative; background:#000; border-radius:12px; overflow:hidden;
  border:1px solid rgba(200,97,42,.18);
}
.sai-slides{ position:relative; aspect-ratio:4/3; }
.sai-slide,.sai-mslide{
  position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.sai-slide.is-active,.sai-mslide.is-active{ opacity:1; pointer-events:auto; }
.sai-slide img,.sai-mslide img{ width:100%; height:100%; object-fit:cover; }
.sai-mslides{ position:relative; aspect-ratio:4/3; }

.sai-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(200,97,42,.3);
  cursor:pointer; font-size:24px; line-height:1; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.sai-arrow:hover{ background:var(--sai-gold); color:#0D2B2B; }
.sai-arrow-prev{ left:16px; } .sai-arrow-next{ right:16px; }

.sai-dots{
  position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2;
}
.sai-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:background .2s, width .2s;
}
.sai-dot.is-active{ background:var(--sai-gold); width:22px; border-radius:4px; }

.sai-product-desc{ margin-top:50px; }
.sai-product-desc h2,.sai-product-desc h3{ color:var(--sai-gold); font-size:24px; margin-bottom:18px; }
.sai-product-content{ font-size:16.5px; line-height:1.9; color:var(--sai-text); }

.sai-product-nav{
  display:flex; justify-content:space-between; gap:20px; margin-top:60px; flex-wrap:wrap;
}
.sai-nav-card{
  background:rgba(200,97,42,.05); border:1px solid rgba(200,97,42,.18);
  padding:18px 24px; border-radius:10px; min-width:240px;
  display:flex; flex-direction:column; gap:6px; color:var(--sai-text);
  transition:border-color .2s, background .2s;
}
.sai-nav-card:hover{ border-color:var(--sai-gold); background:rgba(200,97,42,.1); opacity:1; }
.sai-nav-label{ color:var(--sai-gold); font-size:13px; font-weight:600; }
.sai-nav-title{ font-size:16px; font-weight:700; }
.sai-nav-card-prev{ text-align:left; }

/* ============================================
   Product Modal (in-page lightbox)
   ============================================ */
.sai-modal{
  position:fixed; inset:0; z-index:99999;
  display:none; overflow-y:auto; padding:40px 16px;
}
.sai-modal.is-open{ display:block; }
.sai-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(4px);
}
.sai-modal-inner{
  position:relative; max-width:1180px; margin:0 auto;
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F1E6 100%);
  border:1px solid rgba(200,97,42,.3);
  border-radius:14px; padding:40px 32px 50px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.sai-modal-close{
  position:absolute; top:14px; left:14px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(200,97,42,.15); color:var(--sai-gold);
  border:1px solid var(--sai-gold); cursor:pointer;
  font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s;
}
.sai-modal-close:hover{ background:var(--sai-gold); color:#0D2B2B; }
.sai-modal-title{
  display:inline-flex; align-items:center; gap:14px;
  background:rgba(200,97,42,.12); color:var(--sai-text);
  padding:12px 24px; border-radius:10px; border:1px solid rgba(200,97,42,.3);
  font-size:22px; margin:0 0 28px;
}
.sai-modal-title .sai-icon{ color:var(--sai-gold); }
.sai-modal-loading{ text-align:center; color:var(--sai-muted); padding:80px 0; font-size:16px; }
@media (max-width:768px){
  .sai-modal{ padding:16px 8px; }
  .sai-modal-inner{ padding:60px 16px 30px; }
  .sai-modal-title{ font-size:18px; padding:10px 18px; }
}

/* ============================================
   Contact form (custom shortcode) — robust layout
   Wrapped in extra specificity so Elementor's
   form/widget styles can't break the grid.
   ============================================ */
.sai-form{
  display:block !important;
  max-width:780px; width:100%;
  margin:30px auto 0;
  background:linear-gradient(180deg,rgba(200,97,42,.06) 0%,rgba(200,97,42,.02) 100%);
  border:1px solid rgba(200,97,42,.22);
  border-radius:14px;
  padding:36px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  direction:rtl;
  text-align:right;
  box-sizing:border-box;
}
@media (max-width:640px){ .sai-form{ padding:24px 18px; } }

.sai-form .sai-form-row{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
@media (max-width:640px){
  .sai-form .sai-form-row{ grid-template-columns:1fr; gap:14px; }
}

.sai-form .sai-field{
  display:flex !important;
  flex-direction:column;
  margin-bottom:18px;
  width:100%;
}
.sai-form .sai-form-row .sai-field{ margin-bottom:0; }

.sai-form .sai-field label{
  display:block !important;
  color:var(--sai-gold);
  font-size:13px;
  font-weight:700;
  margin:0 0 8px;
  letter-spacing:.3px;
}
.sai-form .sai-req{ color:#E85A4F; margin:0 2px; }

.sai-form input,
.sai-form textarea{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:14px 16px !important;
  background:#FFFFFF !important;
  color:var(--sai-text) !important;
  border:1px solid rgba(200,97,42,.22) !important;
  border-radius:8px !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.5 !important;
  direction:rtl;
  text-align:right;
  box-sizing:border-box;
  transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none;
  appearance:none;
}
.sai-form input::placeholder,
.sai-form textarea::placeholder{ color:#5c554a; }
.sai-form input:focus,
.sai-form textarea:focus{
  outline:none !important;
  border-color:var(--sai-gold) !important;
  background:#FFFFFF !important;
  box-shadow:0 0 0 3px rgba(200,97,42,.18) !important;
}
.sai-form textarea{ resize:vertical; min-height:150px; }

.sai-form .sai-form-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-start;
}
.sai-form-btn{
  background:var(--sai-gold) !important;
  color:#0D2B2B !important;
  padding:14px 38px !important;
  border:none !important;
  border-radius:8px !important;
  font-family:inherit !important;
  font-weight:700 !important;
  font-size:16px !important;
  cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 6px 18px rgba(200,97,42,.25);
}
.sai-form-btn:hover{
  background:var(--sai-gold-soft) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(200,97,42,.35);
}
.sai-form-msg{
  padding:14px 18px; border-radius:8px; margin-bottom:20px;
  font-weight:600; font-size:15px;
}
.sai-form-ok{ background:rgba(200,97,42,.12); color:var(--sai-gold); border:1px solid rgba(200,97,42,.4); }
.sai-form-err{ background:rgba(220,53,69,.12); color:#F08A95; border:1px solid rgba(220,53,69,.4); }

/* ============================================================
 * Single-Product gallery — force a uniform image size
 * regardless of the source image's native ratio.
 * Applies to:
 *   - Elementor image-carousel widget on any "product" single page
 *   - Native fallback slider (.sai-product-slider)
 *   - The seeded "thumbs" grid rendered via text-editor widget
 * ============================================================ */
.single-product .elementor-image-carousel-wrapper .swiper-slide,
.single-product .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 10px;
}
.single-product .elementor-image-carousel-wrapper .swiper-slide img,
.single-product .elementor-image-carousel-wrapper .elementor-image-carousel img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

/* Fallback PHP slider images */
.single-product .sai-product-slider .sai-slide{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: #FFFFFF;
}
.single-product .sai-product-slider .sai-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* Thumbnails (both seeded and fallback) — fixed square-ish tiles */
.single-product .sai-thumbs img,
.single-product .elementor-widget-text-editor img[style*="object-fit"]{
    aspect-ratio: 4 / 3;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Hero category tiles (2x2 icon grid in hero) */
.sai-hero-tile{
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.sai-hero-tile::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(200,97,42,0.10), transparent 55%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.sai-hero-tile:hover{
  transform: translateY(-4px);
  border-color: #C8612A !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(200,97,42,.55) inset;
  background-color: rgba(20,20,20,0.92) !important;
}
.sai-hero-tile:hover::before{ opacity:1; }
.sai-hero-tile .elementor-icon{
  width:64px; height:64px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(200,97,42,0.45);
  border-radius:50%;
  transition: border-color .35s ease, background-color .35s ease;
}
.sai-hero-tile:hover .elementor-icon{
  border-color:#C8612A;
  background-color: rgba(200,97,42,0.08);
}

/* ============================================================
 * Our Clients — auto-scrolling marquee
 * Used by [sai_clients] shortcode (homepage between products & CTA).
 * ============================================================ */
.sai-clients-section{
  background:linear-gradient(180deg,#F1E9D8 0%,#FFFFFF 48%,#F7F1E6 100%);
  padding:74px 0 84px;
  border-top:1px solid rgba(200,97,42,.14);
  border-bottom:1px solid rgba(200,97,42,.14);
  font-family:'Cairo','Tajawal',sans-serif;
  overflow:hidden;
}
.sai-clients-shell{
  width:min(1280px, calc(100% - 48px));
  margin:0 auto;
}
.sai-clients-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 36px;
}
.sai-clients-eyebrow{
  display:inline-block;
  color:#C8612A;
  font-weight:900;
  font-size:22px;
  letter-spacing:0;
  margin-bottom:10px;
}
.sai-clients-title{
  color:#1E1E1E;
  font-size:30px;
  font-weight:800;
  margin:0 0 12px;
  line-height:1.3;
}
.sai-clients-sub{
  color:#6B6155;
  font-size:16px;
  line-height:1.8;
  margin:0;
}
/* ── Frame outer glow wrapper ─────────────────────────────── */
.sai-clients-frame-wrap{
  position:relative;
  border-radius:18px;
  padding:2px; /* space for gradient border */
  background:linear-gradient(135deg,
    rgba(200,97,42,.55) 0%,
    rgba(200,97,42,.08) 40%,
    rgba(200,97,42,.08) 60%,
    rgba(200,97,42,.55) 100%);
  box-shadow:
    0 0 0 1px rgba(200,97,42,.12),
    0 24px 64px rgba(0,0,0,.5),
    0 0 40px rgba(200,97,42,.07);
}
/* animated gradient border */
.sai-clients-frame-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(135deg,
    rgba(200,97,42,.6) 0%,
    rgba(200,97,42,.04) 50%,
    rgba(200,97,42,.6) 100%);
  background-size:200% 200%;
  animation:sai-border-shimmer 4s ease infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes sai-border-shimmer{
  0%  { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.sai-clients-frame{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(247,241,230,.96) 100%);
  padding:28px 0;
  z-index:1;
}
/* fade edges */
.sai-clients-frame::before,
.sai-clients-frame::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:110px;
  z-index:2;
  pointer-events:none;
}
.sai-clients-frame::before{ right:0; background:linear-gradient(90deg,transparent,rgba(247,241,230,.96)); }
.sai-clients-frame::after { left:0;  background:linear-gradient(90deg,rgba(247,241,230,.96),transparent); }

.sai-clients-marquee{
  overflow:hidden;
  position:relative;
  width:100%;
  direction:ltr;
}
.sai-clients-track{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  will-change:transform;
  animation-duration:var(--sai-marquee-duration,52s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.sai-clients-track--rtl{ animation-name:sai-clients-scroll-rtl; }
.sai-clients-track--ltr{ animation-name:sai-clients-scroll-ltr; }

/* ── Logo card — glass / frosted style ───────────────────── */
.sai-client-logo{
  flex:0 0 auto;
  width:200px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F2E8D9;
  border:1px solid rgba(200,97,42,.15);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition:
    border-color .3s ease,
    transform .3s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease;
  position:relative;
}
.sai-client-logo:hover{
  border-color:rgba(200,97,42,.55);
  transform:translateY(-4px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(200,97,42,.28),
    0 16px 40px rgba(0,0,0,.42),
    0 0 22px rgba(200,97,42,.15);
}
.sai-client-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

@keyframes sai-clients-scroll-rtl{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes sai-clients-scroll-ltr{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@media (max-width:768px){
  .sai-clients-section{ padding:54px 0 60px; }
  .sai-clients-shell{ width:min(100% - 28px,1280px); }
  .sai-clients-title{ font-size:22px; }
  .sai-clients-frame-wrap{ border-radius:12px; padding:2px; }
  .sai-clients-frame{ border-radius:10px; padding:18px 0; }
  .sai-clients-frame::before,.sai-clients-frame::after{ width:48px; }
  .sai-clients-track{ gap:14px; animation-duration:36s; }
  .sai-client-logo{ width:148px; height:84px; padding:12px 14px; border-radius:10px; }
}
@media (prefers-reduced-motion:reduce){
  .sai-clients-track{ animation:none; }
  .sai-clients-frame-wrap::before{ animation:none; }
}

/* ============================================================
 * Social Icons — قابلة للتعديل من Customizer
 * ============================================================ */
.sai-social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.sai-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0,0,0,.05);
    color: var(--sai-gold, #c9a84c);
    transition: background .22s, transform .18s;
    text-decoration: none;
}
.sai-social-link:hover {
    background: var(--sai-gold, #c9a84c);
    color: #0d2b2b;
    transform: translateY(-2px);
}
.sai-social-link svg { display: block; }

/* Footer dynamic classes for live preview targeting */
.sai-footer-phone,
.sai-footer-whatsapp,
.sai-footer-email { color: inherit; }

/* ============================================================
 * PREMIUM UPGRADE PACK — v1.4
 * Added on top of the existing design without touching any
 * Elementor page data, so every page stays 100% drag-and-drop
 * editable exactly as before. Everything below is additive:
 * a third accent color (--sai-accent, set in :root above),
 * ambient background glow, upgraded icon badges, animated
 * buttons/links, scroll-reveal entrances, and a floating
 * WhatsApp button. Safe to trim/tweak per section below.
 * ============================================================ */

/* ---------- Outer template background design ----------
   A fixed, site-wide backdrop that sits BEHIND every page (z-index:-1) —
   it never touches layout, content, or Elementor's own section
   backgrounds; most sections are opaque, so this mostly reads at page
   edges/gaps and gives the whole template one consistent identity.
   Two layers:
   1) Soft brand-colored glows (kept from before, adds depth).
   2) A very faint diagonal crosshatch — a nod to engineering/blueprint
      drafting lines, fitting a furniture-manufacturing brand — subtle
      enough to never compete with content or images. */
body{ position:relative; }
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(600px 500px at 8% -5%, rgba(var(--sai-accent-rgb),.10), transparent 60%),
    radial-gradient(700px 600px at 105% 15%, rgba(200,97,42,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(200,97,42,.08), transparent 60%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg, rgba(242,232,217,.03) 0px, rgba(242,232,217,.03) 1px, transparent 1px, transparent 68px),
    repeating-linear-gradient(45deg, rgba(242,232,217,.025) 0px, rgba(242,232,217,.025) 1px, transparent 1px, transparent 68px);
}

/* ---------- Header: subtle elevation once the page is scrolled ---------- */
.sai-header{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.sai-header.is-scrolled{
  background:rgba(8,8,8,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border-bottom-color:rgba(var(--sai-accent-rgb),.25);
}
.sai-logo img{ transition:filter .3s ease; }

/* Animated underline on nav links */
.sai-nav a{ position:relative; overflow:hidden; }
.sai-nav a::after{
  content:""; position:absolute; left:18px; right:18px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--sai-accent),var(--sai-gold));
  transform:scaleX(0); transform-origin:center; transition:transform .3s ease;
  border-radius:2px;
}
.sai-nav a:hover::after,
.sai-nav .current-menu-item > a::after{ transform:scaleX(1); }

/* CTA button — soft glow pulse + light sweep on hover */
.sai-cta{ position:relative; overflow:hidden; box-shadow:0 0 0 0 rgba(var(--sai-accent-rgb),.0); animation:sai-cta-pulse 3.2s ease-in-out infinite; }
.sai-cta::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.sai-cta:hover::before{ left:130%; }
@keyframes sai-cta-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--sai-accent-rgb),.0); }
  50%{ box-shadow:0 0 0 6px rgba(var(--sai-accent-rgb),.14); }
}

/* ---------- Gradient text (stat numbers, hero highlight line) ----------
   Warm copper → amber gradient instead of a single flat yellow, so the
   accent reads as the same rich orange-to-gold treatment used across
   the reference site rather than plain yellow. */
.sai-gradient-text,
.sai-gradient-text .elementor-heading-title{
  background: linear-gradient(135deg, var(--sai-gold) 0%, var(--sai-accent) 55%, var(--sai-accent-soft) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---------- Gradient-filled primary buttons ---------- */
.sai-btn-gradient .elementor-button{
  background: linear-gradient(135deg, var(--sai-gold) 0%, var(--sai-accent) 100%) !important;
  color: var(--sai-bg) !important;
}
.sai-btn-gradient .elementor-button:hover{
  background: linear-gradient(135deg, var(--sai-accent) 0%, var(--sai-gold) 100%) !important;
}

/* ---------- Zone seam ----------
   A soft glowing divider dropped at the top of a section to mark the
   start of a new content zone — used where two neighbouring sections
   would otherwise share the exact same flat background and visually
   merge into one undifferentiated block. */
.sai-zone-seam{ position:relative; }
.sai-zone-seam::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(88%, 1100px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--sai-accent-rgb),.4), transparent);
}
.sai-zone-seam::after{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:220px; height:60px;
  background:radial-gradient(closest-side, rgba(var(--sai-accent-rgb),.16), transparent 70%);
  pointer-events:none;
}

/* ---------- Zone transition ----------
   Instead of a flat single-tone background repeated across several
   consecutive sections (which reads as one long bleeding block), this
   gives the closing section of a zone a gradient wash that eases into
   the tone of the section that follows it. */
.sai-zone-transition{
  background: linear-gradient(180deg, #F1E9D8 0%, #FFFFFF 55%, #F7F1E6 100%) !important;
}

/* ---------- Elementor buttons everywhere (client's own drag-in buttons too) ---------- */
.elementor-button{
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.elementor-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--sai-accent-rgb),.35);
}
.elementor-button::after{
  content:""; position:absolute; inset:0; left:-60%; width:40%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .6s ease; pointer-events:none;
}
.elementor-button:hover::after{ left:130%; }

/* ---------- Icon badges (icon-box widget) — the "better icons" ask ----------
   We don't touch the icon color set from Elementor (stays on-brand copper),
   we upgrade the container around it: soft gradient badge, glow ring,
   lift + gentle rotate on hover. Applies to every icon-box on the site,
   including ones the client adds later via drag-and-drop. */
.elementor-icon-box-wrapper{ transition:transform .3s ease; }
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper{ transform:translateY(-4px); }
.elementor-icon-box-icon{ position:relative; }
.elementor-icon-box-icon .elementor-icon{
  position:relative;
  border-radius:50%;
  background:
    linear-gradient(145deg, rgba(var(--sai-accent-rgb),.16), rgba(200,97,42,.06));
  box-shadow:
    0 0 0 1px rgba(var(--sai-accent-rgb),.25) inset,
    0 10px 24px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}
.elementor-icon-box-icon .elementor-icon::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(var(--sai-accent-rgb),.0);
  transition:border-color .35s ease, transform .35s ease; transform:scale(.9);
  pointer-events:none;
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon{
  transform:rotate(-8deg) scale(1.08);
  box-shadow:
    0 0 0 1px rgba(var(--sai-accent-rgb),.5) inset,
    0 14px 32px rgba(0,0,0,.45), 0 0 26px rgba(var(--sai-accent-rgb),.25);
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon::after{
  border-color:rgba(var(--sai-accent-rgb),.35);
  transform:scale(1);
}

/* Icon-list widget upgrade (checklists, feature lists, etc.) */
.elementor-icon-list-icon{ transition:transform .3s ease, color .3s ease; }
.elementor-icon-list-item:hover .elementor-icon-list-icon{
  transform:scale(1.18);
  color:var(--sai-accent) !important;
}

/* Hero category tiles — layer the accent color into the existing glow */
.sai-hero-tile .elementor-icon{
  background:linear-gradient(145deg, rgba(var(--sai-accent-rgb),.14), rgba(200,97,42,.05));
}
.sai-hero-tile:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--sai-accent-rgb),.5) inset, 0 0 30px rgba(var(--sai-accent-rgb),.12);
}
.sai-hero-tile:hover .elementor-icon{
  transform:rotate(-8deg) scale(1.1);
  border-color:var(--sai-accent);
}

/* ---------- Scroll-reveal entrances (progressive enhancement) ----------
   Elements only get these classes via JS (see main.js). Without JS,
   nothing here applies and the page renders fully visible as before. */
.sai-reveal-init{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.sai-reveal-init.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .sai-reveal-init{ opacity:1 !important; transform:none !important; transition:none !important; }
  .sai-cta{ animation:none; }
}

/* ---------- Floating WhatsApp button ---------- */
.sai-wa-float{
  position:fixed; z-index:9998; bottom:24px; left:24px;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#25D366,#1DA851);
  color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.sai-wa-float:hover{ transform:translateY(-3px) scale(1.05); opacity:1; box-shadow:0 16px 34px rgba(0,0,0,.5); }
.sai-wa-float svg{ width:28px; height:28px; }
.sai-wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:sai-wa-ring 2.4s ease-out infinite;
}
@keyframes sai-wa-ring{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  100%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
}
@media (max-width:768px){
  .sai-wa-float{ width:52px; height:52px; bottom:16px; left:16px; }
  .sai-wa-float svg{ width:25px; height:25px; }
}
@media (prefers-reduced-motion:reduce){ .sai-wa-float::before{ animation:none; } }

/* ============================================================
 * HERO MOTION — v1.5
 * Targets .sai-hero (added via css_classes in sai_section_hero(),
 * same non-structural pattern already used for product cards and
 * hero tiles — still 100% Elementor-editable). Adds: slow ambient
 * aurora glow, a gentle background pan, and a scroll cue. All are
 * transform/opacity/background-position only — no layout thrash.
 * ============================================================ */
.sai-hero{ position:relative; overflow:hidden; }

/* NOTE (v1.6): the old background-pan animation was removed on purpose.
   The hero background here is meant to become a VIDEO in Elementor
   (Section → Background → Video), so nothing should animate the
   image/video layer itself — all motion now lives on the hero's TEXT
   only (heading/eyebrow/paragraph/button), via the existing
   .sai-reveal-init / .is-visible scroll-reveal system (main.js), with
   a slightly stronger hero-only rise-in defined further down. */

/* Floating aurora glow, layered above Elementor's own dark overlay */
.sai-hero::before{
  content:"";
  position:absolute; inset:-10%;
  z-index:1; pointer-events:none;
  background:
    radial-gradient(380px 320px at 18% 22%, rgba(var(--sai-accent-rgb),.20), transparent 65%),
    radial-gradient(420px 360px at 84% 78%, rgba(200,97,42,.22), transparent 65%);
  animation:sai-hero-drift 16s ease-in-out infinite alternate;
}
/* Make sure hero's own content/columns stay above the glow layer */
.sai-hero > .elementor-container{ position:relative; z-index:2; }

@keyframes sai-hero-drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-3%, 3%) scale(1.06); }
}

/* Extra amber shimmer layer on top of the aurora glow — gives the hero a
   richer, more "premium" moving light instead of a flat static image. */
.sai-hero::after{
  content:"";
  position:absolute; inset:-15%;
  z-index:1; pointer-events:none;
  background:radial-gradient(600px 500px at 50% 0%, rgba(var(--sai-accent-rgb),.14), transparent 60%);
  animation:sai-hero-shimmer 10s ease-in-out infinite alternate;
}
@keyframes sai-hero-shimmer{
  from{ opacity:.5; transform:translateY(0); }
  to{ opacity:1; transform:translateY(3%); }
}
@media (max-width:768px){ .sai-hero::after{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .sai-hero::before, .sai-hero::after{ animation:none !important; } }

/* ============================================================
 * POD SPOTLIGHT — light "premium" section for the acoustic pods
 * feature, placed near the top of the homepage. Deliberately
 * breaks from the dark base palette (client asked for a lighter,
 * airier feel here) with a soft floating product shot and a
 * gentle ambient glow.
 * ============================================================ */
.sai-pod-spotlight{ position:relative; overflow:hidden; }
/* Soft gradient seams so the light section blends into the dark
   sections above/below instead of cutting abruptly — feels more
   like a deliberate "premium" break than a color glitch. */
.sai-pod-spotlight::after{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(13,43,43,.10), transparent 60px),
    linear-gradient(to top, rgba(13,43,43,.10), transparent 60px);
}
.sai-pod-spotlight::before{
  content:"";
  position:absolute; inset:-20%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(420px 380px at 12% 20%, rgba(200,97,42,.10), transparent 65%),
    radial-gradient(460px 400px at 90% 85%, rgba(var(--sai-accent-rgb),.14), transparent 65%);
  animation:sai-hero-drift 18s ease-in-out infinite alternate;
}
.sai-pod-spotlight > .elementor-container{ position:relative; z-index:1; }
.sai-pod-spotlight-content .elementor-widget-button{ display:inline-block; }
.sai-pod-float img{
  animation:sai-pod-float 5s ease-in-out infinite;
  filter:drop-shadow(0 30px 40px rgba(13,43,43,.18));
  transition:transform .5s cubic-bezier(.16,.8,.24,1), filter .5s ease;
}
.sai-pod-float img:hover{
  transform:scale(1.035) translateY(-16px);
  filter:drop-shadow(0 40px 50px rgba(13,43,43,.24));
}
@keyframes sai-pod-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}
@media (max-width:768px){ .sai-pod-spotlight::before{ animation:none; } .sai-pod-float img{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .sai-pod-spotlight::before{ animation:none; } .sai-pod-float img{ animation:none; } }

/* Scroll cue — injected by JS only when a .sai-hero exists on the page */
.sai-scroll-cue{
  position:absolute; left:50%; bottom:22px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--sai-accent-soft); opacity:.85;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; pointer-events:none;
}
.sai-scroll-cue-label{ font-family:'Cairo','Tajawal',sans-serif; }
.sai-scroll-cue-pill{
  width:20px; height:32px; border:2px solid rgba(var(--sai-accent-rgb),.55);
  border-radius:12px; position:relative;
}
.sai-scroll-cue-pill::before{
  content:""; position:absolute; top:6px; left:50%; width:4px; height:4px;
  background:var(--sai-accent); border-radius:50%; transform:translateX(-50%);
  animation:sai-scroll-cue-dot 1.8s ease-in-out infinite;
}
@keyframes sai-scroll-cue-dot{
  0%{ opacity:1; top:6px; }
  70%{ opacity:0; top:18px; }
  100%{ opacity:0; top:18px; }
}

/* Hero's headline/eyebrow/paragraph/button are staggered via inline
   transition-delay set in JS (see revealSelectors in main.js), reusing
   the .sai-reveal-init / .is-visible system above. This scoped override
   just gives the hero's text a slightly more noticeable rise-in than
   regular sections — since it's the only thing animating in the hero now
   that the background pan was removed (background is meant to hold a
   video, so it stays static/untouched). */
.sai-hero .sai-reveal-init{
  transform:translateY(34px);
  transition-duration:.85s;
}
@media (prefers-reduced-motion:reduce){
  .sai-hero .sai-reveal-init{ transform:none; }
}

/* ============================================================
 * MOBILE HARDENING & PERFORMANCE PASS — v1.5
 * Fixes the broken/inconsistent phone view and keeps things light
 * on low-end devices: shorter transitions, no continuous infinite
 * animations, blur effects trimmed, hero motion simplified.
 * ============================================================ */
@media (max-width:768px){
  /* Kill anything continuous/expensive — battery + smoothness */
  .sai-hero,
  .sai-hero::before,
  .sai-cta{ animation:none !important; }
  .sai-hero{ background-size:cover !important; background-position:center center !important; }

  /* backdrop-filter blur is one of the heaviest paints on mobile GPUs */
  .sai-header{ backdrop-filter:none; background:rgba(8,8,8,.97); }
  .sai-hero-tile{ backdrop-filter:none; }

  /* Faster, lighter reveal so content doesn't feel like it's "missing"
     while scrolling on a small, fast-scrolling screen */
  .sai-reveal-init{
    transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }

  /* Smaller ambient glow so it can't ever push layout width on narrow
     viewports, and lighter to paint */
  body::before{
    background:
      radial-gradient(320px 260px at 10% -5%, rgba(var(--sai-accent-rgb),.08), transparent 60%),
      radial-gradient(360px 300px at 100% 20%, rgba(200,97,42,.10), transparent 60%);
  }
  body::after{ display:none; } /* skip the crosshatch paint cost on phones */

  /* Scroll cue adds clutter on short mobile heroes — hide it there */
  .sai-scroll-cue{ display:none; }

  /* Keep the floating WhatsApp button clear of thumbs/edges */
  .sai-wa-float{ bottom:14px; left:14px; }

  /* Icon badges: slightly smaller ring/glow so it doesn't overwhelm
     tightly-packed mobile cards */
  .elementor-icon-box-icon .elementor-icon::after{ inset:-4px; }
}

@media (prefers-reduced-motion:reduce){
  .sai-hero, .sai-hero::before{ animation:none !important; }
}

/* ============================================================
 * REDESIGN PASS — v1.7 (matches the approved reference layout)
 * Hero content width, inline feature badges, about-image stat
 * overlay, about checklist, category-card link, final CTA band.
 * ============================================================ */

/* ---------- Hero: keep the text block from stretching edge-to-edge ---------- */
.sai-hero-content{ max-width:640px; }
.sai-hero-content .elementor-widget-button{ display:inline-block; margin-inline-end:14px; }
.sai-hero-content .elementor-widget-button:last-of-type{ margin-inline-end:0; }
@media (max-width:768px){
  .sai-hero-content{ max-width:100%; }
  .sai-hero-content .elementor-widget-button{ display:block; margin-inline-end:0; margin-bottom:12px; width:100%; text-align:center; }
}

/* ---------- Hero feature badges (inline icon-list) ---------- */
.sai-hero-badges .elementor-icon-list-items{ flex-wrap:wrap; row-gap:10px; }
.sai-hero-badges .elementor-icon-list-item{ opacity:.95; }
.sai-hero-badges .elementor-icon-list-icon{ font-size:12px; }
.sai-hero-badges .elementor-icon-list-text{
  font-family:'Cairo','Tajawal',sans-serif;
  letter-spacing:.2px;
}

/* ---------- About image: floating "+10 سنوات خبرة" stat card ---------- */
.sai-about-media{ position:relative; }
.sai-about-stat{
  position:absolute !important;
  bottom:-24px; left:-18px;
  width:auto !important; max-width:none !important;
  z-index:2;
}
[dir="rtl"] .sai-about-stat{ left:-18px; right:auto; }
@media (max-width:900px){
  .sai-about-stat{ position:relative !important; left:auto; bottom:auto; margin-top:16px; display:inline-block; }
}

/* ---------- About checklist ---------- */
.sai-about-checklist .elementor-icon-list-item{ align-items:center; }
.sai-about-checklist .elementor-icon-list-icon i{ font-size:16px; }
.sai-about-checklist .elementor-icon-list-text{
  font-family:'Cairo','Tajawal',sans-serif;
  color:var(--sai-muted);
}

/* ---------- Category card "استكشف الفئة" link ---------- */
.sai-category-card .sai-cat-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--sai-accent) !important;
  font-weight:700; font-size:14px;
  transition:gap .25s ease, opacity .25s ease;
}
.sai-category-card .sai-cat-link span{ transition:transform .25s ease; display:inline-block; }
.sai-category-card:hover .sai-cat-link{ gap:10px; }
.sai-category-card .elementor-widget-text-editor p{ margin:0 0 4px; }
.sai-category-card .elementor-widget-text-editor:last-of-type p{ margin:0; }

/* ---------- Hero stats row: +18 عميل مؤسسي · +15 سنة خبرة · 100% صناعة محلية ---------- */
.sai-hero-stats{
  display:flex; flex-wrap:wrap; gap:34px;
  margin-top:6px;
}
.sai-hero-stat{ display:flex; flex-direction:column; align-items:flex-start; }
.sai-hero-stat-num{
  display:block;
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:800; font-size:30px; line-height:1.1;
  color:var(--sai-accent);
}
.sai-hero-stat-label{
  display:block; margin-top:4px;
  font-family:'Cairo','Tajawal',sans-serif;
  font-size:13px; color:var(--sai-muted);
}
@media (max-width:600px){
  .sai-hero-stats{ gap:22px; }
  .sai-hero-stat-num{ font-size:24px; }
}

/* ---------- "عملاؤنا" nav anchor offset (sticky header) ---------- */
#sai-clients{ scroll-margin-top:110px; }

/* ---------- Final CTA band ---------- */
.sai-final-cta{ text-align:center; }
.sai-final-cta .elementor-widget-button{ display:inline-block; margin:0 7px 10px; }
@media (max-width:600px){
  .sai-final-cta .elementor-widget-button{ display:block; margin:0 0 12px; }
}



/* ============================================================
 * SINGLE PRODUCT — Safety guards ضد خروج الصور خارج الحدود.
 * بيتطبق على أي منتج (Elementor أو التصميم المخصص).
 * ============================================================ */
body.single-product img:not(.elementor-image-carousel-wrapper img):not(.sai-gallery-main img),
body.single-sai_product img:not(.elementor-image-carousel-wrapper img):not(.sai-gallery-main img),
body.single-product .elementor-widget img:not(.elementor-image-carousel-wrapper img),
body.single-product .sai-sc-gallery img,
body.single-product .e-image-carousel img:not(.elementor-image-carousel-wrapper img),
body.single-product .swiper-slide img:not(.elementor-image-carousel-wrapper .swiper-slide img) {
    max-width: 100% !important;
    height: auto !important;
}

body.single-product .sai-sc-gallery {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* لو أي widget أو section بيحاول يطلع عن حدود الـ viewport */
body.single-product .elementor-section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   Force proper mobile stacking for Elementor sections/columns on
   the single-product page. Without this, some environments render
   the classic Section/Column structure as 3 columns squeezed side
   by side on mobile (image row, then text row, then button row)
   instead of each column becoming a full-width stacked block —
   this rule guarantees the expected "one card under the other"
   mobile layout for the gallery+info section and the related
   products grid alike.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    body.single-product .elementor-section > .elementor-container {
        flex-wrap: wrap !important;
    }
    body.single-product .elementor-section > .elementor-container > .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.single-product .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
        width: 100% !important;
    }
}

/* ==================================================================
   Single Product Page — Cinematic v2
   ================================================================== */
.sai-product-page { background: var(--sai-bg); }

/* Breadcrumb */
.sai-breadcrumb { padding: 22px 0 8px; font-size: 14px; color: var(--sai-muted); border-bottom: 1px solid rgba(200,97,42,.08); }
.sai-breadcrumb a { color: var(--sai-text); opacity: .8; transition: color .2s, opacity .2s; }
.sai-breadcrumb a:hover { color: var(--sai-gold); opacity: 1; }
.sai-bc-sep { margin: 0 8px; color: var(--sai-gold); opacity: .6; }
.sai-bc-current { color: var(--sai-accent); font-weight: 600; }

/* Layout: vertical thumbs + main + info */
.sai-product-hero-v2 { padding: 32px 0 56px; }
.sai-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); /* image ~63% / info ~37% on desktop */
  gap: 40px;
  align-items: start;
}
@media (max-width: 1200px) {
  .sai-product-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) { .sai-product-layout { grid-template-columns: 1fr; gap: 28px; } }

/* Gallery: thumbs rail + main viewer */
.sai-gallery {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr); /* was 92px — frees up more width for the main image */
  gap: 12px;
  direction: ltr; /* keep thumbs at left visually in RTL layout */
}
@media (max-width: 600px) {
  .sai-gallery { grid-template-columns: 1fr; }
  .sai-gallery-thumbs { flex-direction: row !important; max-height: none !important; overflow-x: auto; }
}
.sai-gallery-thumbs {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px; overflow-y: auto; padding: 4px;
  scrollbar-width: thin; scrollbar-color: var(--sai-gold) transparent;
}
.sai-gthumb {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  padding: 0; margin: 0; border: 2px solid transparent;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--sai-surface); transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
}
.sai-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .25s; }
.sai-gthumb:hover img { opacity: 1; }
.sai-gthumb:hover { transform: translateY(-2px); }
.sai-gthumb.is-active { border-color: var(--sai-gold); box-shadow: 0 0 0 3px rgba(200,97,42,.15); }
.sai-gthumb.is-active img { opacity: 1; }

/* Main viewer */
.sai-gallery-main {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--sai-surface);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(240,178,60,.06);
}
.sai-gmain-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.sai-gmain-slide.is-active { opacity: 1; pointer-events: auto; }
.sai-gmain-slide img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; transition: transform 8s ease; }
.sai-gallery-main:hover .sai-gmain-slide.is-active img { transform: scale(1.04); }

/* Nav arrows on main image */
.sai-garrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(13,43,43,.75); color: var(--sai-text);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; z-index: 3;
  transition: background .25s, transform .25s;
  backdrop-filter: blur(6px);
}
.sai-garrow:hover { background: var(--sai-gold); color: #0D2B2B; transform: translateY(-50%) scale(1.08); }
.sai-garrow-prev { left: 14px; }
.sai-garrow-next { right: 14px; }

.sai-gzoom-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 0;
  background: rgba(13,43,43,.75); color: var(--sai-text);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .25s, color .25s;
}
.sai-gzoom-btn:hover { background: var(--sai-gold); color: #0D2B2B; }

/* Info panel */
.sai-product-info { direction: rtl; padding-top: 6px; }
.sai-info-eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(240,178,60,.08); color: var(--sai-accent);
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  border: 1px solid rgba(240,178,60,.25);
}
.sai-info-title {
  font-size: clamp(24px, 3vw, 38px); line-height: 1.25; margin: 0 0 22px;
  color: var(--sai-text);
}

.sai-info-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px;
}
.sai-info-card-wide { grid-column: 1 / -1; }
.sai-info-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(17,47,47,.9), rgba(13,43,43,.9));
  border: 1px solid rgba(200,97,42,.12);
  transition: border-color .25s, transform .25s;
}
.sai-info-card:hover { border-color: rgba(240,178,60,.35); transform: translateY(-2px); }
.sai-info-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(240,178,60,.1); color: var(--sai-accent);
}
.sai-info-label { font-size: 12px; color: var(--sai-muted); margin-bottom: 3px; letter-spacing: .3px; }
.sai-info-value { font-size: 15px; color: var(--sai-text); font-weight: 600; line-height: 1.5; }

/* Info CTA */
.sai-info-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.sai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 8px; font-weight: 700; font-size: 15px;
  font-family: inherit; cursor: pointer; border: 0;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
  flex: 1 1 220px; text-align: center;
}
.sai-btn-primary {
  background: linear-gradient(135deg, var(--sai-gold), var(--sai-accent));
  color: #0D2B2B;
  box-shadow: 0 12px 28px -12px rgba(200,97,42,.6);
}
.sai-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(240,178,60,.7); opacity: 1; }
.sai-btn-whatsapp {
  background: #25D366; color: #fff;
  box-shadow: 0 12px 28px -12px rgba(37,211,102,.5);
}
.sai-btn-whatsapp:hover { transform: translateY(-2px); background: #1FBE5A; opacity: 1; color: #fff; }

/* Description */
.sai-info-desc { padding-top: 24px; border-top: 1px solid rgba(200,97,42,.15); }
.sai-info-desc h2 {
  font-size: 20px; margin-bottom: 12px; color: var(--sai-accent);
  display: flex; align-items: center; gap: 10px;
}
.sai-info-desc h2::before { content: ''; width: 4px; height: 20px; background: var(--sai-gold); border-radius: 2px; }
.sai-info-desc-body { color: var(--sai-text); opacity: .88; line-height: 1.9; font-size: 16px; }

/* Related products */
.sai-related { padding: 70px 0 90px; background: linear-gradient(180deg, var(--sai-bg), var(--sai-surface)); border-top: 1px solid rgba(200,97,42,.1); }
.sai-related-head { text-align: center; margin-bottom: 40px; }
.sai-related-eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: rgba(240,178,60,.08); color: var(--sai-accent);
  font-size: 13px; font-weight: 600; margin-bottom: 12px;
  border: 1px solid rgba(240,178,60,.2);
}
.sai-related-title { font-size: clamp(24px, 3vw, 34px); margin: 0; color: var(--sai-text); }
.sai-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.sai-related-card {
  display: block; background: var(--sai-surface);
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(200,97,42,.1);
  color: var(--sai-text); text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
}
.sai-related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.7);
  border-color: rgba(240,178,60,.35);
  opacity: 1;
}
.sai-related-media { aspect-ratio: 4/3; overflow: hidden; }
.sai-related-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; display: block; }
.sai-related-card:hover .sai-related-media img { transform: scale(1.08); }
.sai-related-body { padding: 16px 18px 20px; }
.sai-related-code { display: inline-block; font-size: 11px; color: var(--sai-accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.sai-related-name { font-size: 16px; margin: 0 0 10px; line-height: 1.4; color: var(--sai-text); }
.sai-related-cta { font-size: 13px; color: var(--sai-gold); font-weight: 600; }

/* Lightbox */
.sai-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(5,15,15,.96);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.sai-lightbox.is-open { display: flex; animation: sai-lb-in .3s ease; }
@keyframes sai-lb-in { from { opacity: 0; } to { opacity: 1; } }
.sai-lb-stage { max-width: 92vw; max-height: 85vh; display: grid; place-items: center; cursor: zoom-out; }
.sai-lb-image {
  max-width: 92vw; max-height: 85vh;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.9);
  transition: transform .35s ease;
}
.sai-lb-image.is-zoomed { cursor: zoom-out; transform: scale(1.6); }
.sai-lb-close, .sai-lb-prev, .sai-lb-next {
  position: absolute; background: rgba(200,97,42,.15); color: #fff;
  border: 1px solid rgba(240,178,60,.35); border-radius: 50%;
  width: 52px; height: 52px; font-size: 28px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s, transform .25s;
}
.sai-lb-close:hover, .sai-lb-prev:hover, .sai-lb-next:hover { background: var(--sai-gold); transform: scale(1.08); }
.sai-lb-close { top: 24px; left: 24px; }
.sai-lb-prev { top: 50%; left: 24px; transform: translateY(-50%); }
.sai-lb-next { top: 50%; right: 24px; transform: translateY(-50%); }
.sai-lb-prev:hover, .sai-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.sai-lb-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--sai-accent); font-weight: 600; font-size: 14px;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(13,43,43,.7); border: 1px solid rgba(240,178,60,.2);
}
@media (max-width: 600px) {
  .sai-lb-close { top: 12px; left: 12px; width: 44px; height: 44px; font-size: 24px; }
  .sai-lb-prev, .sai-lb-next { width: 44px; height: 44px; font-size: 22px; }
  .sai-lb-prev { left: 8px; } .sai-lb-next { right: 8px; }
}

/* ============================================================
 * HOME — "أعمالنا" Bento showcase grid
 * One large featured tile (right column) + 4 tiles stacked in
 * pairs across the other two columns — real project photography,
 * upscaled source photos, no placeholders.
 *
 * v1.12.3: now built from NATIVE Elementor Image + Text widgets
 * (see sai_home_work_showcase_columns() in inc/elementor-data.php)
 * so every tile is editable/replaceable in the Elementor editor.
 * The tall "feature" look is achieved with plain Elementor columns
 * (a wide column + two columns that naturally stack 2 tiles each)
 * — these rules just style each tile and enlarge the whole grid
 * for a bigger, clearer display.
 *
 * v1.13.1 — FIX: the 2 stacked columns used a FIXED tile height
 * (300px) while the feature column used a fixed 640px. Elementor's
 * flex row stretches every column to match the tallest one (the
 * feature), but nothing filled that extra stretched space inside
 * the shorter columns — it just sat there as dead whitespace,
 * throwing the whole grid out of alignment (reported by client:
 * "مش مرتب"). Fix: the two stacked tiles now flex to fill their
 * column's full height exactly (no more fixed 300px), so a
 * shorter/taller feature image always lines up perfectly with the
 * stacked pair — same colors/photos, just properly balanced.
 * Captions also get a reserved 2-line height so a 1-line title next
 * to a 2-line title never throws its neighbour's image out of sync.
 * ============================================================ */
.sai-bento-row > .elementor-container{ align-items:stretch; }
.sai-bento-col{ display:flex; flex-direction:column; height:100%; }

.sai-bento-item{ margin:0 !important; }

/* Feature tile (single, tall) keeps its fixed cinematic height */
.sai-bento-item.sai-bento-feature .elementor-widget-container{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--sai-border); background:#F1E9D8;
  height:640px;
}

/* The 2 STACKED tiles: no fixed height — grow to fill whatever
   space is left in their column after the two fixed-height
   captions, so the column's total height always matches the
   feature column exactly (no leftover gap, no overflow). */
.sai-bento-item:not(.sai-bento-feature){ flex:1 1 0; min-height:180px; }
.sai-bento-item:not(.sai-bento-feature) .elementor-widget-container{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--sai-border); background:#F1E9D8;
  height:100%;
}

.sai-bento-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter:saturate(1) brightness(.92);
}
.sai-bento-item .elementor-widget-container:hover img{ transform:scale(1.06); filter:saturate(1.08) brightness(1); }
.sai-bento-item .elementor-widget-container::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(5,10,10,.85) 100%);
  pointer-events:none;
}
.sai-bento-cap{ margin-top:-2px; flex:0 0 auto; }
.sai-bento-cap .elementor-widget-container{ padding:0; }
.sai-bento-eyebrow{
  display:block; color:var(--sai-accent); font-size:13px; font-weight:700;
  letter-spacing:.5px; margin-bottom:6px; opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sai-bento-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--sai-text); font-weight:700; font-size:19px; line-height:1.35;
  font-family:'Cairo', sans-serif;
  min-height:calc(1.35em * 2); /* always reserve 2 lines, even for a 1-line title */
}
.sai-bento-cap-feature .sai-bento-title{ font-size:28px; min-height:calc(1.35em * 2); }

/* Tablet/mobile: Elementor stacks each column to full width, so the
   flex-fill trick above has no sibling to match height against —
   fall back to fixed, content-driven heights here instead (a 100%
   height on an auto-height parent would collapse to 0). */
@media (max-width: 1024px){
  .sai-bento-item:not(.sai-bento-feature){ flex:none; min-height:0; }
  .sai-bento-item:not(.sai-bento-feature) .elementor-widget-container{ height:260px; }
  .sai-bento-item.sai-bento-feature .elementor-widget-container{ height:400px; }
}
@media (max-width: 767px){
  .sai-bento-item:not(.sai-bento-feature) .elementor-widget-container{ height:280px; }
  .sai-bento-item.sai-bento-feature .elementor-widget-container{ height:320px; }
}


/* ============================================================
 * HOME — "لماذا تسارع" premium split (image + checklist + counters)
 * ============================================================ */
.sai-why-stats{
  display:flex; gap:0; margin-top:28px; border-top:1px solid var(--sai-border); padding-top:24px;
}
.sai-why-stat{ flex:1; text-align:center; border-left:1px solid var(--sai-border); }
.sai-why-stat:last-child{ border-left:none; }
.sai-why-stat-num{
  display:block; font-family:'Cairo', sans-serif; font-weight:900; font-size:32px; margin-bottom:4px;
}
.sai-why-stat-label{ display:block; color:var(--sai-muted); font-size:13px; }
@media (max-width:640px){
  .sai-why-stats{ flex-wrap:wrap; gap:18px 0; }
  .sai-why-stat{ flex:1 1 50%; border-left:none; border-top:1px solid var(--sai-border); padding-top:14px; }
}

/* ============================================================
 * HOME — Testimonials
 * ============================================================ */
.sai-testi-card{
  position:relative;
  background:var(--sai-surface);
  border:1px solid var(--sai-border);
  border-radius:14px;
  padding:34px 28px 26px;
  height:100%;
}
.sai-testi-quote{
  font-family:Georgia, serif; font-size:56px; line-height:1; color:var(--sai-gold);
  opacity:.5; display:block; margin-bottom:6px;
}
.sai-testi-text{
  color:var(--sai-text); font-size:15px; line-height:1.9; margin-bottom:18px; display:block;
}
.sai-testi-name{ color:var(--sai-accent); font-weight:700; font-size:15px; display:block; }
.sai-testi-role{ color:var(--sai-muted); font-size:13px; display:block; margin-top:2px; }
.sai-testi-stars{ color:var(--sai-accent); font-size:13px; letter-spacing:2px; margin-bottom:10px; display:block; }