/* =======================================
   Base & Variables
======================================= */
* { box-sizing: border-box; }
:root{
  --brand-1:#f7941d;
  --brand-1-dark:#693d03;
  --header-start:#000000;
  --header-end:#f7941d;
  --bg:#f4f7f9;
  --text:#1e1e1e;
  --muted:#6b7280;
  --white:#fff;

  /* إزاحة التمرير للأقسام بسبب الهيدر الـsticky */
  --sticky-offset: 86px;
}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
section[id]{ scroll-margin-top: var(--sticky-offset); }

.section{ padding:64px 20px; max-width:1200px; margin:auto; }
.section-title{ text-align:center; margin:0 0 16px; font-size:2rem; }

/* =======================================
   Header (Desktop + Mobile burger, no JS)
======================================= */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;  /* ثابت وفوق المحتوى */
background: transparent;                                /* شفاف عند الأعلى */
  color:#fff;
 transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  box-shadow: none;
}
.site-header.scrolled,
.site-header.nav-open{                      /* عند التمرير أو فتح قائمة الموبايل */
  background: linear-gradient(110deg, #000, #f7941d);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  backdrop-filter: saturate(140%) blur(4px);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position: relative;
}
.brand .logo{ display:block; height:70px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:16px; }
.main-nav a, .dd-label{
  color:#fff; text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:8px; transition:background .25s;
  white-space:nowrap;
}
.main-nav a:hover, .dd-label:hover{ background:rgba(255,255,255,.18); }
.btn-nav{ background:rgba(255,255,255,.12); }
.btn-nav:hover{ background:rgba(255,255,255,.22); }

/* Dropdown (works on hover & touch) */
.dropdown{ position:relative; }
.dd-toggle{ display:none; }
.dd-label{ cursor:pointer; display:inline-block; }
.dropdown-content{
  position:absolute; right:0;
  min-width:220px; background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.12); padding:6px 0; display:none; z-index:10;
}
.dropdown-content a{ display:block; color:#000; padding:10px 14px; }
.dropdown-content a:hover{ background:#f4f6f8; }
.dropdown:hover .dropdown-content{ display:block; }          /* Desktop */
.dd-toggle:checked ~ .dropdown-content{ display:block; }     /* Touch */

/* Burger */
/* ===== إصلاح نهائي لزر البرغر على الموبايل ===== */

/* تأكيد مرجعية التموقع */
.header-inner{ position: relative; }

/* زر البرغر */
.nav-toggle-btn{
  width:44px; height:44px;
  display:none;                 /* يُظهر بالميديا أدناه */
  align-items:center; justify-content:center;
  margin-left:auto; order:3; padding:0;
  border-radius:8px; line-height:0; position:relative; z-index:1001;
}

/* ارسم الأشرطة بوضعية مطلقة ليمنع تقلّص العرض */
.nav-toggle-btn span{
  position:absolute; left:9px; right:9px;   /* يضمن عرض ثابت ~26px */
  height:3px; background:#fff; border-radius:2px;
  display:block; margin:0; padding:0;
}
.nav-toggle-btn span:nth-child(1){ top:13px; }
.nav-toggle-btn span:nth-child(2){ top:20px; }
.nav-toggle-btn span:nth-child(3){ top:27px; }

/* تحوّل البرغر إلى X عند الفتح */
@media (max-width:900px){
  .nav-toggle-btn{ display:flex; }
  .nav-toggle:checked + .nav-toggle-btn span:nth-child(1){
    top:20px; transform:rotate(45deg);
  }
  .nav-toggle:checked + .nav-toggle-btn span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked + .nav-toggle-btn span:nth-child(3){
    top:20px; transform:rotate(-45deg);
  }

  /* تأكيد ظهور القائمة فوق المحتوى وعدم قصّها */
  .main-nav{
    position:absolute; left:0; right:0; top:100%;
    z-index:1000;
    background: linear-gradient(110deg, #000, #f7941d);
    display:grid; gap:8px; padding:12px 16px 16px;
    transform-origin:top; transform:scaleY(0); transition:transform .25s ease;
  }
  .nav-toggle:checked ~ .main-nav{ transform:scaleY(1); }

  /* روابط ممتدة وبلا التفاف أسطر */
  .main-nav a, .dd-label{ display:block; width:100%; white-space:nowrap; }
  .dropdown{ width:100%; }
  .dropdown-content{ position:static; box-shadow:none; background:rgba(255,255,255,.08); border-radius:8px; }
  .dropdown-content a{ color:#fff; }
}
/* 1) أخفِ مفاتيح الـcheckbox نهائياً في كل المقاسات (حل المربع الأبيض) */
.nav-toggle,
.dd-toggle{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 2) لا تجعل Kontakt يبدو نشطاً دائماً — اجعل الخلفية فقط عند hover/focus-visible */
.btn-nav{
  background: transparent;                 /* كان rgba(255,255,255,.12) */
  box-shadow: none;
}
.btn-nav:hover,
.btn-nav:focus-visible{
  background: rgba(255,255,255,.18);
}

/* حافظ على نمط الروابط الأخرى أيضاً */
.main-nav a{ outline: none; }
.main-nav a:focus-visible{
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}
.main-nav a:active{ transform: translateY(1px); } /* لمسة ضغط بسيطة اختيارية */

/* تأكد أن زر البرغر ثابت ولا ينضغط أو يتقصجز */
.nav-toggle-btn{
  width:44px; height:44px; margin-left:auto; order:3; line-height:0; position:relative; z-index:1001;
}
.nav-toggle-btn span{
  position:absolute; left:9px; right:9px; height:3px; background:#fff; border-radius:2px;
}
.nav-toggle-btn span:nth-child(1){ top:13px; }
.nav-toggle-btn span:nth-child(2){ top:20px; }
.nav-toggle-btn span:nth-child(3){ top:27px; }


/* =======================================
   Hero
======================================= */
.hero {
  position: relative;
  height: 100vh; /* يغطي الشاشة بالكامل */
  display: flex;
  flex-direction: column;
  justify-content: center; /* يوسّط المحتوى عمودي */
  align-items: center;
  text-align: center;
  color: var(--white);
  background: url('../images/h1.png') center center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.40) 35%,
    rgba(0,0,0,.35) 100%
  );}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 92%;
}

.hero-content img{ width: clamp(110px, 14vw, 160px); height:auto; margin:0 auto 12px; display:block; }
.hero h1{ margin:10px 0 12px; line-height:1.1; font-size: clamp(28px, 6vw, 64px); letter-spacing:.2px; }
.hero p{ margin:0 auto 22px; max-width:800px; font-size: clamp(15px, 2.1vw, 20px); opacity:.95; }
.cta{
  background:var(--brand-1); color:var(--white);
  border:none; border-radius:12px; cursor:pointer;
  transition:background .3s, transform .3s, box-shadow .3s;
  font-size:1rem; padding:1rem 2rem; min-width:220px;
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.cta:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.4); background:var(--brand-1-dark); }
@media (max-width:640px){
  .hero-content img{ width: clamp(90px, 22vw, 120px); }
}

/* Fade-in helper (اختياري) */
.fade-in{ opacity:0; transform:translateY(30px); transition:opacity .6s ease-out, transform .6s ease-out; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* =======================================
   Services (بطاقات متساوية الارتفاع)
======================================= */
.services-container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
  align-items: stretch;
}
.service-card{
  display: grid;                 /* صورة - محتوى مرن - زر */
  grid-template-rows: auto 1fr auto;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }
.service-card img{
  width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover; display:block;
}
@supports not (aspect-ratio: 1){
  .service-card img{ height:180px; }
}
.service-card h3{ margin:14px 16px 6px; color:#f7941d; text-align:center; font-size:1.15rem; }
.service-card p{ margin:0 16px 0; color:#555; font-size:.95em; text-align:center; line-height:1.55; }
.service-card a{
  margin: 18px auto 20px; padding:10px 16px; min-width:150px;
  text-align:center; border-radius:10px; background:#f7941d; color:#fff;
  text-decoration:none; font-weight:600; transition: background .2s ease, transform .15s ease;
}
.service-card a:hover{ background:#844a04; transform: translateY(-2px); }

/* =======================================
   Mission & Vision
======================================= */
#mission-vision .lead{
  text-align:center; max-width:800px; margin:1rem auto 3rem; color:#2e2e2e;
}
.mv-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px; align-items:center;
}
.illustration{ border-radius:20px; overflow:hidden; height:400px; }
.illustration img{ width:100%; height:190%; object-fit:cover; }
.mv-cards{ display:grid; gap:24px; }
.mv-card{
  padding:24px; border-radius:16px; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.mv-card .icon{
    background: linear-gradient(110deg, #000, #f7941d);
  color:#fff; width:50px; height:50px; display:grid; place-items:center;
  border-radius:12px; margin-bottom:12px;
}

/* =======================================
   Karriere
======================================= */
#career{ position:relative; overflow:hidden; color:#fff; text-align:center;
     background: linear-gradient(110deg, #000, #f7941d); }
#career h2{ font-size:2.2rem; margin-bottom:.5rem; text-shadow:0 2px 8px rgba(0,0,0,.25); }
#career p{ max-width:700px; margin:0 auto 1.5rem; line-height:1.6; text-shadow:0 1px 6px rgba(0,0,0,.2); }
.career-lines{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.career-lines::before{
  content:""; position:absolute; width:200%; height:200%;
  background:rgba(255,255,255,0.04); transform:rotate(25deg); top:-50%; left:-50%;
  animation:moveLines 20s linear infinite;
}
@keyframes moveLines{ 0%{ transform:translate(-50%,-50%) rotate(25deg);} 100%{ transform:translate(-40%,-40%) rotate(25deg);} }
#career .wrap{ position:relative; z-index:1; max-width:1100px; margin:auto; padding-inline:16px; }
#career .cards{ display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr)); gap:24px; align-items:stretch; }
#career .card{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:220px; height:100%;
  padding:24px; border-radius:16px; color:#fff;
  background:rgba(0,0,0,0.20); border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 8px 20px rgba(0,0,0,0.3); transition:transform .3s, box-shadow .3s;
}
#career .card i{ font-size:40px; margin-bottom:12px; display:block; }
#career .card:hover{ transform:translateY(-10px) scale(1.05); box-shadow:0 12px 30px rgba(0,0,0,0.5); }
@media (max-width:980px){ #career .cards{ grid-template-columns:repeat(2, minmax(240px,1fr)); } }
@media (max-width:640px){ #career .cards{ grid-template-columns:1fr; } }

/* =======================================
   Testimonials Slider
======================================= */
#testimonials{ background:#eaf4f4; }
.testimonial-container{ max-width:900px; margin:auto; overflow:hidden; position:relative; padding:0 20px; }
.testimonial-slider{ display:flex; gap:0; transition:transform .45s ease; will-change:transform; }
.testimonial-card{
  flex:0 0 100%; background:#fff; padding:32px; border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.1);
}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4);
  color:#fff; border:none; padding:12px 16px; border-radius:50%; cursor:pointer; font-size:20px;
}
.prev-btn{ left:10px; } .next-btn{ right:10px; }
.slider-indicators{ text-align:center; margin-top:24px; }
.indicator{ display:inline-block; width:12px; height:12px; background:#ccc; border-radius:50%; margin:0 6px; cursor:pointer; }
.indicator.active{ background:#333; }

/* =======================================
   Contact
======================================= */
.contact-container{
  display:flex; margin-top:40px; border-radius:16px; overflow:hidden;
    background: linear-gradient(110deg, #f7941d, #0c0c0b);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.contact-image{ flex:1; min-height:400px; background:url('../images/mann.png') center/cover no-repeat; }
.contact-form{ flex:1; padding:40px; display:flex; flex-direction:column; justify-content:center; max-width:600px; margin:0 auto; }
.contact-form h2{ margin-bottom:10px; font-size:1.8rem; color:var(--white); }
.contact-form p{ margin-bottom:20px; color:var(--white); }
.contact-form label{ font-weight:700; margin-top:15px; color:var(--white); display:block; }
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; margin-top:8px; font-size:1rem; border:1px solid #ccc; border-radius:8px; background:#f9f9f9;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:#0056b3; outline:none; }

/* =======================================
   Footer
======================================= */
.site-footer{
  background: linear-gradient(110deg, #000, #f7941d);
  color:var(--white); padding:4rem 2rem 0rem; font-size:.95rem;
}
.footer-container{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; text-align:left;
}
.footer-about{ flex:1 1 300px; }
.footer-logo{ width:120px; height:auto; display:block; }
.footer-links, .footer-contact{ flex:1 1 200px; }
.footer-links h4, .footer-contact h4{ margin:0 0 1rem; font-weight:700; font-size:1.1rem; }
.footer-links ul, .footer-contact ul{ list-style:none; margin:0; padding:0; }
.footer-links li, .footer-contact li{ margin-bottom:.75rem; display:flex; align-items:center; }
.footer-links a{ color:var(--white); text-decoration:none; opacity:.9; display:inline-block; padding:6px 0; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.footer-contact i{ margin-right:.5rem; color:#f4f7f9; }
.footer-contact a{ color:var(--white); text-decoration:none; opacity:.95; }
.footer-contact a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:12px; padding:14px 24px 28px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.footer-legal-inline{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; }
.footer-legal-inline a{ color:var(--white); opacity:.9; text-decoration:none; font-weight:600; font-size:.95rem; }
.footer-legal-inline a:hover{ opacity:1; text-decoration:underline; }
.footer-legal-inline a + a::before{ content:"·"; margin:0 .6rem; opacity:.6; }
.footer-copy{ margin:0; color:var(--white); opacity:.85; font-size:.9rem; }

/* =======================================
   Responsive tweaks
======================================= */
@media (max-width:900px){ .footer-container{ justify-content:center; } }
@media (max-width:768px){
  .contact-container{ flex-direction:column; }
  .contact-image{ min-height:220px; }
}
@media (max-width:640px){
  .footer-container{ text-align:center; }
  .footer-contact li{ justify-content:center; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .career-lines::before{ animation:none; }
  .testimonial-slider{ transition:none; }
  .fade-in{ transition:none; }
}

/* === ATN UI polish (safe) === */
:focus-visible { outline: 3px solid #f7941d; outline-offset: 2px; border-radius: 6px; }
.btn, .cta, .btn-nav { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:hover, .cta:hover, .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
img { image-rendering: -webkit-optimize-contrast; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }


/* CTA — زر أساسي موحّد في كل الصفحات */
.cta{
  --cta-a:#f7941d;
  --cta-b:#000000;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-width:220px; padding:1rem 2rem;
  border:none; border-radius:12px; cursor:pointer;
  color:#fff; font:600 1rem/1 Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: linear-gradient(110deg, #000, #f7941d);
  box-shadow:0 8px 20px rgba(10,61,98,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.cta:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(10,61,98,.45); filter:brightness(1.06); }
.cta:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(10,61,98,.3); filter:brightness(.97); }
.cta:focus-visible{ outline:3px solid rgba(0,168,150,.6); outline-offset:2px; }
.cta:disabled, .cta[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }

/* لو عندك نموذج وتبغى الزر يمْلأ السطر بالموبايل */
@media (max-width: 640px){
  .cta{ width:100%; }
}