/* Alsaif Gallery - Cloudflare Pages Maintenance */
:root{
  --brand:#bf1e2e;         /* primary red */
  --brand-dark:#9e1825;
  --text:#ffffff;
  --muted:rgba(255,255,255,.8);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--brand);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 2.5vw, 32px);
  position:relative;
  overflow:hidden;
}

.bg-pattern{
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.08), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.04), transparent 45%);
  filter: blur(2px);
  z-index:0;
}

.card{
  width:min(100%,1100px);
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.1));
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  padding: clamp(20px, 3.5vw, 40px);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5vw, 24px);
  z-index:1;
}

.phone{
  display:flex; align-items:center; justify-content:center;
}
.phone img{
  width:min(90vw,520px);
  height:auto;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,.35));
  animation: float 6s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
}

.content{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.brand{ opacity:.95; width:220px; height:auto; }
h1{
  margin:8px 0 0;
  font-weight:800;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing:.3px;
}
.lead{ font-size: clamp(16px, 2.2vw, 22px); color:var(--muted); margin:0; }

.meta{ display:flex; align-items:center; gap:10px; opacity:.9}
.meta .dot{ width:10px; height:10px; border-radius:50%; background:#00e676; box-shadow:0 0 0 0 rgba(0,230,118,.7); animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,230,118,.7); }
  70%{ box-shadow:0 0 0 12px rgba(0,230,118,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,230,118,0); }
}

.btn{
  display:inline-block;
  margin-top:8px;
  background:#ffffff;
  color:var(--brand);
  text-decoration:none;
  font-weight:800;
  padding:12px 22px;
  border-radius:999px;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.2); background:#f6f6f6; }

.footer{
  margin-top:18px;
  font-size:14px;
  color:var(--muted);
  text-align:center;
  z-index:1;
}

@media (min-width: 960px){
  .card{
    grid-template-columns: 1fr 1fr;
    align-items:center;
    text-align:right;
  }
  .content{ align-items:flex-start; text-align:right; }
  .brand{ align-self:flex-start; }
}