/* =========================================================
   أستاذنا — صفحة الصيانة
   ostathna.com
   ========================================================= */

:root{
  --bg:#070B16;
  --bg-2:#0B1223;
  --card:rgba(255,255,255,.045);
  --card-line:rgba(255,255,255,.09);
  --ink:#F2F5FC;
  --ink-soft:#A8B3CC;
  --ink-dim:#6C7792;
  --teal:#2DD4BF;
  --indigo:#7C8CF8;
  --amber:#FBBF77;
  --radius:24px;
  --font:"Cairo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

[hidden]{display:none !important}

/* ================= الخلفية ================= */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -10%, #152043 0%, transparent 60%),
    radial-gradient(900px 600px at 12% 108%, #0E2B33 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* شبكة خفيفة */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 78%);
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.42;
  animation:drift 22s ease-in-out infinite;
  will-change:transform;
}
.orb-1{width:380px; height:380px; background:#2DD4BF; top:-110px; left:-90px}
.orb-2{width:440px; height:440px; background:#6366F1; bottom:-150px; right:-110px; animation-delay:-8s}
.orb-3{width:260px; height:260px; background:#F59E0B; opacity:.18; top:45%; right:22%; animation-delay:-14s}

@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(0,34px,0) scale(1.08)}
}

/* ================= التخطيط ================= */
.wrap{
  flex:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:40px 24px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:30px;
}

/* ================= الشعار ================= */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}

.mark{
  width:56px;
  height:56px;
  flex:none;
  border-radius:17px;
  background:linear-gradient(145deg, rgba(25,35,65,.9), rgba(12,18,34,.9));
  border:1px solid var(--card-line);
  display:grid;
  place-items:center;
  box-shadow:0 14px 34px rgba(45,212,191,.16);
}
.mark svg{width:30px; height:30px; display:block}

.brand-text{text-align:right; line-height:1.15}
.brand-ar{font-size:1.5rem; font-weight:800; letter-spacing:-.01em}
.brand-en{
  font-size:.7rem;
  font-weight:600;
  color:var(--ink-dim);
  letter-spacing:.22em;
  text-transform:uppercase;
  direction:ltr;
  margin-top:3px;
}

/* ================= البطاقة ================= */
.card{
  width:100%;
  position:relative;
  overflow:hidden;
  padding:46px 34px 40px;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.75);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) .08s both;
}

.card::before{
  content:"";
  position:absolute;
  top:0; right:0; left:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(45,212,191,.75), rgba(124,140,248,.75), transparent);
}

/* ================= شارة الحالة ================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px 7px 13px;
  margin-bottom:24px;
  border-radius:999px;
  background:rgba(251,191,119,.1);
  border:1px solid rgba(251,191,119,.26);
  color:var(--amber);
  font-size:.8rem;
  font-weight:600;
}

.dot{width:7px; height:7px; border-radius:50%; background:var(--amber); position:relative}
.dot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:var(--amber);
  opacity:.35;
  animation:ping 1.9s ease-out infinite;
}

@keyframes ping{
  0%        {transform:scale(.5); opacity:.5}
  80%,100%  {transform:scale(1.9); opacity:0}
}

/* ================= التروس ================= */
.gears{width:92px; height:92px; margin:0 auto 26px; position:relative}
.gears svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.gear-a{animation:spin 11s linear infinite; transform-origin:34px 34px}
.gear-b{animation:spin 8s linear infinite reverse; transform-origin:70px 66px}

@keyframes spin{to{transform:rotate(360deg)}}

/* ================= النصوص ================= */
h1{
  margin:0 0 14px;
  font-size:clamp(1.85rem, 6vw, 2.7rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.015em;
}

h1 .hl{
  background:linear-gradient(100deg, var(--teal), var(--indigo));
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.lede{
  margin:0 auto;
  max-width:46ch;
  font-size:clamp(1rem, 2.6vw, 1.1rem);
  font-weight:300;
  line-height:2;
  color:var(--ink-soft);
}
.lede strong{font-weight:600; color:var(--ink)}

/* ================= العدّاد ================= */
.countdown{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:30px auto 0;
  direction:rtl;
}

.cd-unit{
  min-width:74px;
  padding:13px 10px 11px;
  border-radius:15px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--card-line);
}
.cd-unit b{
  display:block;
  font-size:1.6rem;
  font-weight:800;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg, var(--teal), var(--indigo));
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.cd-unit span{
  display:block;
  margin-top:4px;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-dim);
}

/* ================= شريط التقدم ================= */
.progress{
  margin:30px auto 0;
  width:min(300px, 100%);
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.progress i{
  display:block;
  height:100%;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--teal), var(--indigo));
  animation:slide 2.1s ease-in-out infinite;
}
.progress-note{margin:12px 0 0; font-size:.82rem; color:var(--ink-dim)}

@keyframes slide{
  0%  {transform:translateX(130%)}
  100%{transform:translateX(-130%)}
}

/* ================= النقاط المطمئنة ================= */
.facts{
  list-style:none;
  margin:32px 0 0;
  padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, 1fr);
  text-align:center;
}

.facts li{display:flex; flex-direction:column; align-items:center; gap:9px}

.facts .ico{
  width:38px;
  height:38px;
  flex:none;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(124,140,248,.11);
  border:1px solid rgba(124,140,248,.2);
  color:var(--indigo);
}
.facts .ico svg{width:19px; height:19px}

.facts b{font-size:.9rem; font-weight:600}
.facts span{font-size:.78rem; color:var(--ink-dim); line-height:1.6}
.facts b + span,
.facts .txt span{display:block}

/* ================= التذييل ================= */
footer{
  padding:22px 24px 30px;
  text-align:center;
  font-size:.78rem;
  color:var(--ink-dim);
  line-height:1.9;
}
footer .en{direction:ltr; display:block; margin-top:4px; opacity:.72}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{color:var(--teal)}

/* ================= حركة الظهور ================= */
@keyframes rise{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:none}
}

/* ================= الجوال ================= */
@media (max-width:600px){
  .wrap{padding:32px 18px 24px; gap:24px}
  .card{padding:36px 22px 32px; border-radius:20px}

  .facts{grid-template-columns:1fr; gap:20px; text-align:right}
  .facts li{flex-direction:row; align-items:flex-start; text-align:right; gap:13px}
  .facts .txt{display:flex; flex-direction:column; gap:3px}

  .countdown{gap:8px}
  .cd-unit{min-width:0; flex:1; padding:11px 6px 9px}
  .cd-unit b{font-size:1.3rem}
}

/* ================= تقليل الحركة ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .progress i{width:100%}
}