/*
Theme Name: قالب النسيم لخدمات التنظيف
Theme URI: https://example.com
Author: السيد أسامة
Author URI: https://example.com
Description: قالب ووردبريس عربي (RTL) لشركات التنظيف: تنظيف منازل وفلل وشقق، تنظيف مكاتب وشركات، تنظيف واجهات وزجاج، تنظيف سجاد وموكيت وكنب، تعقيم وتلميع، وتنظيف ما بعد التشطيب. شريط قائمة موحّد يظهر في كل صفحات القالب والمقالات، بدون أزرار اتصال/واتساب عائمة وبدون أي فورم تواصل.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alnaseem-clean
*/

/* ==========================================================================
   0. الخطوط
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;800;900&family=Tajawal:wght@300;400;500;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ==========================================================================
   1. المتغيرات — نظام الألوان: "طيف النظافة"
   خلفية ليلية زرقاء-خضراء داكنة (تذكّر بالماء والصابون) + تدرّج يمزج
   أزرق فقاعات الصابون والأخضر النعناعي المنعش والفيروزي الصافي كعنصر
   توقيع بصري واحد، يعبّر عن النظافة والانتعاش والصفاء.
   ========================================================================== */
:root{
  --ink:#071c1c;
  --ink-2:#0a2626;
  --panel:#0d3230;
  --panel-2:#123c39;
  --line:rgba(255,255,255,.09);
  --text:#eefcf7;
  --text-dim:#9bd4c6;
  --text-faint:#5f9488;

  --c-blue:#38d6f8;
  --c-teal:#34d399;
  --c-amber:#5eead4;
  --c-navy:#0ea5b7;
  --c-coral:#a7f3d0;

  --grad-signature:linear-gradient(95deg,var(--c-blue) 0%,var(--c-teal) 50%,var(--c-amber) 100%);
  --grad-panel:linear-gradient(160deg,rgba(56,214,248,.14),rgba(52,211,153,.07) 60%,transparent);

  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;

  --font-display:'Cairo',sans-serif;
  --font-body:'Tajawal',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --ease:cubic-bezier(.19,1,.22,1);
}

/* ==========================================================================
   2. إعادة ضبط أساسية
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;width:100%;}
body{
  direction:rtl;
  text-align:right;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.8;
  width:100%;
  position:relative;
}
.page-scroll-wrap{overflow-x:hidden;width:100%;position:relative;}
img,svg{max-width:100%;}
img{display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.25;color:var(--text);}
::selection{background:var(--c-teal);color:#04121b;}

body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(60vw 60vw at 12% -10%, rgba(56,214,248,.16), transparent 60%),
    radial-gradient(50vw 50vw at 110% 15%, rgba(52,211,153,.14), transparent 60%),
    radial-gradient(45vw 45vw at 80% 100%, rgba(94,234,212,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.container{width:92%;max-width:1220px;margin:0 auto;position:relative;z-index:2;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--c-blue);
  background:rgba(56,214,248,.08);border:1px solid rgba(56,214,248,.25);
  padding:6px 16px;border-radius:99px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-blue);box-shadow:0 0 10px var(--c-blue);}

.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px;}
.section-head p{color:var(--text-dim);font-size:16.5px;}

/* لون الجملة المميزة الموحّد — لون صلب متوافق مع كل الأجهزة كخط أساس،
   ويتحول إلى تدرّج "طيف البرودة" فقط في المتصفحات التي تدعمه فعلياً،
   حتى لا يختفي النص أبداً على أي هاتف أو جهاز */
.grad-text{color:var(--c-blue);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{
    background:var(--grad-signature);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

section{position:relative;z-index:2;padding:110px 0;}
.section-alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.02) 15%,rgba(255,255,255,.02) 85%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ==========================================================================
   3. الهيدر — شريط قائمة موحّد يظهر في كل صفحات القالب (الرئيسية/الصفحات/المقالات)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  padding:16px 0;
  backdrop-filter:blur(16px);
  background:rgba(8,21,33,.78);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);flex:none;max-width:70%;}

/* شعار كامل مرفوع فعلياً — بدون أي صندوق/علامة صغيرة بديلة */
.site-logo{display:flex;align-items:center;max-width:100%;}
.site-logo img,.site-logo .custom-logo{max-height:46px;width:auto;max-width:100%;object-fit:contain;display:block;}

/* اسم الشركة نصاً فقط — يظهر بدلاً من الشعار إن لم يوجد شعار مرفوع */
.brand-name-text{
  font-weight:800;font-size:16.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;
}
.brand-name-text small{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--text-faint);white-space:normal;overflow:visible;text-overflow:clip;}

.main-nav ul{display:flex;gap:4px;align-items:center;}
.main-nav a{
  font-size:14.5px;color:var(--text-dim);
  padding:9px 15px;border-radius:99px;
  transition:.25s var(--ease);display:block;
}
.main-nav a:hover{color:var(--text);background:var(--panel);}

.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
  align-items:center;justify-content:center;flex:none;
  cursor:pointer;
}
.nav-toggle .bar{display:block;width:20px;height:2px;background:var(--text);position:relative;transition:.25s var(--ease);}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:"";position:absolute;right:0;width:20px;height:2px;background:var(--text);transition:.25s var(--ease);}
.nav-toggle .bar::before{top:-6px;}
.nav-toggle .bar::after{top:6px;}
.nav-toggle[aria-expanded="true"] .bar{background:transparent;}
.nav-toggle[aria-expanded="true"] .bar::before{transform:rotate(45deg);top:0;}
.nav-toggle[aria-expanded="true"] .bar::after{transform:rotate(-45deg);top:0;}

/* ==========================================================================
   4. الهيرو
   ========================================================================== */
.hero{padding:86px 0 60px;overflow:visible;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-copy h1{font-size:clamp(36px,5.2vw,60px);margin-bottom:20px;}
.hero-copy h1 em{font-style:normal;}
.hero-role{font-family:var(--font-mono);font-size:15px;color:var(--text-dim);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:10px 18px;}
.hero-role b{color:var(--c-blue);font-weight:600;}
.hero-desc{color:var(--text-dim);font-size:17px;max-width:520px;margin-bottom:34px;}

.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stats .stat b{display:block;font-family:var(--font-mono);font-size:26px;color:var(--text);}
.hero-stats .stat b em{font-style:normal;}
.hero-stats .stat span{font-size:13px;color:var(--text-faint);}

.hero-visual{position:relative;height:520px;}
.hero-visual .float-card{
  position:absolute;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  animation:floaty 7s ease-in-out infinite;
}
.hero-visual .img-main{width:78%;height:78%;top:0;right:0;animation-delay:0s;}
.hero-visual .img-secondary{width:52%;height:46%;bottom:0;left:0;animation-delay:1.4s;z-index:3;}
.hero-visual .img-main img,.hero-visual .img-secondary img{width:100%;height:100%;object-fit:cover;}
.img-placeholder{
  width:100%;height:100%;
  background:var(--grad-panel), var(--panel-2);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:var(--text-faint);text-align:center;padding:20px;
}
.img-placeholder .ph-mark{
  width:56px;height:56px;border-radius:16px;background:var(--grad-signature);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;color:#04121b;font-size:20px;
}
.img-placeholder small{font-size:12px;line-height:1.6;}

.badge-float{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(15,34,55,.9);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:10px 16px;border-radius:99px;font-size:13px;
  box-shadow:0 15px 30px -10px rgba(0,0,0,.5);animation:floaty 6s ease-in-out infinite;
}
.badge-1{top:8%;left:-4%;animation-delay:.4s;}
.badge-2{bottom:22%;right:-6%;animation-delay:2s;}
.badge-3{top:46%;left:-10%;animation-delay:3.2s;}
.badge-dot{width:9px;height:9px;border-radius:50%;flex:none;}

.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.32;z-index:1;}
.blob-a{width:340px;height:340px;background:var(--c-teal);top:-80px;left:-60px;animation:drift 14s ease-in-out infinite;}
.blob-b{width:260px;height:260px;background:var(--c-amber);bottom:-60px;right:0;animation:drift 18s ease-in-out infinite reverse;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

/* ==========================================================================
   5. الشريط المتحرك التوقيعي
   ========================================================================== */
.ticker-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:16px 0;overflow:hidden;position:relative;z-index:2;}
.ticker-track{display:flex;width:max-content;animation:marquee 32s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:10px;padding:0 34px;font-family:var(--font-mono);font-size:14px;color:var(--text-dim);white-space:nowrap;border-left:1px solid var(--line);}
.ticker-item b{color:var(--text);font-weight:600;}
.ticker-item .dot{width:7px;height:7px;border-radius:50%;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   6. من نحن
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.about-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:420px;}
.about-visual img,.about-visual .img-placeholder{width:100%;height:100%;object-fit:cover;}
.about-copy h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:20px;}
.about-copy p{color:var(--text-dim);margin-bottom:16px;font-size:16px;}
.about-points{margin-top:26px;display:grid;gap:14px;}
.about-points li{display:flex;align-items:flex-start;gap:12px;color:var(--text-dim);font-size:15px;}
.about-points svg{flex:none;margin-top:3px;}

/* ==========================================================================
   7. الخدمات
   ========================================================================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.service-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:32px 28px;transition:.35s var(--ease);position:relative;overflow:hidden;
}
.service-card::after{content:"";position:absolute;inset:0;opacity:0;background:var(--grad-panel);transition:.35s var(--ease);}
.service-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.2);box-shadow:0 26px 50px -20px rgba(0,0,0,.55);}
.service-card:hover::after{opacity:1;}
.service-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;}
.service-card h3{font-size:19px;margin-bottom:10px;position:relative;z-index:1;}
.service-card p{color:var(--text-dim);font-size:14.5px;position:relative;z-index:1;}
.service-card .service-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1;}
.service-card .service-tags span{font-size:11.5px;font-family:var(--font-mono);color:var(--text-faint);border:1px solid var(--line);padding:4px 10px;border-radius:99px;}

/* ==========================================================================
   8. لماذا نحن
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.why-card{padding:26px 22px;border-radius:var(--radius-md);background:transparent;border:1px solid var(--line);}
.why-card .n{font-family:var(--font-mono);font-size:13px;color:var(--c-blue);margin-bottom:14px;display:block;}
.why-card h4{font-size:16.5px;margin-bottom:8px;}
.why-card p{font-size:14px;color:var(--text-dim);}

/* ==========================================================================
   9. خطوات العمل — شبكة بطاقات متصلة بخط تسلسلي واحد
   ========================================================================== */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;margin-top:10px;}
.process-grid::before{
  content:"";position:absolute;top:36px;right:10%;left:10%;height:2px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-teal),var(--c-amber));opacity:.4;z-index:0;
}
.process-card{
  position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:28px 20px 24px;text-align:center;transition:.35s var(--ease);
}
.process-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.22);box-shadow:0 20px 40px -18px rgba(0,0,0,.5);}
.process-icon{
  width:56px;height:56px;border-radius:50%;background:var(--ink);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:.3s var(--ease);
}
.process-card:hover .process-icon{border-color:var(--c-blue);}
.process-step-num{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--c-blue);margin-bottom:8px;}
.process-card h4{font-size:16px;margin-bottom:9px;}
.process-card p{color:var(--text-dim);font-size:13.5px;line-height:1.85;}

/* ==========================================================================
   10. أنواع الأجهزة — بطاقات احترافية
   ========================================================================== */
.material-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.material-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 22px 22px;background:var(--panel);transition:.3s var(--ease);overflow:hidden;
}
.material-card::after{content:"";position:absolute;inset:0;opacity:0;background:var(--grad-panel);transition:.3s var(--ease);z-index:0;}
.material-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 22px 44px -20px rgba(0,0,0,.55);}
.material-card:hover::after{opacity:1;}

.material-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.material-warranty-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;color:var(--text-dim);white-space:nowrap;
}
.material-warranty-badge b{color:var(--c-teal);font-weight:700;}
.material-warranty-badge .live-dot{width:6px;height:6px;border-radius:50%;background:var(--c-teal);box-shadow:0 0 8px var(--c-teal);flex:none;}

.material-identity{position:relative;z-index:1;display:flex;align-items:center;gap:12px;}
.material-logo{width:48px;height:48px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.material-logo img{width:100%;height:100%;object-fit:cover;}
.material-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--text);}

/* ==========================================================================
   11. الأرقام
   ========================================================================== */
.stats-band{
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--grad-panel), var(--panel);padding:52px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.stats-band .stat b{display:block;font-family:var(--font-mono);font-size:38px;}
.stats-band .stat span{color:var(--text-dim);font-size:14px;}

/* ==========================================================================
   12. أعمال مختارة
   ========================================================================== */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.portfolio-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:.3s var(--ease);}
.portfolio-card:hover{transform:translateY(-6px);}
.portfolio-thumb{height:190px;position:relative;overflow:hidden;}
.portfolio-thumb img{width:100%;height:100%;object-fit:cover;}
.portfolio-body{padding:20px 22px;}
.portfolio-body .p-cat{font-family:var(--font-mono);font-size:11.5px;color:var(--c-blue);margin-bottom:6px;display:block;}
.portfolio-body h4{font-size:17px;margin-bottom:6px;}
.portfolio-body p{font-size:13.5px;color:var(--text-dim);}

/* ==========================================================================
   12-ب. خريطة الموقع (قبل الفوتر مباشرة)
   ========================================================================== */
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);height:560px;}
.map-frame iframe{width:100%;height:100%;border:0;display:block;}

/* ==========================================================================
   12-ج. آراء العملاء في السعودية — شريط متحرك تلقائي + تحريك يدوي بالأسهم
   ========================================================================== */
.reviews-carousel-wrap{position:relative;}
.reviews-viewport{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.reviews-track{display:flex;gap:20px;width:max-content;will-change:transform;}
.review-card{
  flex:0 0 300px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
}
.review-card::after{content:"";position:absolute;inset:0;opacity:0;background:var(--grad-panel);transition:.3s var(--ease);z-index:0;}
.review-card:hover::after{opacity:1;}
.review-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.review-avatar{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-signature);color:#04211d;font-family:var(--font-display);font-weight:800;font-size:15px;
}
.review-name{font-family:var(--font-display);font-weight:800;font-size:14.5px;color:var(--text);}
.review-city{font-size:12px;color:var(--text-faint);font-family:var(--font-mono);}
.review-stars{display:flex;gap:2px;position:relative;z-index:1;}
.review-stars svg{width:15px;height:15px;}
.review-text{font-size:13.5px;color:var(--text-dim);line-height:1.85;position:relative;z-index:1;}
.review-service{font-size:11px;font-family:var(--font-mono);color:var(--c-blue);position:relative;z-index:1;}

.reviews-carousel-wrap:hover .reviews-track,
.reviews-carousel-wrap.is-paused .reviews-track{animation-play-state:paused;}

.reviews-arrows{display:flex;gap:10px;justify-content:flex-end;margin-bottom:22px;}

/* ==========================================================================
   13. خدمات شركتنا (المقالات) — صف أفقي واحد قابل للتحريك بالأسهم
   ========================================================================== */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.articles-carousel-wrap{position:relative;}
.articles-carousel{
  display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.articles-carousel::-webkit-scrollbar{display:none;}
.article-card{
  scroll-snap-align:start;flex:0 0 320px;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--panel);
  transition:.3s var(--ease);display:block;
}
.article-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);}
.article-thumb{height:170px;overflow:hidden;}
.article-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease);}
.article-card:hover .article-thumb img{transform:scale(1.06);}
.article-body{padding:22px;}
.article-date{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);margin-bottom:10px;display:block;}
.article-body h4{font-size:17px;margin-bottom:10px;}
.article-body p{font-size:14px;color:var(--text-dim);margin-bottom:14px;}

/* بطاقات معلومات الخدمة — بنفس أسلوب عرض الوسوم (service-tags) */
.article-info-tags{display:flex;gap:8px;flex-wrap:wrap;}
.article-info-tags span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-family:var(--font-mono);color:var(--text-faint);
  border:1px solid var(--line);padding:4px 10px;border-radius:99px;white-space:nowrap;
}
.article-info-tags .tag-quality{color:var(--c-teal);border-color:rgba(52,211,153,.3);}
.article-info-tags .tag-rating{color:#facc15;border-color:rgba(250,204,21,.3);}
.article-info-tags .tag-rating svg{flex:none;}

/* أسهم التحريك اليدوي لصف المقالات */
.carousel-arrows{display:flex;gap:10px;justify-content:flex-end;margin-bottom:22px;}
.carousel-arrow{
  width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  display:flex;align-items:center;justify-content:center;transition:.25s var(--ease);
}
.carousel-arrow:hover{border-color:var(--c-blue);color:var(--c-blue);transform:translateY(-2px);}
.carousel-arrow:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line);color:var(--text);}
.carousel-arrow svg{width:19px;height:19px;}

/* ==========================================================================
   14. الفوتر — بدون أي أزرار اتصال/واتساب أو فورم تواصل
   ========================================================================== */
.site-footer{border-top:1px solid var(--line);padding:46px 0 30px;position:relative;z-index:2;background:var(--ink-2);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.footer-brand{display:flex;justify-content:center;max-width:220px;}
.footer-brand .site-logo img,.footer-brand .site-logo .custom-logo{max-height:38px;width:auto;object-fit:contain;}
.footer-brand .brand-name-text{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;}
.footer-line{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  color:var(--text-faint);font-size:13px;font-family:var(--font-body);line-height:1.9;
}
.footer-line .footer-sep{opacity:.5;}
.footer-line .footer-credit-accent{color:var(--c-blue);font-weight:600;font-family:var(--font-mono);font-size:12.5px;}

/* ==========================================================================
   15. صفحة المقالة (خدمة الشركة) — تُعرض بالهيدر والفوتر الموحّدين، بدون تعليقات
   ========================================================================== */
.article-page{padding:70px 0 100px;}
.article-page .container{max-width:760px;}
.article-hero-tag{margin-bottom:22px;}
.article-page h1{font-size:clamp(28px,4.6vw,44px);margin-bottom:18px;word-break:break-word;}
.article-meta{display:flex;gap:10px 18px;flex-wrap:wrap;color:var(--text-faint);font-family:var(--font-mono);font-size:12.5px;margin-bottom:36px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.article-cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px;border:1px solid var(--line);max-height:420px;}
.article-cover img{width:100%;height:100%;object-fit:cover;}
.article-content{font-size:17.5px;color:#dbe6f0;line-height:2;max-width:100%;}
.article-content p{margin-bottom:22px;}
.article-content h2{font-size:26px;margin:40px 0 16px;}
.article-content h3{font-size:21px;margin:32px 0 14px;}
.article-content ul,.article-content ol{margin:0 0 22px 0;padding-right:22px;color:var(--text-dim);}
.article-content li{margin-bottom:8px;}
.article-content blockquote{border-right:3px solid var(--c-teal);padding:6px 22px;margin:26px 0;color:var(--text-dim);font-style:normal;background:var(--panel);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.article-content img{border-radius:var(--radius-md);margin:24px 0;height:auto;width:100%;object-fit:cover;}
.article-content iframe,.article-content video,.article-content embed{max-width:100%;border-radius:var(--radius-md);}
.article-content a{color:var(--c-blue);border-bottom:1px dashed rgba(56,214,248,.4);word-break:break-word;}
.article-content table{width:100%;display:block;overflow-x:auto;border-radius:var(--radius-sm);}

/* ==========================================================================
   16. حركات الظهور عند التمرير
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ==========================================================================
   17. الاستجابة — القائمة والقالب متوافقان بالكامل مع الهواتف
   ========================================================================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:380px;margin-top:20px;}
  .about-grid{grid-template-columns:1fr;}
  .about-visual{height:300px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(3,1fr);}
  .process-grid::before{display:none;}
  .material-strip{grid-template-columns:repeat(2,1fr);}
  .stats-band{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid,.articles-grid{grid-template-columns:repeat(2,1fr);}
  .article-card{flex-basis:280px;}
  .review-card{flex-basis:260px;}
}
@media(max-width:820px){
  html.nav-open{overflow:hidden;height:100%;}
  .main-nav{
    position:fixed;top:76px;right:0;left:0;bottom:0;z-index:150;
    background:linear-gradient(180deg,var(--panel-2) 0%,var(--ink-2) 65%);
    border-top:1px solid rgba(56,214,248,.28);
    border-radius:26px 26px 0 0;
    box-shadow:0 -10px 40px -10px rgba(0,0,0,.5), 0 30px 60px -20px rgba(0,0,0,.6);
    display:flex;align-items:flex-start;justify-content:center;
    padding:40px 24px 40px;
    overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:.3s var(--ease);
  }
  .main-nav::before{
    content:"";position:absolute;top:14px;right:50%;transform:translateX(50%);
    width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);
  }
  .main-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .main-nav ul{display:flex;flex-direction:column;gap:9px;width:100%;max-width:420px;}
  .main-nav a{
    display:flex;align-items:center;justify-content:center;
    padding:17px 20px;font-size:16.5px;font-weight:700;font-family:var(--font-display);
    border-radius:16px;background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    transition:.25s var(--ease);
  }
  .main-nav a:hover,.main-nav a:active{
    background:rgba(56,214,248,.14);border-color:rgba(56,214,248,.4);color:var(--c-blue);
    transform:translateY(-2px);
  }
  .nav-toggle{display:flex;position:relative;z-index:210;}
}
@media(max-width:640px){
  section{padding:64px 0;}
  .container{width:90%;}
  .services-grid,.why-grid,.portfolio-grid,.articles-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  .material-strip{grid-template-columns:1fr;}
  .article-card{flex-basis:250px;}
  .review-card{flex-basis:230px;padding:20px;}
  .carousel-arrows,.reviews-arrows{justify-content:center;}
  .stats-band{grid-template-columns:1fr 1fr;padding:32px 18px;gap:26px 16px;}
  .hero-stats{gap:18px 26px;}
  .hero{padding:56px 0 40px;}
  .hero-visual{height:300px;}
  .hero-desc{max-width:100%;}
  .badge-float{font-size:11.5px;padding:7px 12px;gap:7px;}
  .badge-1{top:5%;left:3%;}
  .badge-2{bottom:6%;right:3%;}
  .badge-3{display:none;}
  .hero-blob{filter:blur(44px);}
  .blob-a{width:200px;height:200px;top:-40px;left:-20px;}
  .blob-b{width:170px;height:170px;bottom:-30px;right:-10px;}
  .article-page{padding:50px 0 60px;}
  .article-page .container{width:90%;}
  .article-cover{max-height:230px;border-radius:var(--radius-md);}
  .article-content{font-size:16px;line-height:1.9;}
  .article-content h2{font-size:22px;margin:30px 0 14px;}
  .article-content h3{font-size:18.5px;margin:26px 0 12px;}
  .article-meta{font-size:11.5px;margin-bottom:26px;padding-bottom:20px;}
  .map-frame{height:380px;}
}
@media(max-width:480px){
  .container{width:91%;}
  section{padding:52px 0;}
  .hero{padding:44px 0 32px;}
  .hero-copy h1{font-size:32px;}
  .hero-visual{height:250px;}
  .material-card,.process-card{padding:22px 18px;}
  .stats-band{grid-template-columns:1fr;padding:28px 18px;}
  .why-grid{grid-template-columns:1fr;}
  .ticker-item{padding:0 20px;font-size:12.5px;}
  .footer-credit{font-size:11.5px;}
  .section-head{margin-bottom:36px;}
  .article-cover{max-height:190px;}
  .article-page h1{font-size:26px;}
  .brand-name-text{font-size:14.5px;}
  .site-logo img,.site-logo .custom-logo{max-height:36px;}
  .map-frame{height:300px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:6px;}