/* ==========================================================
   Rashid C – Maintenance page
   Brand colours: edit the variables below to match rashidc.ae
   ========================================================== */
:root {
  /* Primary (left plug, headline) */
  --primary:        #12354F;
  --primary-mid:    #1E6FA8;
  --primary-light:  #BFE0F5;
  --primary-dark:   #0B2A40;

  /* Accent (right plug) */
  --accent:         #D9A441;
  --accent-mid:     #E8B957;
  --accent-light:   #F6E3B5;
  --accent-dark:    #A97A1E;

  --bg:     #FFFFFF;
  --page:   #E3EAEE;
  --text:   #3A4650;
  --muted:  #6B7882;
  --line:   #E4E9EC;

  --font: "Ubuntu", "Segoe UI", Roboto, Arial, sans-serif;
}

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

html, body { height: 100%; margin: 0; }

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0rem, 4vw, 3rem);
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 1100px;
  min-height: min(640px, 100vh);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 60px -30px rgba(18, 53, 79, .25);
  overflow: hidden;
}

/* Logo */
.logo { text-align: center; padding: 2rem 1rem 0; }
.logo img { height: 79px; width: auto; max-width: 70vw; }

/* Message */
.message {
  text-align: center;
  padding: clamp(2rem, 7vw, 4.5rem) 1.25rem 0;
}
h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.01em;
}
.message p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 1rem;
  color: var(--text);
}

/* Plugs illustration */
.plugs {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
}
.plugs svg { width: 100%; height: auto; display: block; }

.cable-l { stroke: var(--primary-light); }
.cable-r { stroke: var(--accent-light); }

.plug-l { animation: nudge-l 3.2s ease-in-out infinite; }
.plug-r { animation: nudge-r 3.2s ease-in-out infinite; }
.spark  { fill: var(--accent); animation: spark 3.2s ease-in-out infinite; }
.spark.b { fill: var(--primary-mid); }

@keyframes nudge-l { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(22px); } }
@keyframes nudge-r { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(-22px); } }
@keyframes spark   { 0%, 55%, 100% { opacity: 0; } 70%, 85% { opacity: 1; } }

/* Contact footer */
.contact {
  border-top: 1px solid var(--line);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.75rem;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}
.contact a { color: var(--text); text-decoration: none; }
.contact a:hover { color: var(--primary); text-decoration: underline; }
.contact a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .contact { flex-direction: column; gap: .25rem; }
  .plugs { margin: 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .plug-l, .plug-r { animation: none; }
  .spark { animation: none; opacity: 0; }
}