/* ============================================================
   Byte Trade International — Stylesheet
   ملف التنسيقات (CSS) — تم فصله من ملف index.html الأصلي
   ============================================================ */    
   html { 
    scroll-behavior: smooth; 
    scroll-padding-top: 120px; 
}
        body {
            font-family: 'Cairo', 'Inter', sans-serif;
            background: linear-gradient(180deg, #f8fafc 0%, #eef3ff 100%);
            color: #0f172a;
        }
        .gradient-text {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #f59e0b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }
        .glass-card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 24px 60px rgba(37, 99, 235, 0.12);
            border-color: rgba(37, 99, 235, 0.18);
        }
        .product-card {
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }
        .product-card:hover {
            transform: translateY(-8px) rotateX(2deg);
            box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
        }
        .brand-card {
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }
        .brand-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 18px 36px rgba(37, 99, 235, 0.10);
        }
        .category-btn:hover {
            background: rgba(37,99,235,0.06);
        }
        .hero-bg {
            position: relative;
            isolation: isolate;
            background: linear-gradient(135deg, #f8fafc 0%, #edf4ff 35%, #f8fafc 100%);
        }
        .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; 
}

/* الطبقة الشفافة الغامقة اللي هتخلي الكلام الأبيض ينطق وتداري بكسلة الصورة */
.hero-media .dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.85) 100%);
    z-index: 1;
}

.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* إضافة بلور خفيف جداً للصورة (1 بكسل) بيخفي أي بكسلة ناتجة عن الزوم بتاع الشاشات العريضة */
    filter: blur(1px); 
    transform: scale(1.02); /* عشان الأطراف متظهرش بيضا بسبب البلور */
}

        .hero-glow {
            display: none;
        }
        .grid-pattern {
            background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.14) 1px, transparent 0);
            background-size: 40px 40px;
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .stat-counter {
            font-variant-numeric: tabular-nums;
        }
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(148,163,184,0.18);
        }
        .category-btn.active {
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: white;
            box-shadow: 0 12px 25px rgba(37, 99, 235, 0.18);
        }
        .brand-card.active {
            background: rgba(37,99,235,0.06);
            border-color: rgba(37,99,235,0.28);
        }
        .brand-card.active .text-gray-300 {
            color: #0f172a;
        }
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .mouse-lift {
            will-change: transform;
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out, box-shadow 0.3s ease;
        }
        .mouse-lift:hover {
            box-shadow: 0 18px 38px rgba(37,99,235,0.10);
        }
/* ============================================================
   تنسيق التباعد الاحترافي للطباعة العربية (Arabic Typography & Spacing)
   ============================================================ */

/* 1. زيادة التباعد الرأسي الشامل للجسم والفقرات وتحسين تباين اللون الأساسي */
body {
    line-height: 1.8;
    -webkit-font-smoothing: antialiasing;
    color: #0f172a;
}   

/* 2. تحسين تباعد سطور الفقرات وإعطائها لون يسهل قراءته (تحسين التباين) */
p, .text-lg, .text-xl, .text-base {
    line-height: 1.85;
    color: #334155; 
}

/* 3. فك ضغط العناوين الكبيرة */
h1, h2, h3, h4, h5, h6,
.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl {
    line-height: 1.4;
}

/* 4. إصلاح خطأ "تقطيع الكلمات العربية" */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] span {
    letter-spacing: 0px;
}

/* 5. ضبط التباعد الرأسي الفاصل بين كل عنوان والفقرة التابعة له */
h1 + p, h2 + p, h3 + p, h4 + p {
    margin-top: 0.85rem;
}

/* 6. تحسين قراءة النصوص داخل الكروت الصغيرة (Cards) */
.glass-card p, .service-card p {
    line-height: 1.65;
}
/* ============================================================
   Contact Us Form Custom Styles
   ============================================================ */
.contact-us {
  background: #fff;
  padding: 40px;
  border-radius: 30px;
  position: relative;
  margin-bottom: 40px;
}

.title h1 {
  color: #535274;
  letter-spacing: 2px;
  margin-bottom: 25px;
  font-size: 1.75rem;
  font-weight: bold;
}

.form,
.form-items {
  width: 100%;
}

.form-items {
  position: relative;
}

/* تعديل المسافات لتتناسب مع اللغة العربية (الأيقونة على اليمين) */
.form-items .input {
  width: 100%;
  margin-bottom: 15px;
  padding: 15px 45px 15px 15px; 
  box-sizing: border-box;
  background: #ebeef1;
  border: 1px solid transparent;
  outline: none;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.form-items .input:focus {
  border-color: #827ffe;
  background: #fff;
}

.form-items .input.message {
  height: 125px;
  border-radius: 15px;
  margin-bottom: 30px;
  padding: 15px;
  resize: none;
}

/* وضع الأيقونات على اليمين لتناسب (RTL) */
.form-items .fas {
  position: absolute;
  top: 17px;
  right: 18px; 
  color: #9a99aa;
}

.btn {
  background: #2563eb; /* تم تغييره للأزرق ليتماشى مع لون موقعك */
  text-align: center;
  color: #fff;
  padding: 12px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.btn .fas {
  margin-right: 10px; /* المسافة للسهم المتجه يساراً */
  font-size: 14px;
}

/* =========================================
   تنسيق أيقونات التواصل (دائرية وملونة)
   ========================================= */
.social-icons {
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
}

/* تنسيق الدائرة المحيطة بالأيقونة */
.social-icons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  text-decoration: none; /* لمنع ظهور أي خطوط تحت الروابط */
}

.social-icons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* ضبط حجم ومكان الأيقونة داخل الدائرة */
.social-icons a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #ffffff; /* لون الأيقونة أبيض */
  font-size: 20px;
}

/* ألوان الخلفيات المخصصة لكل زر */
.social-icons a.facebook {
  background-color: #1877f2; /* أزرق فيسبوك */
}

.social-icons a.whatsapp {
  background-color: #25d366; /* أخضر واتساب */
}

.social-icons a.phone {
  background-color: #0ea5e9; /* أزرق فاتح للمكالمات */
}
/* ===== Variant 2: Cyber-Dynamic ===== */
.hero-title-v2{ font-family:'Space Grotesk','Inter',sans-serif; }
.hero-title-v2 .v2-glow{
  position:relative; display:inline-block;
   background:linear-gradient(90deg,#f8fafc,#dbeafe,#fbbf24);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation: v2Pop 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes v2Shift{ to{ background-position:300% 0; } }
@keyframes v2Pop{
  0%{ opacity:0; transform:translateY(24px) scale(0.9); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.hero-title-v2 .v2-sub {
    display: block;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.36em !important;
    padding-right: 0.36em; /* compensates the trailing letter-spacing gap so the text optically centers */
    text-transform: uppercase;
    margin-top: 0; /* mt-3 in the HTML now handles the spacing, avoids double-margin */
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* لضمان التناسق في الشاشات المختلفة */
@media (min-width: 768px) {
    .hero-title-v2 .v2-sub {
        font-size: 1.85rem;
        letter-spacing: 0.37em !important;
    }
}
@keyframes v2FadeUp{ to{ opacity:1; transform:translateY(0); } }
.hero-title-v2 .v2-scan{
  display:block; width:100%; max-width:420px; height:2px; margin-top:1.75rem; opacity:0;
  background:linear-gradient(90deg, transparent, #38bdf8, transparent);
  background-size:200% 100%;
  box-shadow: 0 0 10px 1px rgba(56,189,248,0.7);
  animation: v2ScanIn 0.4s ease-out 0.9s forwards, v2ScanMove 2.4s linear 1.3s infinite;
}
@keyframes v2ScanIn{ to{ opacity:1; } }
@keyframes v2ScanMove{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ============================================================
   Byte Trade - About Section Styles (Light Theme)
   ============================================================ */
:root {
  --ink:        #FFFFFF;
  --ink-2:      #F9FAFB;
  --surface:    #F3F4F6;
  --surface-2:  #E5E7EB;
  --border:     rgba(0, 0, 0, 0.08); /* أسود شفاف للحدود */
  --border-hi:  rgba(0, 0, 0, 0.16);
  --text:       #111827; /* أسود داكن للنصوص */
  --text-dim:   #4B5563; /* رمادي داكن للنصوص الفرعية */
  --amber:      #D4A24C;
  --teal:       #3FA9A0;
  --verified:   #6FCF97;
}

#byte-about {
  background:
    radial-gradient(60% 50% at 85% -10%, rgba(212,162,76,0.15), transparent 60%),
    radial-gradient(50% 40% at 5% 110%, rgba(63,169,160,0.15), transparent 60%),
    var(--ink);
  color: var(--text);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}
#byte-about .font-display { font-family: 'Noto Kufi Arabic', sans-serif; }
#byte-about .font-mono-tag {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
}

#byte-about .blueprint { position: relative; }
#byte-about .blueprint::before,
#byte-about .blueprint::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--border-hi);
  transition: border-color .3s ease, width .3s ease, height .3s ease;
}
#byte-about .blueprint::before {
  top: -1px; right: -1px;
  border-top: 1.5px solid var(--border-hi);
  border-right: 1.5px solid var(--border-hi);
}
#byte-about .blueprint::after {
  bottom: -1px; left: -1px;
  border-bottom: 1.5px solid var(--border-hi);
  border-left: 1.5px solid var(--border-hi);
}
#byte-about .blueprint:hover::before,
#byte-about .blueprint:hover::after {
  width: 20px; height: 20px;
}
#byte-about .blueprint.accent-amber:hover::before,
#byte-about .blueprint.accent-amber:hover::after { border-color: var(--amber); }
#byte-about .blueprint.accent-teal:hover::before,
#byte-about .blueprint.accent-teal:hover::after { border-color: var(--teal); }

#byte-about .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
#byte-about .reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  #byte-about .reveal { transition: none; opacity: 1; transform: none; }
  #byte-about .gate-draw path { stroke-dashoffset: 0 !important; transition: none !important; }
}

#byte-about .gate-draw path {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);
}
#byte-about .gate-draw.in-view path { stroke-dashoffset: 0; }

#byte-about .pillar-icon { transition: transform .35s ease; }
#byte-about .pillar:hover .pillar-icon { transform: translateY(-3px) scale(1.06); }

#byte-about .chip {
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
#byte-about .chip:hover {
  transform: translateY(-2px);
  background-color: var(--surface-2); /* هيدي لون رمادي فاتح عند المرور عليه */
}

#byte-about .stat-num {
  font-variant-numeric: tabular-nums;
}