:root{
  --red: #ED1C24;
  --red-dark: #C2001B;
  --black: #0B0B0C;
  --white: #ffffff;
  --gray: #6b6b6f;
}

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

html,body{
  height:100%;
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--white);
  color:var(--black);
  overflow:hidden;
}

/* ================= لودر اولیه ================= */
#loader{
  position:fixed; inset:0;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.fade-out{
  opacity:0;
  visibility:hidden;
}
.loader-box{
  position:relative;
  width:90px; height:90px;
  display:flex; align-items:center; justify-content:center;
}
.loader-ring{
  position:absolute;
  width:90px; height:90px;
  border-radius:50%;
  border:6px solid rgba(237,28,36,.15);
  border-top-color:var(--red);
  animation:spin 0.9s linear infinite;
}
.loader-dot{
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--red);
  animation:pulse-dot 1s ease-in-out infinite;
}
.loader-dot-1{ animation-delay:0s; }
.loader-dot-2{ animation-delay:.5s; opacity:.5; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse-dot{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:.3; }
}

/* ================= محتوای اصلی ================= */
main{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(237,28,36,.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(237,28,36,.06) 0%, transparent 40%),
    var(--white);
}
main.hidden{ display:none; }

.bg-shapes{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.shape{
  position:absolute; border-radius:50%;
  background:var(--black);
  opacity:.04;
}
.shape-1{ width:340px; height:340px; top:-100px; right:-100px; background:var(--red); opacity:.08; }
.shape-2{ width:260px; height:260px; bottom:-80px; left:-60px; }
.shape-3{ width:120px; height:120px; bottom:15%; right:8%; background:var(--red); opacity:.06; }

.content{
  position:relative; z-index:1;
  text-align:center;
  padding:24px;
  max-width:640px;
  animation:rise-in .8s ease both;
}
@keyframes rise-in{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

.logo-wrap{
  display:flex; justify-content:center; margin-bottom:8px;
}
.logo-mark{
  display:flex;
  align-items:center;
  gap:18px;
  animation:logo-bounce 3.2s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(237,28,36,.2));
}
@keyframes logo-bounce{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-2deg); }
}

.logo-text{
  display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.15;
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif;
  font-weight:900;
  white-space:nowrap;
}
.word-red{ color:var(--red); font-size:clamp(40px, 8vw, 58px); white-space:nowrap; }
.word-black{ color:var(--black); font-size:clamp(40px, 8vw, 58px); white-space:nowrap; }

.logo-face{ width:78px; height:auto; overflow:visible; }
.logo-face .eye{
  fill:var(--red);
  transform-box:fill-box;
  transform-origin:center;
  animation:eye-blink 4.5s ease-in-out infinite;
}
.logo-face .eye:nth-of-type(2){ animation-delay:.08s; }
.logo-face .smile{
  fill:none;
  stroke:var(--red);
  stroke-width:16;
  stroke-linecap:round;
}
@keyframes eye-blink{
  0%, 92%, 100%{ transform:scaleY(1); }
  95%{ transform:scaleY(.15); }
}

.tagline{
  font-size:clamp(22px, 4vw, 34px);
  font-weight:800;
  color:var(--black);
  margin-bottom:10px;
}
.tagline::after{
  content:'';
  display:block;
  width:56px; height:4px;
  background:var(--red);
  border-radius:2px;
  margin:14px auto 0;
}

.sub{
  color:var(--gray);
  font-size:15px;
  margin-bottom:34px;
  line-height:1.9;
}

.countdown{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:30px;
}
.cd-item{
  background:var(--black);
  color:var(--white);
  border-radius:14px;
  min-width:76px;
  padding:14px 10px;
  position:relative;
  overflow:hidden;
}
.cd-item::before{
  content:'';
  position:absolute; top:0; right:0; left:0; height:3px;
  background:var(--red);
}
.cd-num{
  display:block;
  font-size:26px;
  font-weight:800;
  font-variant-numeric: tabular-nums;
}
.cd-label{
  display:block;
  font-size:12px;
  color:#c9c9cc;
  margin-top:6px;
}

.footer-note{
  font-size:12px;
  color:#a5a5aa;
}

@media (max-width:480px){
  .cd-item{ min-width:64px; padding:10px 6px; }
  .cd-num{ font-size:20px; }
  .logo{ width:130px; }
}