/* ==================================================================
   afaqalardh — الصفحة الرئيسية (الترحيب + التعريف بالخدمة)
   ================================================================== */
*{margin:0;padding:0;box-sizing:border-box;font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}

:root{
  --blue:#087fbe;
  --blue-dark:#06618f;
  --green:#18a957;
  --ink:#1b2a38;
  --ink-soft:#687783;
  --page:#f5f9fc;
  --surface:#ffffff;
  --line:#e2ecf3;
}

html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--page);color:var(--ink)}
body.splash-on{overflow:hidden}
img{max-width:100%;display:block}

/* ================= شاشة الترحيب ================= */
.splash{
  position:fixed;inset:0;z-index:999;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(135deg,#ffffff 0%,#eaf6fb 55%,#dff0f9 100%);
  transition:opacity .6s ease,visibility .6s ease;
}
.splash.hide{opacity:0;visibility:hidden}
.splash-inner{text-align:center;padding:24px;animation:sp-in .9s cubic-bezier(.22,.9,.3,1) both}
.splash-logo{width:min(340px,72vw);height:auto;margin:0 auto 22px;
  animation:sp-logo 1.1s cubic-bezier(.22,.9,.3,1) both}
.splash-welcome{color:var(--ink-soft);font-size:17px;margin-bottom:4px;
  animation:sp-in 1s .25s both}
.splash-title{font-size:clamp(30px,7vw,48px);font-weight:800;color:var(--blue);
  letter-spacing:-.5px;animation:sp-in 1s .35s both}
.splash-sub{color:var(--ink-soft);font-size:clamp(14px,3.4vw,18px);margin-top:8px;
  animation:sp-in 1s .5s both}
.splash-bar{width:190px;height:4px;border-radius:99px;background:#d6e6f0;
  margin:28px auto 0;overflow:hidden}
.splash-bar span{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transform-origin:right;animation:sp-bar 2.4s ease-out forwards}

@keyframes sp-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sp-logo{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes sp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ================= الهيدر ================= */
header{
  height:78px;background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 6%;box-shadow:0 2px 15px rgba(0,0,0,.07);
  position:sticky;top:0;z-index:50;
}
.logo img{height:46px;width:auto}
nav{display:flex;gap:26px}
nav a{text-decoration:none;color:#263746;font-weight:600;font-size:15px;
  padding:4px 0;border-bottom:2px solid transparent;transition:.25s;white-space:nowrap}
nav a:hover,nav a.active{color:var(--blue);border-bottom-color:var(--blue)}
.head-actions{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;font-size:24px;color:var(--blue);cursor:pointer;
  line-height:1;padding:6px 10px}

/* ================= الأزرار ================= */
.btn{display:inline-block;padding:14px 34px;border-radius:50px;text-decoration:none;
  font-weight:700;font-size:15px;transition:.28s;border:2px solid transparent;cursor:pointer}
.btn-primary{background:#fff;color:var(--blue)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--blue)}
.btn-head{background:var(--blue);color:#fff;padding:11px 26px;font-size:14px}
.btn-head:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-disabled{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.55);
  cursor:not-allowed}
.btn-pkg{background:var(--blue);color:#fff;padding:11px 30px;font-size:14px;margin-top:16px}
.btn-pkg:hover{background:var(--blue-dark)}

/* ================= القسم الرئيسي ================= */


/* الواجهة الرئيسية */

/* =====================================
   HERO SECTION - DESKTOP
   ===================================== */


/* =========================================
   HERO SECTION - آفاق الأرض
   ========================================= */

.hero {
  position: relative;
  width: 100%;
  height: clamp(480px, calc(100vh - 76px), 850px);
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 30px 5%;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;

  background-color: #ffffff;
  background-image: url("/assets/img/family.jpg");
  background-size: 100% 90%;
  background-position: center;
  background-repeat: no-repeat;

  top: -50px;
}

/* إزالة الزخارف القديمة */
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}

/* =========================================
   محتوى الواجهة - الكمبيوتر
   ========================================= */

.hero-content {
  position: relative;
  z-index: 2;
  width: 48%;
  max-width: 540px;
  margin: 0;
  padding: 24px;

  box-sizing: border-box;
  text-align: right;
  border-radius: 14px;

  background: rgba(15, 22, 27, 0.58);
  box-shadow: 0 0 30px 12px rgba(15, 22, 27, 0.18);

  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(1px);
}

/* العنوان الرئيسي */
.hero-content h1 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.45;
  margin: 0 0 12px;
  color: #fff;
}

/* العنوان الثانوي */
.hero-content h2 {
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.5;
  margin: 0 0 16px;
  color: #8fe3c0;
}

/* وصف الواجهة */
.hero-content p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 20px;
  color: #fff;
}

/* =========================================
   الأزرار
   ========================================= */

.hero .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.hero .btn {
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================================
   الموبايل - الصورة في الأعلى
   والنص في الجزء السفلي منها
   ========================================= */

@media (max-width: 768px) {

  .hero {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;

    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;

    margin: 0;
    padding: 0;
    top: 0;

    box-sizing: border-box;
    overflow: hidden;

    /* إظهار الصورة الأفقية بعرض الشاشة */
    background-image: url("/assets/img/family1.jpg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;

    /*
      مساحة الصورة محسوبة على أبعاد 1024 × 498.
      المحتوى يضاف أسفلها ويتداخل معها بصريًا.
    */
    padding-top: 55%;
  }

  /* إزالة الزخارف */
  .hero::before,
  .hero::after {
    content: none !important;
    display: none !important;
  }

  /* النص فوق الجزء السفلي من الصورة */
  .hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 16px 20px;

    box-sizing: border-box;
    text-align: right;

    /*background: rgba(15, 22, 27, 0.78);*/
    border-radius: 0;
    box-shadow: none;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(2px);
  }

  .hero-content h1 {
    font-size: clamp(19px, 5.2vw, 25px);
    line-height: 1.5;
    margin: 0 0 8px;
    color: #8fe3c0;
    text-shadow: none;
  }

  .hero-content h2 {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.5;
    margin: 0 0 10px;
    color: #8fe3c0;
    text-shadow: none;
  }

  .hero-content p {
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 14px;
    color: #fff;
    text-shadow: none;
  }

  /* الأزرار أسفل النص */
  .hero .buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 9px;
  }

  .hero .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* =========================================
   الهواتف الصغيرة جدًا
   ========================================= */

@media (max-width: 380px) {

  .hero-content {
    padding: 14px 12px 16px;
  }

  .hero-content h1 {
    font-size: 18px;
  }

  .hero-content h2 {
    font-size: 16px;
  }

  .hero-content p {
    font-size: 12px;
    line-height: 1.8;
  }
}


/* ================= أقسام عامة ================= */
.services,.packages{padding:72px 6%;text-align:center}
/*.section-title{font-size:clamp(25px,5vw,35px);color:var(--blue);margin-bottom:14px}*/
/*.section-description{color:var(--ink-soft);margin-bottom:44px;font-size:16px}*/

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
  max-width:1100px;margin:0 auto}
.card{background:var(--surface);padding:36px 26px;border-radius:20px;
  box-shadow:0 5px 25px rgba(0,0,0,.07);transition:.3s;border:1px solid var(--line)}
.card:hover{transform:translateY(-8px);box-shadow:0 14px 34px rgba(8,127,190,.14)}
.icon{font-size:44px;margin-bottom:18px}
.card h3{margin-bottom:13px;color:var(--blue);font-size:19px}
.card p{color:var(--ink-soft);line-height:1.85}

/* ================= الباقات ================= */
.packages{background:#eaf6fb}
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;
  max-width:1100px;margin:0 auto}
.pkg{background:var(--surface);border-radius:20px;padding:30px 20px;border:1px solid var(--line);
  transition:.3s;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.pkg:hover{transform:translateY(-7px);border-color:var(--blue);box-shadow:0 14px 32px rgba(8,127,190,.16)}
.pkg-name{font-size:19px;font-weight:700;color:var(--ink)}
.pkg-speed{color:var(--green);font-weight:700;font-size:15px;margin-top:6px}
.pkg-price{font-size:27px;font-weight:800;color:var(--blue);margin-top:14px;line-height:1.25}
.pkg-price span{display:block;font-size:13px;font-weight:500;color:var(--ink-soft)}

/* ================= من نحن ================= */
.about{background:var(--surface);padding:72px 6%;text-align:center;border-block:1px solid var(--line)}
.about p{max-width:860px;margin:auto;line-height:2.05;font-size:17px;color:#52616d}

/* ================= تواصل معنا ================= */
.cta{padding:72px 20px;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.cta h2{font-size:clamp(25px,5vw,35px);margin-bottom:12px}
.cta p{margin-bottom:26px;font-size:17px;opacity:.95}
.phones{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.phone{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  border-radius:50px;padding:13px 26px;font-weight:700;transition:.25s}
.phone:hover{background:#fff;color:var(--blue);transform:translateY(-3px)}
.phone-no{direction:ltr;font-size:17px;letter-spacing:.5px;font-variant-numeric:tabular-nums}

/* ================= الفوتر ================= */
footer{background:#102532;color:#fff;text-align:center;padding:30px 20px}
.foot-logo{height:42px;width:auto;margin:0 auto 14px;
  filter:brightness(0) invert(1);opacity:.9}
footer span{color:#19b86b;font-weight:700}
.foot-phones{margin-top:8px;direction:ltr}
.foot-phones a{color:#9fd8f5;text-decoration:none;font-variant-numeric:tabular-nums}
.foot-phones a:hover{text-decoration:underline}
.foot-admin{margin-top:14px;font-size:13px}
.foot-admin a{color:#7d94a5;text-decoration:none}
.foot-admin a:hover{color:#fff}

/* ================= الهاتف ================= */
@media (max-width:860px){
  header{padding:0 5%}
  nav{position:absolute;top:78px;right:0;left:0;flex-direction:column;gap:0;
    background:var(--surface);box-shadow:0 12px 24px rgba(0,0,0,.12);
    max-height:0;overflow:hidden;transition:max-height .32s ease}
  nav.open{max-height:340px}
  nav a{padding:15px 6%;border-bottom:1px solid var(--line)}
  nav a:hover,nav a.active{border-bottom-color:var(--line);background:#f2f9fd}
  .burger{display:block}
  .btn-head{display:none}
  .services,.packages,.about,.cta{padding-inline:5%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .splash-bar span{transform:scaleX(1)}
}

@media print{.splash,header,.cta .buttons{display:none!important}}