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

:root {
  --gold: #c9a77d;
  --gold-light: #dfc39d;
  --gold-dark: #8e6d48;
  --black: #050505;
  --white: #f7f2eb;
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Tajawal", Arial, sans-serif;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 167, 125, 0.075), transparent 28%),
    radial-gradient(circle at 15% 85%, rgba(201, 167, 125, 0.04), transparent 24%),
    #050505;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(201,167,125,.035) 50%, transparent 50.05%),
    linear-gradient(0deg, transparent 49.95%, rgba(201,167,125,.025) 50%, transparent 50.05%);
  background-size: 180px 180px;
  mask-image: radial-gradient(circle, black, transparent 72%);
  opacity: .5;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(201, 167, 125, .09);
  border-radius: 28px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 5;
  width: min(1080px, 92vw);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 55px 20px 70px;
}

.logo-wrap {
  position: relative;
  width: min(320px, 36vw);
  margin-bottom: 35px;
}

.logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(201, 167, 125, .10));
}

.logo-glow {
  position: absolute;
  width: 75%;
  height: 55%;
  left: 12.5%;
  top: 28%;
  background: rgba(201, 167, 125, .12);
  filter: blur(65px);
  border-radius: 50%;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.eyebrow span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

h1 {
  max-width: 900px;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #f8f3ec;
}

h1 strong {
  display: block;
  margin-top: 4px;
  color: var(--gold-light);
  font-weight: 800;
}

.subtitle {
  margin-top: 18px;
  color: rgba(247, 242, 235, .58);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.8;
}

.countdown {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 18px);
  margin-top: 42px;
  padding: 17px 22px;
  border: 1px solid rgba(201, 167, 125, .20);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow:
    0 20px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}

.time-card {
  min-width: clamp(65px, 8vw, 105px);
  padding: 10px 8px 7px;
  border-radius: 13px;
  border: 1px solid rgba(201, 167, 125, .12);
  background: rgba(0,0,0,.32);
}

.number {
  display: block;
  font-family: "Courier New", monospace;
  color: var(--gold-light);
  font-size: clamp(27px, 4vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(201,167,125,.18);
}

.label {
  display: block;
  margin-top: 8px;
  color: rgba(247,242,235,.46);
  font-size: 11px;
  letter-spacing: .08em;
}

.separator {
  color: rgba(201, 167, 125, .5);
  font: 700 clamp(20px, 3vw, 34px) "Courier New", monospace;
  transform: translateY(-6px);
}

.launch-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: rgba(247,242,235,.4);
  font-size: 12px;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201,167,125,.07), 0 0 12px rgba(201,167,125,.5);
  animation: pulse 2s infinite;
}

footer {
  position: absolute;
  z-index: 6;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(201,167,125,.42);
  font-size: 10px;
  letter-spacing: .14em;
  white-space: nowrap;
}

footer i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .18;
}

.ambient-1 {
  width: 420px;
  height: 420px;
  top: -240px;
  right: -170px;
  border: 1px solid rgba(201,167,125,.22);
  box-shadow: inset 0 0 90px rgba(201,167,125,.06);
}

.ambient-2 {
  width: 330px;
  height: 330px;
  bottom: -210px;
  left: -120px;
  border: 1px solid rgba(201,167,125,.17);
}

.jewelry {
  position: absolute;
  z-index: 2;
  color: rgba(201,167,125,.26);
  font-family: Georgia, serif;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(201,167,125,.15);
}

.jewelry-1 { top: 17%; left: 8%; font-size: 55px; transform: rotate(15deg); }
.jewelry-2 { top: 26%; right: 10%; font-size: 35px; }
.jewelry-3 { bottom: 20%; right: 7%; font-size: 60px; transform: rotate(-15deg); }
.jewelry-4 { bottom: 17%; left: 13%; font-size: 38px; }
.jewelry-5 { top: 10%; left: 48%; font-size: 18px; opacity: .55; }

.gold-dust span {
  position: absolute;
  z-index: 1;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 8px rgba(201,167,125,.65);
  opacity: .25;
  animation: float 6s ease-in-out infinite;
}

.gold-dust span:nth-child(1) { top: 18%; left: 24%; animation-delay: -1s; }
.gold-dust span:nth-child(2) { top: 31%; left: 16%; animation-delay: -3s; }
.gold-dust span:nth-child(3) { top: 68%; left: 8%; animation-delay: -2s; }
.gold-dust span:nth-child(4) { top: 78%; left: 27%; animation-delay: -4s; }
.gold-dust span:nth-child(5) { top: 14%; right: 23%; animation-delay: -2.5s; }
.gold-dust span:nth-child(6) { top: 39%; right: 8%; animation-delay: -4.5s; }
.gold-dust span:nth-child(7) { top: 71%; right: 19%; animation-delay: -1.5s; }
.gold-dust span:nth-child(8) { top: 84%; right: 32%; animation-delay: -3.5s; }
.gold-dust span:nth-child(9) { top: 12%; left: 39%; animation-delay: -5s; }
.gold-dust span:nth-child(10) { top: 54%; left: 4%; animation-delay: -1.2s; }
.gold-dust span:nth-child(11) { top: 57%; right: 4%; animation-delay: -2.8s; }
.gold-dust span:nth-child(12) { top: 88%; left: 43%; animation-delay: -4.2s; }
.gold-dust span:nth-child(13) { top: 24%; left: 82%; animation-delay: -1.7s; }
.gold-dust span:nth-child(14) { top: 64%; left: 87%; animation-delay: -3.8s; }
.gold-dust span:nth-child(15) { top: 42%; left: 91%; animation-delay: -5.2s; }
.gold-dust span:nth-child(16) { top: 73%; left: 39%; animation-delay: -2.2s; }
.gold-dust span:nth-child(17) { top: 29%; left: 67%; animation-delay: -4.8s; }
.gold-dust span:nth-child(18) { top: 92%; left: 67%; animation-delay: -1.9s; }
.gold-dust span:nth-child(19) { top: 9%; left: 9%; animation-delay: -3.1s; }
.gold-dust span:nth-child(20) { top: 48%; left: 76%; animation-delay: -5.8s; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .18; }
  50% { transform: translateY(-12px) scale(1.5); opacity: .5; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(201,167,125,.07), 0 0 12px rgba(201,167,125,.35); }
  50% { box-shadow: 0 0 0 9px rgba(201,167,125,.025), 0 0 20px rgba(201,167,125,.55); }
}

@media (max-width: 700px) {
  .hero::after { inset: 12px; border-radius: 18px; }
  .hero-content { padding: 38px 12px 72px; }
  .logo-wrap { width: 40vw; margin-bottom: 27px; }
  .eyebrow { font-size: 10px; gap: 8px; }
  .eyebrow span { width: 24px; }
  h1 { font-size: clamp(24px, 7.5vw, 34px); line-height: 1.5; }
  .subtitle { font-size: 13px; max-width: 310px; }
  .countdown {
    width: 100%;
    gap: 4px;
    padding: 11px 7px;
    border-radius: 15px;
    margin-top: 30px;
  }
  .time-card {
    min-width: 0;
    flex: 1;
    padding: 10px 4px 7px;
  }
  .number { font-size: clamp(20px, 7vw, 30px); }
  .label { font-size: 9px; margin-top: 6px; }
  .separator { font-size: 19px; }
  .jewelry-1 { left: 2%; font-size: 35px; }
  .jewelry-2 { right: 3%; font-size: 25px; }
  .jewelry-3 { right: 2%; font-size: 38px; }
  .jewelry-4 { left: 4%; font-size: 25px; }
  footer { bottom: 17px; font-size: 8px; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .hero-content { padding-top: 25px; padding-bottom: 55px; }
  .logo-wrap { width: min(250px, 30vw); margin-bottom: 20px; }
  .countdown { margin-top: 25px; }
}