/*
Theme Name: قالب أسامة للتسويق الإلكتروني
Theme URI: https://example.com
Author: السيد أسامة
Author URI: https://example.com
Description: قالب ووردبريس احترافي بالعربية (RTL) لخبير تسويق إلكتروني، متخصص في تصميم المواقع، الأرشفة SEO، وإدارة حملات إعلانية على جوجل وتيك توك وميتا (فيسبوك وإنستجرام). الصفحة الرئيسية متكاملة بجميع الأقسام، والمقالات تُعرض كصفحات مستقلة بالكامل بدون قوائم أو تنقل أو تعليقات.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: osama-marketing
*/

/* ==========================================================================
   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:#0c0a1e;
  --ink-2:#141230;
  --panel:#18153a;
  --panel-2:#1f1c47;
  --line:rgba(255,255,255,.09);
  --text:#f3f1ff;
  --text-dim:#a9a3c9;
  --text-faint:#726d97;

  --c-cyan:#25e0e0;
  --c-violet:#a45bff;
  --c-coral:#ff6f91;
  --c-blue:#4f7cff;
  --c-amber:#ffc85c;

  --grad-signature:linear-gradient(95deg,var(--c-cyan) 0%,var(--c-violet) 48%,var(--c-coral) 100%);
  --grad-panel:linear-gradient(160deg,rgba(164,91,255,.14),rgba(37,224,224,.06) 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;overflow-x:hidden;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;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  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-violet);color:#fff;}

/* خلفية طبقات — سديم كوني ثابت خلف كل الأقسام */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(60vw 60vw at 12% -10%, rgba(164,91,255,.18), transparent 60%),
    radial-gradient(50vw 50vw at 110% 15%, rgba(37,224,224,.14), transparent 60%),
    radial-gradient(45vw 45vw at 80% 100%, rgba(255,111,145,.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-cyan);
  background:rgba(37,224,224,.08);
  border:1px solid rgba(37,224,224,.25);
  padding:6px 16px;
  border-radius:99px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-cyan);box-shadow:0 0 10px var(--c-cyan);}

.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;}

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);}

/* أزرار — للاستخدام العام داخل النصوص فقط، لا توجد أزرار تواصل/اتصال في القالب */
.tag-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:99px;
  background:var(--panel);border:1px solid var(--line);
  font-size:14px;color:var(--text-dim);
}

/* ==========================================================================
   3. الهيدر (الصفحة الرئيسية فقط — روابط داخلية للتمرير بنفس الصفحة)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  padding:18px 0;
  backdrop-filter:blur(16px);
  background:rgba(12,10,30,.72);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);}
.brand-mark{
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#0c0a1e;font-size:16px;
  flex:none;overflow:hidden;
  box-shadow:0 8px 20px -8px rgba(164,91,255,.55);
}
.brand-mark-svg{display:block;width:100%;height:100%;}
.brand-mark.brand-mark-custom{background:transparent;box-shadow:none;}
.brand-mark-custom img{width:100%;height:100%;object-fit:contain;border-radius:12px;}
.brand-name{font-weight:800;font-size:17px;}
.brand-name span{display:block;font-family:var(--font-body);font-weight:400;font-size:11.5px;color:var(--text-faint);}
.site-header nav ul{display:flex;gap:6px;}
.site-header nav a{
  font-size:14.5px;color:var(--text-dim);
  padding:9px 15px;border-radius:99px;
  transition:.25s var(--ease);
}
.site-header nav a:hover{color:var(--text);background:var(--panel);}
.header-toggle{display:none;}

/* ==========================================================================
   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 .eyebrow{}
.hero-copy h1{
  font-size:clamp(38px,5.4vw,64px);
  margin-bottom:20px;
}
.hero-copy h1 em{
  font-style:normal;
  background:var(--grad-signature);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.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-cyan);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;background:var(--grad-signature);-webkit-background-clip:text;background-clip:text;color:transparent;}
.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:#0c0a1e;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(24,21,58,.85);
  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:.35;z-index:1;
}
.blob-a{width:340px;height:340px;background:var(--c-violet);top:-80px;left:-60px;animation:drift 14s ease-in-out infinite;}
.blob-b{width:260px;height:260px;background:var(--c-cyan);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;gap:0;width:max-content;
  animation:marquee 32s linear infinite;
}
.ticker-track:hover{animation-play-state:paused;}
.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-cyan);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-list{position:relative;margin-top:20px;display:flex;flex-direction:column;gap:6px;}
.process-list::before{
  content:"";position:absolute;top:32px;bottom:32px;right:33px;width:2px;
  background:linear-gradient(180deg,var(--c-cyan),var(--c-violet),var(--c-coral));
  opacity:.55;border-radius:2px;
}
.process-step{display:grid;grid-template-columns:66px 1fr;gap:22px;padding:14px 0;position:relative;align-items:start;}
.process-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.process-icon{
  width:66px;height:66px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-cyan);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.6);
  transition:.3s var(--ease);
}
.process-num{
  margin-top:-14px;
  width:28px;height:28px;border-radius:50%;
  background:var(--grad-signature);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:11px;
  color:#0c0a1e;border:3px solid var(--ink);position:relative;z-index:2;
}
.process-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 26px;margin-bottom:18px;transition:.3s var(--ease);position:relative;
}
.process-card::before{
  content:"";position:absolute;top:26px;right:100%;width:22px;height:2px;
  background:linear-gradient(90deg,transparent,var(--line));
}
.process-step-tag{
  display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--c-cyan);margin-bottom:8px;
}
.process-card h4{font-size:18px;margin-bottom:8px;}
.process-card p{color:var(--text-dim);font-size:15px;max-width:560px;}
.process-step:hover .process-icon{
  color:#0c0a1e;background:var(--grad-signature);border-color:transparent;transform:translateY(-3px);
}
.process-step:hover .process-card{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:0 22px 44px -24px rgba(0,0,0,.6);}
.process-step:last-child .process-card{margin-bottom:0;}

/* ==========================================================================
   10. القنوات الإعلانية
   ========================================================================== */
.platforms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.platform-card{
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px;background:var(--panel);position:relative;overflow:hidden;
  transition:.3s var(--ease);display:flex;flex-direction:column;
}
.platform-card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:.3s var(--ease);
  background:radial-gradient(120% 100% at 100% 0%, var(--p-bg), transparent 60%);
  pointer-events:none;
}
.platform-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb, var(--p-color) 45%, var(--line));box-shadow:0 26px 50px -24px rgba(0,0,0,.6);}
.platform-card:hover::after{opacity:1;}
.platform-card-top{margin-bottom:18px;}
.platform-badge{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);
  background:var(--p-bg);border:1px solid color-mix(in srgb, var(--p-color) 35%, transparent);
  padding:6px 14px;border-radius:99px;
}
.platform-badge b{color:var(--text);font-size:13px;font-weight:700;}
.badge-live-dot{width:7px;height:7px;border-radius:50%;background:var(--p-color);box-shadow:0 0 0 3px color-mix(in srgb, var(--p-color) 25%, transparent);animation:pulseDot 2s ease-in-out infinite;flex:none;}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.8);}}
.platform-card-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.platform-card .p-icon{
  width:46px;height:46px;border-radius:13px;flex:none;
  background:var(--p-bg);color:var(--p-color);
  display:flex;align-items:center;justify-content:center;
}
.platform-card .p-name{display:block;font-size:16px;font-weight:700;font-family:var(--font-display);color:var(--text);}
.platform-card .p-desc{position:relative;z-index:1;color:var(--text-dim);font-size:14px;line-height:1.85;flex:1;}
.platform-stats{
  position:relative;z-index:1;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.platform-stats .p-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.platform-stats .p-label{font-size:12px;color:var(--text-faint);white-space:nowrap;}
.platform-stats .p-value{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text-dim);white-space:nowrap;}

/* ==========================================================================
   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;
  background:var(--grad-signature);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.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{aspect-ratio:16/10;width:100%;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-cyan);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);}

/* ==========================================================================
   13. أحدث المقالات (كل مقالة تُفتح كصفحة مستقلة تمامًا)
   ========================================================================== */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.article-card{
  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{aspect-ratio:16/10;width:100%;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);}

/* ==========================================================================
   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-mark{
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;color:#0c0a1e;
  flex:none;overflow:hidden;
  box-shadow:0 8px 20px -8px rgba(164,91,255,.55);
}
.footer-mark.brand-mark-custom{background:transparent;box-shadow:none;}
.footer-mark.brand-mark-custom img{width:100%;height:100%;object-fit:contain;border-radius:12px;}
.footer-copy{color:var(--text-faint);font-size:13.5px;line-height:2;}
.footer-credit{
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);
  padding-top:14px;margin-top:8px;border-top:1px solid var(--line);width:100%;max-width:420px;
}
.footer-credit b{color:var(--c-cyan);font-weight:600;}

/* ==========================================================================
   15. قالب المقالة المستقلة (single.php) — بدون هيدر / بدون تنقل / بدون تعليقات
   ========================================================================== */
.standalone-article{padding:70px 0 40px;}
.standalone-article .container{max-width:760px;}
.article-hero-tag{margin-bottom:22px;}
.standalone-article h1{font-size:clamp(28px,4.6vw,44px);margin-bottom:18px;}
.article-meta{
  display:flex;gap: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);aspect-ratio:16/9;width:100%;}
.article-cover img{width:100%;height:100%;object-fit:cover;}
.article-content{font-size:17.5px;color:#dcd8f5;line-height:2;}
.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-violet);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;}
.article-content a{color:var(--c-cyan);border-bottom:1px dashed rgba(37,224,224,.4);}

/* ==========================================================================
   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);}
  .platforms-grid{grid-template-columns:repeat(2,1fr);}
  .stats-band{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid,.articles-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .site-header nav{display:none;}
  .site-header .container{justify-content:center;}
  section{padding:64px 0;}
  .container{width:90%;}
  .services-grid,.why-grid,.portfolio-grid,.articles-grid{grid-template-columns:1fr;}
  .platforms-grid{grid-template-columns:1fr;}
  .platform-card{padding:20px;}
  .stats-band{grid-template-columns:1fr 1fr;padding:32px 18px;gap:26px 16px;}
  .process-list::before{right:26px;}
  .process-step{grid-template-columns:52px 1fr;gap:16px;}
  .process-icon{width:52px;height:52px;border-radius:16px;}
  .process-icon svg{width:18px;height:18px;}
  .process-num{width:24px;height:24px;font-size:10px;margin-top:-12px;}
  .process-card{padding:18px 20px;}
  .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-thumb,.portfolio-thumb{aspect-ratio:16/11;}
}
@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;}
  .platform-card{padding:18px;}
  .platform-card-head{gap:10px;}
  .platform-card .p-icon{width:40px;height:40px;}
  .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-thumb,.portfolio-thumb{aspect-ratio:4/3;}
  .article-body,.portfolio-body{padding:18px;}
}
@media(max-width:380px){
  .hero-copy h1{font-size:27px;}
  .hero-stats{gap:14px 20px;}
  .hero-stats .stat b{font-size:22px;}
  .stats-band .stat b{font-size:30px;}
  .brand-name{font-size:15px;}
  .brand-name span{font-size:10.5px;}
  .services-grid,.why-grid{gap:16px;}
  .service-card{padding:26px 22px;}
}

/* احترام تفضيل تقليل الحركة */
@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-cyan);outline-offset:3px;border-radius:6px;}