/* ================================================================
   AICore Portfolio — style.css
   Designer : Shehab Essam
   Version  : 2.0
   Updated  : 2026

   TABLE OF CONTENTS
   -----------------
   01. CSS Variables & Reset
   02. Scrollbar
   03. Canvas Stars
   04. Layout & Container
   05. Navigation — Desktop
   06. Navigation — Hamburger & Mobile Drawer
   07. Hero Section
   08. Hero Orb Visual
   09. Hero Stats Row
   10. Shared Section Styles
   11. Services Section
   12. Projects Section
   13. About Section
   14. Contact Section
   15. Footer
   16. Scroll Reveal Animations
   17. Responsive — Tablet (max 900px)
   18. Responsive — Mobile (max 600px)
================================================================ */


/* ================================================================
   01. CSS VARIABLES & RESET
   - تعديل الألوان هنا بيغيرها في كل الموقع تلقائياً
================================================================ */
:root {
  /* ── Brand Colors ── */
  --accent:       #00e5c0;          /* اللون الرئيسي (teal) */
  --accent-2:     #0099ff;          /* اللون الثانوي (blue) */
  --accent-dim:   rgba(0,229,192,.12); /* خلفية شفافة للأيقونات والبادجز */

  /* ── Background Layers ── */
  --bg-deep:      #030a14;          /* خلفية الصفحة الأساسية */
  --bg-mid:       #071526;          /* طبقة ثانية أفتح قليلاً */

  /* ── Text ── */
  --text-hi:      #eef6ff;          /* نص أبيض للعناوين */
  --text-lo:      #7a9ab8;          /* نص رمادي للفقرات */

  /* ── Cards ── */
  --card-bg:      rgba(7,21,38,.72);       /* خلفية الكروت */
  --card-border:  rgba(0,229,192,.18);     /* حدود الكروت */

  /* ── Layout ── */
  --radius:       16px;             /* زوايا الكروت */
  --nav-h:        70px;             /* ارتفاع الناف بار */

  /* ── Fonts ── */
  --font-head:    'Syne', sans-serif;      /* خط العناوين */
  --font-body:    'DM Sans', sans-serif;   /* خط النصوص */
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background:   var(--bg-deep);
  color:        var(--text-hi);
  font-family:  var(--font-body);
  overflow-x:   hidden;
  line-height:  1.6;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }


/* ================================================================
   02. SCROLLBAR
================================================================ */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }


/* ================================================================
   03. CANVAS STARS
   - الـ canvas ثابت خلف كل الصفحة
   - pointer-events: none علشان ما يأثرش على الكليكات
================================================================ */
#stars-canvas {
  position:       fixed;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}


/* ================================================================
   04. LAYOUT & CONTAINER
================================================================ */
.wrapper {
  position: relative;
  z-index:  1;           /* فوق الـ canvas */
}

.container {
  max-width: 1180px;
  margin:    0 auto;
  padding:   0 28px;
}


/* ================================================================
   05. NAVIGATION — DESKTOP
================================================================ */
#navbar {
  position:   fixed;
  top: 0; left: 0; right: 0;
  height:     var(--nav-h);
  z-index:    100;
  transition: background .3s, backdrop-filter .3s, border-color .3s;
}

/* يتلون لما المستخدم يسكرول */
#navbar.scrolled {
  background:     rgba(3,10,20,.85);
  backdrop-filter: blur(18px);
  border-bottom:  1px solid var(--card-border);
}

.nav-inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* الشعار */
.nav-logo {
  font-family:    var(--font-head);
  font-size:      1.4rem;
  font-weight:    800;
  color:          var(--accent);
  letter-spacing: -0.5px;
}

/* اللينكات — ديسكتوب */
.nav-links {
  display: flex;
  gap:     36px;
}

.nav-links a {
  font-size:      .9rem;
  font-weight:    500;
  color:          var(--text-lo);
  letter-spacing: .4px;
  transition:     color .25s;
  position:       relative;
}

/* خط تحت اللينك عند الهوفر */
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom: -3px; left: 0;
  width:      0;
  height:     1.5px;
  background: var(--accent);
  transition: width .3s;
}

.nav-links a:hover             { color: var(--text-hi); }
.nav-links a:hover::after      { width: 100%; }

/* زرار Contact في الناف بار */
.nav-cta {
  padding:    9px 22px;
  border:     1.5px solid var(--accent);
  border-radius: 8px;
  font-size:  .85rem;
  font-weight: 600;
  color:      var(--accent) !important;
  transition: background .25s, color .25s !important;
}

.nav-cta:hover {
  background: var(--accent);
  color:      var(--bg-deep) !important;
}

.nav-cta::after { display: none !important; }


/* ================================================================
   06. NAVIGATION — HAMBURGER & MOBILE DRAWER
   - الهامبرجر بيظهر بس في الموبايل (max-width: 600px)
   - الـ drawer بينزل من تحت الناف بار
================================================================ */
.nav-hamburger {
  display:         none;       /* مخفي على الديسكتوب */
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           42px;
  height:          42px;
  background:      var(--accent-dim);
  border:          1px solid var(--card-border);
  border-radius:   10px;
  cursor:          pointer;
  z-index:         200;
  flex-shrink:     0;
}

/* الخطوط الـ 3 داخل الهامبرجر */
.nav-hamburger span {
  display:          block;
  width:            20px;
  height:           2px;
  background:       var(--accent);
  border-radius:    2px;
  transition:       transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin: center;
}

/* تحويل الـ 3 خطوط لـ X عند الفتح */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* الـ Drawer — القائمة المنسدلة في الموبايل */
.nav-drawer {
  display:         none;        /* مخفي على الديسكتوب */
  position:        fixed;
  top:             var(--nav-h);
  left: 0; right: 0;
  background:      rgba(3,10,20,.97);
  backdrop-filter: blur(20px);
  border-bottom:   1px solid var(--card-border);
  z-index:         99;
  padding:         24px 28px 32px;
  flex-direction:  column;
  gap:             4px;
  transform:       translateY(-10px);
  opacity:         0;
  pointer-events:  none;
  transition:      transform .3s ease, opacity .3s ease;
}

/* حالة الفتح */
.nav-drawer.open {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: all;
}

.nav-drawer a {
  display:        block;
  padding:        14px 16px;
  font-size:      1.05rem;
  font-weight:    500;
  color:          var(--text-lo);
  border-radius:  10px;
  transition:     background .2s, color .2s;
  border-bottom:  1px solid rgba(255,255,255,.04);
}

.nav-drawer a:last-child      { border-bottom: none; }
.nav-drawer a:hover,
.nav-drawer a:active {
  background: var(--accent-dim);
  color:      var(--accent);
}

/* زرار Contact داخل الـ Drawer */
.nav-drawer .drawer-cta {
  margin-top:    12px;
  display:       block;
  text-align:    center;
  padding:       14px;
  background:    var(--accent);
  color:         var(--bg-deep) !important;
  font-family:   var(--font-head);
  font-weight:   700;
  border-radius: 10px;
  font-size:     1rem;
  border-bottom: none !important;
}


/* ================================================================
   07. HERO SECTION
================================================================ */
#hero {
  min-height:  100vh;
  display:     flex;
  align-items: center;
  padding-top: var(--nav-h);
}

/* جريد الهيرو: نص على الشمال + أورب على اليمين */
.hero-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   60px;
  align-items:           center;
}

/* البادج الأخضر "Available for Work" */
.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        6px 16px;
  background:     var(--accent-dim);
  border:         1px solid var(--card-border);
  border-radius:  100px;
  font-size:      .78rem;
  font-weight:    500;
  color:          var(--accent);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom:  24px;
}

/* النقطة النابضة في البادج */
.hero-badge span.dot {
  width:         7px;
  height:        7px;
  background:    var(--accent);
  border-radius: 50%;
  animation:     pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .4; transform: scale(1.4); }
}

/* العنوان الرئيسي */
.hero-title {
  font-family:    var(--font-head);
  font-size:      clamp(2.6rem, 5vw, 4.2rem);
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -1.5px;
  margin-bottom:  22px;
}

.hero-title .line-accent { color: var(--accent); }

/* الفقرة */
.hero-sub {
  font-size:     1.05rem;
  color:         var(--text-lo);
  max-width:     440px;
  margin-bottom: 40px;
  line-height:   1.75;
}

/* الأزرار */
.hero-actions {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

/* زرار أساسي مملوء */
.btn-primary {
  padding:        14px 32px;
  background:     var(--accent);
  color:          var(--bg-deep);
  border-radius:  10px;
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      .95rem;
  letter-spacing: .3px;
  border:         none;
  cursor:         pointer;
  transition:     transform .25s, box-shadow .25s;
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 10px 40px rgba(0,229,192,.35);
}

/* زرار ثانوي بـ border فقط */
.btn-secondary {
  padding:       14px 32px;
  background:    transparent;
  color:         var(--text-hi);
  border-radius: 10px;
  font-family:   var(--font-head);
  font-weight:   600;
  font-size:     .95rem;
  border:        1.5px solid rgba(255,255,255,.18);
  cursor:        pointer;
  transition:    border-color .25s, color .25s;
}

.btn-secondary:hover {
  border-color: var(--accent);
  color:        var(--accent);
}


/* ================================================================
   08. HERO ORB VISUAL (الكرة الدوارة)
================================================================ */
.hero-visual {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* الكرة الرئيسية */
.hero-orb {
  width:         380px;
  height:        380px;
  border-radius: 50%;
  background:    radial-gradient(circle at 35% 35%, #0099ff44, transparent 60%),
                 radial-gradient(circle at 65% 65%, #00e5c033, transparent 60%);
  border:        1px solid rgba(0,229,192,.2);
  position:      relative;
  animation:     orb-float 6s ease-in-out infinite;
}

@keyframes orb-float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-18px); }
}

/* الحلقات الدوارة حول الكرة */
.orb-ring {
  position:      absolute;
  border-radius: 50%;
  border:        1px solid rgba(0,229,192,.15);
  animation:     ring-spin linear infinite;
}

.orb-ring:nth-child(1) { inset: -30px; animation-duration: 12s; }
.orb-ring:nth-child(2) { inset: -60px; animation-duration: 20s; animation-direction: reverse; border-color: rgba(0,153,255,.12); }
.orb-ring:nth-child(3) { inset: -95px; animation-duration: 30s; border-color: rgba(0,229,192,.07); }

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* الجزء الداخلي من الكرة */
.orb-inner {
  position:        absolute;
  inset:           30px;
  border-radius:   50%;
  background:      radial-gradient(circle at 40% 40%, rgba(0,229,192,.3), transparent 65%),
                   radial-gradient(circle at 60% 70%, rgba(0,153,255,.25), transparent 65%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.orb-icon {
  font-size: 4.5rem;
  filter:    drop-shadow(0 0 20px var(--accent));
}


/* ================================================================
   09. HERO STATS ROW (الأرقام تحت الهيرو)
================================================================ */
.hero-stats {
  display:      flex;
  gap:          40px;
  margin-top:   52px;
  padding-top:  36px;
  border-top:   1px solid rgba(255,255,255,.07);
}

.stat-num {
  font-family: var(--font-head);
  font-size:   2rem;
  font-weight: 800;
  color:       var(--accent);
  line-height: 1;
}

.stat-label {
  font-size:      .8rem;
  color:          var(--text-lo);
  margin-top:     4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}


/* ================================================================
   10. SHARED SECTION STYLES
   - كل سكشن بيستخدم نفس الكلاسات دي
================================================================ */
section { padding: 100px 0; }

/* التاج الصغير فوق العنوان (مثل "What We Do") */
.section-tag {
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom:  14px;
}

/* العنوان الكبير للسكشن */
.section-title {
  font-family:    var(--font-head);
  font-size:      clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight:    800;
  letter-spacing: -1px;
  line-height:    1.1;
  margin-bottom:  16px;
}

/* الوصف تحت العنوان */
.section-sub {
  color:       var(--text-lo);
  font-size:   1rem;
  max-width:   520px;
  line-height: 1.75;
}

.section-header { margin-bottom: 60px; }


/* ================================================================
   11. SERVICES SECTION
================================================================ */
#services { background: transparent; }

/* جريد الـ 3 كروت */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.service-card {
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   var(--radius);
  padding:         36px 30px;
  transition:      transform .3s, border-color .3s, box-shadow .3s;
  position:        relative;
  overflow:        hidden;
  backdrop-filter: blur(12px);
}

/* الخط العلوي الملون عند الهوفر */
.service-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:    0;
  transition: opacity .3s;
}

.service-card:hover {
  transform:    translateY(-6px);
  border-color: rgba(0,229,192,.35);
  box-shadow:   0 20px 50px rgba(0,229,192,.1);
}

.service-card:hover::before { opacity: 1; }

/* أيقونة الخدمة */
.service-icon {
  width:         52px;
  height:        52px;
  background:    var(--accent-dim);
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.6rem;
  margin-bottom: 22px;
  border:        1px solid var(--card-border);
}

.service-title {
  font-family:   var(--font-head);
  font-size:     1.15rem;
  font-weight:   700;
  margin-bottom: 12px;
}

.service-desc {
  font-size:   .9rem;
  color:       var(--text-lo);
  line-height: 1.7;
}


/* ================================================================
   12. PROJECTS SECTION
================================================================ */
#projects { background: rgba(0,229,192,.02); }

/* جريد مشاريع — عمودين */
.projects-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   28px;
}

.project-card {
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   var(--radius);
  overflow:        hidden;
  transition:      transform .3s, box-shadow .3s;
  backdrop-filter: blur(12px);
}

.project-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,229,192,.12);
}

/* صورة/مثمبنيل المشروع */
.project-thumb {
  height:          220px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3.5rem;
  position:        relative;
  overflow:        hidden;
}

/* بيانات المشروع */
.project-body { padding: 28px; }

/* تاجس المشروع */
.project-tags {
  display:       flex;
  gap:           8px;
  flex-wrap:     wrap;
  margin-bottom: 14px;
}

.tag {
  padding:        4px 12px;
  background:     var(--accent-dim);
  border:         1px solid var(--card-border);
  border-radius:  100px;
  font-size:      .72rem;
  font-weight:    600;
  color:          var(--accent);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.project-name {
  font-family:   var(--font-head);
  font-size:     1.25rem;
  font-weight:   700;
  margin-bottom: 10px;
}

.project-desc {
  font-size:     .88rem;
  color:         var(--text-lo);
  line-height:   1.7;
  margin-bottom: 22px;
}

/* لينك "View Case Study →" */
.project-link {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--accent);
  transition:  gap .25s;
}

.project-link:hover    { gap: 10px; }
.project-link .arrow   { font-size: 1rem; }


/* ================================================================
   13. ABOUT SECTION
================================================================ */
#about { background: transparent; }

/* جريد: كارد على الشمال + نص على اليمين */
.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.about-visual { position: relative; }

/* الكارد الرئيسي للـ About */
.about-card-main {
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   var(--radius);
  padding:         40px;
  backdrop-filter: blur(12px);
  text-align:      center;
}

/* صورة بروفايل (أيقونة حالياً) */
.about-avatar {
  width:         100px;
  height:        100px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--accent), var(--accent-2));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     2.5rem;
  margin:        0 auto 20px;
  border:        3px solid rgba(0,229,192,.3);
}

.about-name {
  font-family:   var(--font-head);
  font-size:     1.4rem;
  font-weight:   800;
  margin-bottom: 6px;
}

.about-role {
  font-size:      .85rem;
  color:          var(--accent);
  font-weight:    600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom:  20px;
}

.about-bio-card {
  font-size:   .88rem;
  color:       var(--text-lo);
  line-height: 1.7;
}

/* Skills chips */
.skills-row {
  display:         flex;
  gap:             10px;
  flex-wrap:       wrap;
  margin-top:      24px;
  justify-content: center;
}

.skill-chip {
  padding:        5px 14px;
  background:     rgba(0,229,192,.08);
  border:         1px solid var(--card-border);
  border-radius:  100px;
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--text-hi);
  letter-spacing: .3px;
}

/* البادج الطافي فوق الكارد */
.about-floating {
  position:        absolute;
  top: -20px; right: -20px;
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   12px;
  padding:         14px 18px;
  backdrop-filter: blur(12px);
  display:         flex;
  align-items:     center;
  gap:             10px;
  font-size:       .82rem;
  font-weight:     600;
  animation:       float-badge 4s ease-in-out infinite;
}

@keyframes float-badge {
  0%,100% { transform: translateY(0px) rotate(-2deg); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}

.about-text .section-sub { max-width: 100%; }

/* التايم لاين */
.timeline {
  margin-top:     36px;
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

.timeline-item {
  display:     flex;
  gap:         18px;
  align-items: flex-start;
}

/* النقطة الخضراء في التايم لاين */
.tl-dot {
  width:         10px;
  height:        10px;
  background:    var(--accent);
  border-radius: 50%;
  margin-top:    6px;
  flex-shrink:   0;
  box-shadow:    0 0 12px var(--accent);
}

.tl-year {
  font-size:      .75rem;
  color:          var(--accent);
  font-weight:    700;
  letter-spacing: .5px;
  margin-bottom:  3px;
}

.tl-title {
  font-family: var(--font-head);
  font-size:   .95rem;
  font-weight: 700;
}

.tl-sub {
  font-size: .82rem;
  color:     var(--text-lo);
}


/* ================================================================
   14. CONTACT SECTION
================================================================ */
#contact {
  background:  rgba(0,229,192,.02);
  border-top:  1px solid var(--card-border);
}

.contact-box {
  max-width:  720px;
  margin:     0 auto;
  text-align: center;
}

.contact-box .section-sub {
  max-width:     100%;
  margin:        0 auto 42px;
}

/* صف اللينكات (Email, GitHub, LinkedIn...) */
.contact-links {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}

.contact-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 26px;
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   12px;
  font-size:       .9rem;
  font-weight:     600;
  color:           var(--text-hi);
  transition:      border-color .25s, color .25s, transform .25s;
  backdrop-filter: blur(12px);
}

.contact-link:hover {
  border-color: var(--accent);
  color:        var(--accent);
  transform:    translateY(-3px);
}


/* ================================================================
   15. FOOTER
================================================================ */
footer {
  padding:    28px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
  font-size:  .82rem;
  color:      var(--text-lo);
}

footer span { color: var(--accent); }


/* ================================================================
   16. SCROLL REVEAL ANIMATIONS
   - .reveal بتبدأ مخفية ثم بتظهر لما تدخل الـ viewport
   - reveal-delay-* بتضيف تأخير متدرج للكروت
================================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity:   1;
  transform: none;
}

.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }


/* ================================================================
   17. RESPONSIVE — TABLET (max-width: 900px)
================================================================ */
@media (max-width: 900px) {
  /* الهيرو والأباوت يتحولوا لعمود واحد */
  .hero-grid,
  .about-grid  { grid-template-columns: 1fr; gap: 50px; }

  /* Services يتحولوا لعمودين */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Projects يتحولوا لعمود واحد */
  .projects-grid { grid-template-columns: 1fr; }

  /* الأورب مخفي على التابلت */
  .hero-visual { display: none; }

  .hero-stats  { gap: 24px; }
}


/* ================================================================
   18. RESPONSIVE — MOBILE (max-width: 600px)
================================================================ */
@media (max-width: 700px) {
  /* Services يتحولوا لعمود واحد في الموبايل */
  .services-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* إخفاء لينكات الديسكتوب وإظهار الهامبرجر */
  .nav-links     { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-drawer    { display: flex; }

  /* تصغير العنوان على الموبايل */
  .hero-title { font-size: 2.2rem; }

  .hero-stats {
    gap:       20px;
    flex-wrap: wrap;
  }

  .stat-num { font-size: 1.6rem; }

  /* تقليل padding السكشنز */
  section { padding: 70px 0; }

  /* Contact links تتحول لـ column */
  .contact-links  { flex-direction: column; align-items: center; }
  .contact-link   { width: 100%; max-width: 300px; justify-content: center; }
}