/* =========================
   Font
   ========================= */
@font-face {
  font-family: 'Mokoto';
  src: url('../fonts/mokoto.woff2') format('woff2'),
       url('../fonts/mokoto.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Root & Base
   ========================= */
:root{
  --violet:#a7a1ff;
  --neo:#5cf2ff;
  --white:#fff;
  --ink:#e8ecff;
  --glass:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.14);
  --shine:linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 65%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:var(--white);
  font-family:'Mokoto',system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* =========================
   Page Transition Overlay
   ========================= */
.overlay{
  position:fixed; inset:0; background:#0a0f18;
  opacity:0; pointer-events:none; transition:opacity .42s ease;
  z-index:1000;
}
.overlay.active{opacity:1; pointer-events:auto}

/* =========================
   Navbar
   ========================= */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:40;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(180deg, rgba(10,15,24,.9), rgba(10,15,24,.4) 70%, rgba(10,15,24,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .row{max-width:1200px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;color:#fff;position:relative;overflow:hidden}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--neo);box-shadow:0 0 18px var(--neo)}
.links{margin-inline:auto;display:none;gap:18px}
.links a{opacity:.95;color:#fff;position:relative;padding:6px 8px;overflow:hidden}
.links a:hover{opacity:1;text-shadow:0 0 12px rgba(255,255,255,.35)}
.links a::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:var(--shine);mix-blend-mode:screen}
.brand span:last-child::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:var(--shine);mix-blend-mode:screen}
.dot-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* يخلي اللوجو دائري */
  object-fit: contain;
}
/* أوقف ستايل النقطة القديمة تمامًا */
.brand .dot{ display:none !important; }

/* مقاس ومحاذاة اللوجو */
.brand-logo{
  width: 28px;           /* عدّلها لـ 32px لو عايز أكبر */
  height: 28px;
  display: block;
  object-fit: contain;
  border-radius: 0;      /* نتأكد مفيش قصّ دائري */
  box-shadow: none;      /* بدون جلو سماوي */
  background: none;
}

/* خلّي اللمعة على النص فقط مش على اللوجو */
.brand-text{ position:relative; overflow:hidden; }
.brand-text::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-120%);
  background: var(--shine);
  mix-blend-mode: screen;
  animation: shine 5s cubic-bezier(.2,.6,.2,1) infinite;
}
/* لو كان عندك قبل كده: .brand span:last-child و ::after — احذفهم أو عطّلهم */
.brand span:last-child,
.brand span:last-child::after{ animation: none; }

/* ضبط بسيط للمسافة بين اللوجو والنص */
.brand{ gap: 10px; align-items: center; }

.cta{display:flex;align-items:center;gap:10px}
.btn{appearance:none;border:none;cursor:pointer;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s}
.btn-ghost{background:var(--glass);color:var(--ink);border:1px solid var(--line)}
.btn-neo{background:linear-gradient(135deg,var(--violet),var(--neo));color:#0b0f18;box-shadow:0 10px 26px rgba(92,242,255,.25)}
.lang{padding:8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-weight:700}

/* =========================
   Hero
   ========================= */
.stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;   /* ارتفاع الشاشة الفعلي */
  min-height: 100svh;   /* fallback */
  overflow: hidden;
}

.video-wrap {
  position: absolute;
  inset: 0;        /* top:0; right:0; bottom:0; left:0; */
  z-index: -2;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* يملأ كامل العرض والارتفاع */
  object-position: center;  /* يركّز الفيديو في النص */
}

@media (max-width: 600px){
  .hero-content{
    padding-top: 18vh;
    padding-inline: 16px;
  }
}

/* على الديسكتوب: لا نسمح للمحتوى يتجاوز خط أمان */
@media (min-width: 1024px){
  .hero-content{
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .video-wrap video{ animation: none; }
}
.actions{position:absolute;left:4vw;bottom:6vh;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-xl{padding:14px 22px;font-size:15px}

/* =========================
   Intro
   ========================= */
.intro{padding:80px 20px;background:#0a0f18;text-align:center}
.intro h2{font-size:clamp(22px,4vw,36px);margin-bottom:10px}
.intro p{color:#ccc;max-width:600px;margin:0 auto 20px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips span{background:var(--glass);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:14px}

/* =========================
   Shine (auto every 5s)
   ========================= */
@keyframes shine{to{transform:translateX(120%)}}
.links a, .brand span:last-child{animation:shine 5s cubic-bezier(.2,.6,.2,1) infinite;animation-delay:2s}
.links a::after, .brand span:last-child::after{animation:shine 5s cubic-bezier(.2,.6,.2,1) infinite}

/* =========================
   Services
   ========================= */
.services{padding:80px 20px;background:#0d111a;text-align:center}
.services h2{margin-bottom:40px;font-size:clamp(22px,4vw,36px)}
.services .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:1100px){.services .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){ .services .grid{grid-template-columns:1fr} }
.services .card{
  background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:22px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  will-change:transform,box-shadow
}
.services .card:hover{transform:translateY(-4px);box-shadow:0 0 18px rgba(92,242,255,.25)}

/* Glow loop (5s) */
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 rgba(92,242,255,0);border-color:var(--line)}
  50%{box-shadow:0 0 22px rgba(92,242,255,.28);border-color:rgba(92,242,255,.35)}
}
.services .card.glow-loop{animation:glowPulse 5s ease-in-out infinite}

/* =========================
   POS Spotlight
   ========================= */
.pos-spotlight{padding:100px 20px;background:#0a0f18}
.spotlight{display:grid;gap:30px;align-items:center;grid-template-columns:1fr}
.spotlight h2{margin-bottom:20px;font-size:clamp(24px,4vw,40px)}
.spotlight ul{margin:0 0 20px;padding-left:20px;text-align:left}
.spotlight .visual img{max-width:100%;border-radius:12px;display:block}
@media(min-width:900px){.spotlight{grid-template-columns:1fr 1fr}}
.pos-spotlight .spotlight .text.glow-loop,
.pos-spotlight .spotlight .visual.glow-loop{animation:glowPulse 5s ease-in-out infinite}

/* =========================
   Testimonials
   ========================= */
.testimonials{padding:80px 20px;background:#111827;text-align:center}
.testimonials h2{margin-bottom:40px;font-size:clamp(22px,4vw,36px)}
.testimonials .grid{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.testimonials .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){ .testimonials .grid{grid-template-columns:1fr} }
.t-card{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:20px;font-size:15px}
.t-card span{display:block;margin-top:10px;color:#aaa;font-size:14px}
.testimonials .t-card.glow-loop{animation:glowPulse 5s ease-in-out infinite}

/* =========================
   Blog Highlights
   ========================= */
.blog-highlights{padding:80px 20px;background:#0d111a;text-align:center}
.blog-highlights h2{margin-bottom:40px;font-size:clamp(22px,4vw,36px)}
.blog-highlights .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog-highlights .post{background:var(--glass);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:left}
.blog-highlights .post img{width:100%;height:180px;object-fit:cover}
.blog-highlights .post h3{margin:12px;font-size:18px}
.blog-highlights .post p{margin:0 12px 12px;font-size:14px;color:#ccc}
.blog-highlights .post a{display:inline-block;margin:0 12px 16px}

/* =========================
   Reveal Animations
   ========================= */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-visible{opacity:1;transform:none;transition:transform .7s cubic-bezier(.2,.7,0,1),opacity .7s}

.reveal-left{opacity:0;transform:translateX(-36px)}
.reveal-right{opacity:0;transform:translateX(36px)}
.reveal-left.is-visible,
.reveal-right.is-visible{opacity:1;transform:none;transition:transform .75s cubic-bezier(.2,.7,0,1),opacity .75s}

/* =========================
   Magnetic Buttons
   ========================= */
.btn{will-change:transform}
.btn.magnet-active{transition:transform .06s linear}
@media (prefers-reduced-motion: reduce){
  .btn.magnet-active{transition:none;transform:none!important}
}

/* =========================
   Parallax
   ========================= */
.parallax{will-change:transform;transform:translate3d(0,0,0)}
.parallax-wrap{perspective:1000px}
@media (prefers-reduced-motion: reduce){
  .parallax{transform:none!important}
}

/* =========================
   Footer
   ========================= */
.footer{background:#0a0f18;padding:40px 20px;color:#ccc}
.footer .f-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:center;text-align:center}
.footer h3{margin-bottom:10px;color:#fff;font-size:18px}
.footer a{color:#ccc}
.footer .social{display:flex;justify-content:center;gap:14px;margin-top:10px}
.footer .social img{width:24px;filter:invert(1);transition:.3s}
.footer .social img:hover{filter:invert(67%) sepia(83%) saturate(500%) hue-rotate(180deg) brightness(1.1)}


/* Blog Page */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 60px 20px;
}

.blog-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card h2 {
  margin: 16px;
  font-size: 20px;
}

.blog-card p {
  margin: 0 16px 16px;
  color: var(--muted);
}

.blog-card .btn {
  margin: 0 16px 20px;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--white);
  text-decoration: none;
}
/* ===== Contact tidy ===== */
.contact-card { text-align:start; }
.contact-list { list-style:none; padding:0; margin:10px 0 16px; display:grid; gap:10px; }
.contact-list a { color:var(--ink); text-decoration:underline; }

.contact-form { display:grid; gap:16px; }
.contact-form .row-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width:720px){ .contact-form .row-2 { grid-template-columns:1fr; } }

.field label { display:block; margin:0 0 8px; font-weight:700; color:#e8ecff; }
.field input,
.field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:var(--glass);
  border:1px solid var(--line);
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa4b2; opacity:.8; }
.field textarea{ resize:vertical; min-height:160px; }

.field input:focus, .field textarea:focus{
  border-color:var(--neo);
  box-shadow:0 0 0 3px rgba(92,242,255,.18), 0 0 22px rgba(92,242,255,.12);
  background:rgba(255,255,255,.10);
}

.form-actions{
  display:flex; justify-content:flex-end; gap:12px; margin-top:6px;
}
.form-note{ margin:6px 0 0; color:#b9c2d0; font-size:14px; }

/* RTL تحسينات بسيطة */
html[dir="rtl"] .contact-form .row-2{ direction:rtl; }
html[dir="rtl"] .field label{ text-align:right; }
/* ===== Contact Section layout ===== */
.services.contact-section {
  /* نخلي الخلفية والـpadding نفس الثيم، لكن نضمن تمركز الكروت */
  padding-top: 120px;
}

.services.contact-section .container {
  max-width: 1100px;   /* أعرض شوية من الديفولت */
}

/* جريد للكارتين: معلومات + فورم */
.services.contact-section .grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;     /* فورم أعرض سنة */
  gap: 28px;
  align-items: stretch;                  /* يخلي الكروت نفس الارتفاع */
}

/* الكروت تتمدد بالكامل */
.services.contact-section .card{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* محتوى كارت المعلومات */
.contact-card { text-align: start; }
.contact-list{ list-style:none; padding:0; margin:8px 0 16px; display:grid; gap:10px; }
.contact-list li{ display:flex; align-items:center; gap:10px; }
.contact-list a{ color:var(--ink); text-decoration:underline; }

/* فورم أنضف */
.contact-form{ display:grid; gap:16px; }
.contact-form .row-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.field label{ display:block; margin:0 0 8px; font-weight:700; color:#e8ecff; }
.field input, .field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:var(--glass);
  border:1px solid var(--line);
  color:#fff; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ min-height:160px; resize:vertical; }
.field input:focus, .field textarea:focus{
  border-color:var(--neo);
  box-shadow:0 0 0 3px rgba(92,242,255,.18), 0 0 22px rgba(92,242,255,.12);
  background:rgba(255,255,255,.10);
}

/* زر الإرسال يمين في LTR ويسار في RTL */
.form-actions{ margin-top:6px; display:flex; justify-content:flex-end; }
html[dir="rtl"] .form-actions{ justify-content:flex-start; }

/* أيقونات السوشيال أصغر وثابتة */
.social img{ width:22px; height:22px; display:block; }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .services.contact-section .container{ max-width: 960px; }
  .services.contact-section .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px){
  .services.contact-section .grid{ grid-template-columns: 1fr; }
  .contact-form .row-2{ grid-template-columns: 1fr; }
  .form-actions{ justify-content:center; }
}

/* =========================
   Responsive
   ========================= */
@media (min-width:880px){.links{display:flex}}
@media (max-width:700px){
  .actions{left:50%;transform:translateX(-50%);bottom:calc(4vh + env(safe-area-inset-bottom));justify-content:center}
  .btn-xl{padding:13px 18px}
}