/* ===== Fikra Com — Under Construction (Luxury Navy & Gold) ===== */

:root {
  /* Brand colors pulled from the logo */
  --navy-900: #060d1a;
  --navy-800: #0a1428;
  --navy-700: #0f1d38;
  --navy-600: #16294a;

  --gold-light: #ffe9a8;
  --gold:       #f3c14b;
  --gold-deep:  #d4a017;
  --gold-dark:  #b8860b;

  --text:  #f5f1e6;
  --muted: #b9c2d4;

  --card-bg:     rgba(13, 24, 44, 0.55);
  --card-border: rgba(243, 193, 75, 0.28);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html[lang="ar"] body { font-family: "Cairo", system-ui, sans-serif; }
html[lang="en"] body { font-family: "Poppins", system-ui, sans-serif; }

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 193, 75, 0.12), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(212, 160, 23, 0.10), transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(22, 41, 74, 0.9), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}

/* Subtle gold particles / luxury texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 233, 168, 0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 233, 168, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(243, 193, 75, 0.4), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255, 233, 168, 0.3), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ===== Language toggle ===== */
.lang-toggle {
  position: fixed;
  top: 24px;
  inset-inline-end: 24px;
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: rgba(10, 20, 40, 0.6);
  color: var(--gold-light);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.lang-toggle:hover {
  transform: scale(1.1);
  background: rgba(243, 193, 75, 0.18);
  box-shadow: 0 0 24px rgba(243, 193, 75, 0.35);
}

/* ===== Stage / Card ===== */
.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  padding: 40px 24px;
  text-align: center;
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  padding: 60px 48px 56px;
  backdrop-filter: blur(18px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 233, 168, 0.15);
  overflow: hidden;
  animation: rise 1s cubic-bezier(.2, .8, .2, 1) both;
}

/* Gilded frame accent */
.card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(243, 193, 75, 0.18);
  border-radius: 22px;
  pointer-events: none;
}

.card-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(243, 193, 75, 0.22), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
  animation: pulse 5s ease-in-out infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ===== Logo ===== */
.logo {
  position: relative;
  width: min(280px, 70%);
  height: auto;
  margin: 0 auto 30px;
  display: block;
  /* A faint oval (بيضاوي) light wash spanning the logo, just enough to
     lift the navy lettering off the dark canvas. Holds an even tone
     across the oval, then fades at its edge. Shows through the logo
     PNG's transparent areas. */
  background:
    radial-gradient(ellipse 62% 44% at 50% 50%,
      rgba(226, 236, 255, 0.15) 0%,
      rgba(226, 236, 255, 0.13) 45%,
      rgba(226, 236, 255, 0.05) 78%,
      transparent 100%);
  filter: drop-shadow(0 10px 30px rgba(243, 193, 75, 0.28));
  animation: float 5s ease-in-out infinite;
}

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

/* ===== Typography ===== */
.headline {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

/* Elegant gold divider */
.divider {
  position: relative;
  width: 200px;
  max-width: 70%;
  height: 1px;
  margin: 20px auto 24px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.divider-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 12px rgba(243, 193, 75, 0.7);
}

.subtitle {
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  color: var(--muted);
  line-height: 2;
  max-width: 440px;
  margin: 0 auto 38px;
}

/* ===== Progress bar ===== */
.progress {
  height: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(243, 193, 75, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-deep));
  box-shadow: 0 0 16px rgba(243, 193, 75, 0.5);
  animation: load 2.6s ease-in-out infinite;
}

@keyframes load {
  0%   { width: 12%; margin-inline-start: 0; }
  50%  { width: 60%; }
  100% { width: 12%; margin-inline-start: 88%; }
}

/* ===== Footer ===== */
.foot {
  margin-top: 30px;
  font-size: .85rem;
  letter-spacing: .3px;
  color: rgba(185, 194, 212, 0.75);
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .card { padding: 44px 26px 40px; }
  .card::after { inset: 8px; }
  .subtitle { line-height: 1.9; }
}