:root{
  --indigo:#111a3a;
  --indigo-2:#182650;
  --indigo-3:#25366d;
  --gold:#d6a82e;
  --gold-light:#f2cf65;
  --brown:#241713;
  --brown-2:#39231a;
  --cream:#f7f1df;
  --muted:#b9b5aa;
  --glass:rgba(255,255,255,.055);
  --border:rgba(214,168,46,.23);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:"Tajawal",sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(37,54,109,.52), transparent 34%),
    radial-gradient(circle at 85% 85%, rgba(57,35,26,.58), transparent 35%),
    linear-gradient(135deg,var(--brown),#0d1229 58%,var(--indigo));
  color:var(--cream);
  overflow-x:hidden;
}

.page-shell{
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  padding:0 6vw;
  overflow:hidden;
}

.grid-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.13;
  background-image:
    linear-gradient(rgba(214,168,46,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,168,46,.22) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}

.glow{
  position:absolute;
  width:360px;height:360px;
  border-radius:50%;
  filter:blur(85px);
  opacity:.13;
  z-index:-1;
  pointer-events:none;
}
.glow-one{background:var(--gold);top:-180px;right:12%}
.glow-two{background:#3655ba;bottom:-190px;left:5%}

.topbar{
  width:100%;
  max-width:1250px;
  margin:0 auto;
  padding:27px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  color:#e7dfc8;
  font-size:14px;
  font-weight:700;
}
.brand-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(214,168,46,.09),0 0 22px rgba(214,168,46,.5);
}
.status{
  display:flex;
  align-items:center;
  gap:9px;
  color:#aaa9a3;
  font-size:12px;
}
.status i{
  width:7px;height:7px;border-radius:50%;
  background:#d6a82e;
  box-shadow:0 0 12px #d6a82e;
  animation:blink 1.8s infinite;
}

.hero{
  width:100%;
  max-width:1250px;
  flex:1;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);
  align-items:center;
  gap:7vw;
  padding:65px 0 55px;
}

.content{max-width:730px}
.logo-wrap{
  width:120px;height:120px;
  position:relative;
  margin-bottom:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#050505;
  border:1px solid rgba(214,168,46,.55);
  box-shadow:0 18px 55px rgba(0,0,0,.35),inset 0 0 30px rgba(214,168,46,.08);
  animation:float 5s ease-in-out infinite;
}
.logo{
  width:104px;height:104px;
  object-fit:contain;
  border-radius:50%;
}
.logo-ring{
  position:absolute;
  inset:-9px;
  border:1px solid rgba(214,168,46,.16);
  border-radius:50%;
}
.logo-ring:after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--gold-light);
  top:7px;right:23px;
  box-shadow:0 0 15px var(--gold);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--gold-light);
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
  margin-bottom:17px;
}
.eyebrow span{width:27px;height:1px;background:var(--gold)}

h1{
  font-size:clamp(44px,6vw,86px);
  line-height:1.05;
  letter-spacing:-2px;
  font-weight:800;
  margin-bottom:22px;
}
h1 strong{
  display:block;
  color:transparent;
  background:linear-gradient(100deg,#fff4ce,var(--gold-light),#b98717);
  -webkit-background-clip:text;
  background-clip:text;
}

.lead{
  max-width:660px;
  color:#c2c0b8;
  font-size:clamp(16px,1.7vw,20px);
  line-height:2;
}
.lead b{color:#eee6d2}

.countdown{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  margin:38px 0 26px;
}
.time-box{
  min-width:92px;
  padding:15px 13px 13px;
  text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(214,168,46,.2);
  border-radius:17px;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 14px 35px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
}
.time-box span{
  display:block;
  color:#fff7df;
  font-size:31px;
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.time-box small{
  display:block;
  color:#9e9c96;
  margin-top:8px;
  font-size:11px;
}
.separator{
  color:var(--gold);
  font-size:26px;
  font-weight:700;
  transform:translateY(-9px);
}

.progress-card{
  max-width:620px;
  padding:17px 19px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.13);
}
.progress-head{
  display:flex;
  justify-content:space-between;
  color:#aaa9a2;
  font-size:12px;
  margin-bottom:10px;
}
.progress-head strong{color:var(--gold-light)}
.progress-track{
  height:5px;
  background:rgba(255,255,255,.08);
  border-radius:10px;
  overflow:hidden;
}
.progress-bar{
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  box-shadow:0 0 16px rgba(214,168,46,.35);
  transition:width 1s linear;
}
.note{
  color:#7f817f;
  font-size:12px;
  margin-top:18px;
}

.visual-card{
  position:relative;
  min-height:470px;
  border-radius:32px;
  padding:25px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(214,168,46,.15),transparent 25%),
    linear-gradient(145deg,rgba(30,44,91,.84),rgba(36,23,19,.92));
  border:1px solid rgba(214,168,46,.23);
  box-shadow:0 35px 90px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.09);
}
.visual-card:before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:23px;
  pointer-events:none;
}
.card-top,.card-bottom{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  color:#9b9b96;
  font-size:10px;
  letter-spacing:2px;
}
.card-top span:first-child,.card-bottom span:first-child{color:var(--gold-light)}
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 15px var(--gold);
  animation:blink 1.5s infinite;
}
.card-bottom{position:absolute;bottom:25px;left:25px;right:25px}

.symbol{
  position:absolute;
  inset:90px 40px 80px;
  display:grid;
  place-items:center;
}
.gold-orb{
  width:145px;height:145px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe59a 0 4%,#e0b33d 28%,#8f6815 75%,transparent 76%);
  filter:drop-shadow(0 0 45px rgba(214,168,46,.2));
  opacity:.9;
}
.line{
  position:absolute;
  display:block;
  border:1px solid rgba(214,168,46,.18);
  border-radius:50%;
  animation:orbit 8s linear infinite;
}
.line-a{width:260px;height:260px;transform:rotate(25deg)}
.line-b{width:330px;height:150px;transform:rotate(-28deg);animation-duration:11s}
.line-c{width:150px;height:330px;transform:rotate(36deg);animation-duration:13s}

footer{
  max-width:1250px;
  width:100%;
  margin:0 auto;
  padding:20px 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  color:#777974;
  font-size:11px;
}
.footer-line{width:45px;height:1px;background:rgba(214,168,46,.35)}

@keyframes float{50%{transform:translateY(-8px)}}
@keyframes blink{50%{opacity:.35;box-shadow:0 0 5px rgba(214,168,46,.2)}}
@keyframes orbit{to{transform:rotate(385deg)}}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:35px;padding-top:45px}
  .content{max-width:760px}
  .visual-card{min-height:330px;max-width:520px;width:100%;margin:0 auto}
  .symbol{inset:65px 30px 65px}
  .gold-orb{width:105px;height:105px}
  .line-a{width:200px;height:200px}
  .line-b{width:260px;height:120px}
  .line-c{width:120px;height:260px}
}

@media(max-width:600px){
  .page-shell{padding:0 20px}
  .topbar{padding:20px 0}
  .brand-mini{font-size:12px}
  .status{font-size:10px}
  .hero{padding:35px 0 30px}
  .logo-wrap{width:92px;height:92px;margin-bottom:23px}
  .logo{width:80px;height:80px}
  h1{font-size:46px;letter-spacing:-1.5px}
  .lead{font-size:15px;line-height:1.9}
  .countdown{gap:5px;justify-content:space-between;margin-top:28px}
  .time-box{min-width:0;width:24%;padding:13px 5px 11px;border-radius:13px}
  .time-box span{font-size:24px}
  .time-box small{font-size:9px}
  .separator{font-size:19px}
  .visual-card{min-height:270px;border-radius:24px;padding:19px}
  .card-bottom{left:19px;right:19px;bottom:19px}
  footer{font-size:9px;gap:10px}
  .footer-line{width:25px}
}

@media(max-width:380px){
  h1{font-size:39px}
  .time-box span{font-size:20px}
}