@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --milli-black:#020202;
  --milli-gold:#d6a83f;
  --milli-gold-bright:#f6d681;
  --milli-gold-pale:#ffe6a4;
  --milli-text:#f5f0e6;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--milli-black)}
body.milli-landing-page{overflow:hidden;font-family:"Vazirmatn",Tahoma,sans-serif;color:var(--milli-text)}
body.milli-landing-page .flash-stack{z-index:30}

.milli-landing{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(131,86,15,.09) 0%,rgba(20,13,3,.035) 26%,transparent 53%),
    linear-gradient(180deg,#010101 0%,#050403 48%,#010101 100%);
}

.gold-wave-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-5;pointer-events:none}

.milli-noise{
  position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

.milli-vignette{
  position:absolute;inset:-2px;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.17) 23%,rgba(0,0,0,.04) 55%,rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse at center,transparent 22%,rgba(0,0,0,.07) 48%,rgba(0,0,0,.73) 100%);
}

.milli-hero{
  position:relative;
  width:min(760px,calc(100vw - 36px));
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:2;
  padding:36px 24px 44px;
  transform:translateY(-1.8vh);
}

.milli-brand-wrap{
  display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateY(12px) scale(.985);
  animation:milliReveal 1s .08s cubic-bezier(.2,.8,.2,1) forwards;
}

.milli-mark{
  width:clamp(118px,10vw,158px);
  height:auto;
  display:block;
  filter:
    drop-shadow(0 0 1px rgba(255,237,182,.78))
    drop-shadow(0 0 18px rgba(225,169,51,.20))
    drop-shadow(0 18px 40px rgba(0,0,0,.48));
  animation:milliFloat 6.8s ease-in-out infinite;
  user-select:none;
}

.milli-name{
  margin:4px 0 0;
  padding-inline-start:.48em;
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:clamp(1.18rem,2vw,1.58rem);
  line-height:1;
  letter-spacing:.48em;
  font-weight:500;
  color:#d7ae59;
  text-shadow:0 0 23px rgba(205,151,37,.13);
}

.milli-divider{
  width:min(445px,74vw);
  height:1px;
  margin:28px 0 0;
  position:relative;
  overflow:visible;
  background:linear-gradient(90deg,transparent,rgba(196,144,34,.14) 14%,rgba(237,197,96,.43) 50%,rgba(196,144,34,.14) 86%,transparent);
  opacity:0;animation:milliFade 1s .34s ease forwards;
}
.milli-divider span{
  position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%) rotate(45deg);
  background:#f4d479;box-shadow:0 0 13px rgba(244,199,87,.72);
}

.milli-intro{
  margin:27px auto 0;
  max-width:660px;
  color:#f1ecdf;
  font-size:clamp(1.08rem,1.9vw,1.45rem);
  font-weight:500;
  line-height:2;
  letter-spacing:-.02em;
  text-shadow:0 3px 28px rgba(0,0,0,.94);
  opacity:0;transform:translateY(10px);
  animation:milliReveal .95s .42s cubic-bezier(.2,.8,.2,1) forwards;
}

.dashboard-entry{
  margin-top:31px;
  min-width:286px;
  height:66px;
  padding:0 20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  direction:rtl;
  color:#fff8e8;
  text-decoration:none;
  font-size:.98rem;
  font-weight:700;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(247,205,101,.78);
  background:
    linear-gradient(180deg,rgba(212,158,39,.24),rgba(89,57,5,.10)),
    rgba(7,7,6,.80);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,242,196,.27),
    inset 0 -1px 0 rgba(109,69,8,.18),
    0 0 0 1px rgba(83,52,5,.15),
    0 14px 52px rgba(0,0,0,.48),
    0 0 31px rgba(224,167,41,.24),
    0 0 74px rgba(224,167,41,.10);
  opacity:0;transform:translateY(12px);
  animation:milliReveal .95s .61s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.dashboard-entry::before{
  content:"";position:absolute;top:-45%;bottom:-45%;width:54px;left:-86px;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,242,198,.29),transparent);
  transition:left .7s ease;
}
.dashboard-entry::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 38%,transparent 68%,rgba(230,175,47,.055));
}
.dashboard-entry>span,.dashboard-entry>svg{position:relative;z-index:1}
.dashboard-entry svg{width:22px;height:22px;fill:none;stroke:var(--milli-gold-bright);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.dashboard-entry:hover{
  transform:translateY(-4px) scale(1.012);
  border-color:rgba(255,223,135,.98);
  background:linear-gradient(180deg,rgba(225,172,48,.31),rgba(103,69,10,.14)),rgba(8,8,7,.86);
  box-shadow:inset 0 1px 0 rgba(255,242,196,.34),0 18px 58px rgba(0,0,0,.52),0 0 45px rgba(229,175,48,.29),0 0 90px rgba(210,145,24,.11);
}
.dashboard-entry:hover::before{left:calc(100% + 52px)}
.dashboard-entry:hover svg{transform:translateX(-4px)}
.dashboard-entry:focus-visible{outline:2px solid var(--milli-gold-pale);outline-offset:5px}

.entry-chart{width:22px;height:22px;display:flex!important;align-items:flex-end;justify-content:center;gap:2.5px;direction:ltr}
.entry-chart i{display:block;width:3px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#ffe59c,#c58a22);box-shadow:0 0 7px rgba(238,185,65,.15)}
.entry-chart i:nth-child(1){height:8px}.entry-chart i:nth-child(2){height:14px}.entry-chart i:nth-child(3){height:19px}

@keyframes milliReveal{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes milliFade{to{opacity:1}}
@keyframes milliFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:680px){
  .milli-hero{width:min(100%,calc(100vw - 20px));min-height:460px;padding:26px 12px 34px;transform:translateY(-2vh)}
  .milli-mark{width:110px}
  .milli-name{font-size:1.08rem;letter-spacing:.42em;padding-inline-start:.42em}
  .milli-divider{width:min(330px,78vw);margin-top:24px}
  .milli-intro{margin-top:24px;font-size:1.02rem;line-height:1.95;max-width:94%}
  .dashboard-entry{margin-top:27px;min-width:244px;height:59px;font-size:.91rem;padding-inline:18px}
}

@media(max-height:640px) and (min-width:681px){
  .milli-hero{transform:translateY(0);min-height:auto;padding-block:20px}
  .milli-mark{width:102px}
  .milli-divider{margin-top:20px}.milli-intro{margin-top:20px}.dashboard-entry{margin-top:23px;height:58px}
}

@media(prefers-reduced-motion:reduce){
  .milli-mark,.milli-brand-wrap,.milli-divider,.milli-intro,.dashboard-entry{animation:none!important}
  .milli-brand-wrap,.milli-divider,.milli-intro,.dashboard-entry{opacity:1;transform:none}
}