:root{
      --navy:#041522;
      --navy-2:#071f31;
      --navy-3:#0a2a40;
      --gold:#c99147;
      --gold-2:#e1b56f;
      --paper:#f5f5f3;
      --white:#ffffff;
      --ink:#0b1c2b;
      --muted:#687783;
      --line:#d7dcdf;
      --max:1440px;
    }

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

    html{scroll-behavior:smooth}

    body{
      font-family:"Vazirmatn",Tahoma,sans-serif;
      background:var(--paper);
      color:var(--ink);
      overflow-x:hidden;
    }

    html[lang="en"] body{
      font-family:"Inter",Arial,sans-serif;
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit}
    img{display:block;width:100%}

    .wrap{
      width:min(calc(100% - 80px),var(--max));
      margin:auto;
    }

    /* =====================================================
       HEADER
    ===================================================== */

    .site-header{
      height:76px;
      position:absolute;
      inset:0 0 auto;
      z-index:50;
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.18);
      background:linear-gradient(180deg,rgba(1,12,20,.72),rgba(1,12,20,.12));
    }

    .header-inner{
      height:100%;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:42px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:13px;
      min-width:max-content;
    }

    .brand-mark{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border:1px solid var(--gold);
      color:var(--gold-2);
      font:700 22px Arial,sans-serif;
    }

    .brand-copy{
      display:flex;
      flex-direction:column;
      gap:2px;
    }

    .brand-copy strong{
      font-size:17px;
      line-height:1.2;
    }

    .brand-copy small{
      font-size:9px;
      color:#c2cbd1;
    }

    .desktop-nav{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:32px;
      font-size:12px;
    }

    .desktop-nav a{
      position:relative;
      padding:29px 0;
      white-space:nowrap;
    }

    .desktop-nav a::after{
      content:"";
      position:absolute;
      right:50%;
      left:50%;
      bottom:0;
      height:2px;
      background:var(--gold);
      transition:.25s ease;
    }

    .desktop-nav a:hover::after,
    .desktop-nav a.active::after{
      right:0;
      left:0;
    }

    .desktop-nav a.active{
      color:var(--gold-2);
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:13px;
      direction:ltr;
    }

    .lang-btn{
      height:40px;
      min-width:72px;
      padding:0 13px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:1px solid rgba(255,255,255,.38);
      background:rgba(3,16,26,.28);
      color:#fff;
      cursor:pointer;
      font-family:Inter,Arial,sans-serif;
      font-size:12px;
      transition:.25s ease;
    }

    .lang-btn:hover{
      border-color:var(--gold);
      color:var(--gold-2);
    }

    .menu-btn{
      width:42px;
      height:42px;
      border:0;
      background:rgba(0,0,0,.25);
      display:grid;
      place-content:center;
      gap:5px;
      cursor:pointer;
    }

    .menu-btn i{
      width:19px;
      height:1px;
      background:#fff;
      display:block;
    }
/* =====================================================
   HERO — FIXED SIZE
===================================================== */

.hero{
  height:620px;
  min-height:620px;
  max-height:620px;
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
}

.hero-photo{
  position:absolute;
  inset:0;
  background:url("img/sitesh/1.jpg") center center / cover no-repeat;
  filter:saturate(.72) contrast(1.06) brightness(.82);
}



html[dir="ltr"] .hero-shade{
  background:
    linear-gradient(
      270deg,
      rgba(2,14,24,.12) 0%,
      rgba(2,14,24,.30) 42%,
      rgba(2,14,24,.94) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.02),
      rgba(0,0,0,.35)
    );
}


/* HERO CONTENT */

.hero-grid{
  height:100%;
  position:relative;
  z-index:2;

  padding-top:76px;

  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:60px;

  align-items:center;
}

.hero-copy{
  max-width:650px;
}

.eyebrow{
  display:block;
  margin-bottom:12px;

  font-size:10px;
  font-weight:500;
  letter-spacing:.5px;

  color:var(--gold-2);
}


/* HERO TITLE */

.hero h1{
  margin:0 0 16px;

  font-size:clamp(38px,4vw,60px);
  line-height:1.12;
  font-weight:700;

  letter-spacing:-1.4px;
}

html[lang="fa"] .hero h1{
  letter-spacing:-1px;
  line-height:1.35;
}


/* English hero needs to be more compact */

html[lang="en"] .hero-copy{
  max-width:690px;
}

html[lang="en"] .hero h1{
  font-size:clamp(36px,3.7vw,56px);
  line-height:1.08;
  letter-spacing:-1.8px;
}


/* GOLD TITLE */

.hero h1 em{
  font-style:normal;
  color:var(--gold);
}


/* DESCRIPTION */

.hero-copy p{
  max-width:590px;

  color:#d8e0e5;

  font-size:13px;
  line-height:1.85;
}

html[lang="en"] .hero-copy p{
  max-width:560px;
  font-size:13px;
  line-height:1.65;
}


/* HERO BUTTON */

.hero .outline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;

  min-width:215px;
  min-height:44px;

  gap:28px;

  margin-top:20px;
  padding:10px 18px;

  border:1px solid var(--gold);

  color:#fff;

  font-size:10px;
  font-weight:500;

  transition:.25s ease;
}

.hero .outline-btn:hover{
  background:var(--gold);
  color:#09131b;
}

.hero .outline-btn span{
  font-size:10px;
}

.hero .outline-btn .arrow{
  font-size:18px;
}


/* HERO STATS */

.hero-stats{
  border-inline-start:1px solid rgba(255,255,255,.22);
}

.hero-stats div{
  padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.hero-stats strong{
  display:block;

  color:var(--gold-2);

  font-size:26px;
  line-height:1.1;
  font-weight:500;
}

html[lang="en"] .hero-stats strong{
  font-family:Inter,Arial,sans-serif;
}

.hero-stats span{
  display:block;

  margin-top:4px;

  font-size:9px;
  line-height:1.45;

  color:#e3e8eb;
}


/* =====================================================
   HERO RESPONSIVE
===================================================== */

@media(max-width:1100px){

  .hero{
    height:610px;
    min-height:610px;
    max-height:610px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr) 205px;
    gap:35px;
  }

  .hero h1{
    font-size:44px;
  }

  html[lang="en"] .hero h1{
    font-size:42px;
  }

}


@media(max-width:700px){

  .hero{
    height:auto;
    min-height:720px;
    max-height:none;
  }

  .hero-grid{
    padding-top:95px;
    padding-bottom:32px;

    grid-template-columns:1fr;
    gap:28px;

    align-content:center;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero h1{
    font-size:38px;
  }

  html[lang="en"] .hero h1{
    font-size:36px;
  }

  .hero-copy p,
  html[lang="en"] .hero-copy p{
    max-width:100%;
    font-size:12px;
  }

  .hero-stats{
    display:grid;
    grid-template-columns:1fr 1fr;

    border-inline-start:0;
  }

  .hero-stats div{
    border:1px solid rgba(255,255,255,.13);
  }

}


@media(max-width:430px){

  .hero{
    min-height:760px;
  }

  .hero h1{
    font-size:33px;
  }

  html[lang="en"] .hero h1{
    font-size:31px;
  }

}


    .capabilities{
      padding:42px 0 48px;
      background:#fff;
    }

    .section-heading.center{
      text-align:center;
      margin-bottom:26px;
    }

    .section-heading span{
      font-size:12px;
      font-weight:600;
    }

    .section-heading h2{
      margin-top:8px;
      font-size:28px;
      line-height:1.45;
    }

    .capability-list{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:18px;
    }

    .cap-card{
      min-width:0;
      overflow:hidden;
      border:1px solid var(--line);
      background:#fff;
      transition:.3s ease;
    }

    .cap-card:hover{
      transform:translateY(-5px);
      box-shadow:0 17px 38px rgba(5,25,40,.1);
    }

    .cap-image{
      height:180px;
      overflow:hidden;
      background:var(--navy);
    }

    .cap-image img{
      height:100%;
      object-fit:cover;
      filter:saturate(.82);
      transition:.55s ease;
    }

    .cap-card:hover .cap-image img{
      transform:scale(1.045);
    }

    .cap-body{
      min-height:195px;
      padding:19px 20px 20px;
      position:relative;
    }

    .cap-body b{
      position:absolute;
      top:-33px;
      inset-inline-start:0;
      padding:8px 15px;
      background:#fff;
      color:var(--gold);
      font:600 25px Inter,Arial,sans-serif;
    }

    .cap-body h3{
      margin:5px 0 10px;
      font-size:18px;
    }

    .cap-body p{
      min-height:68px;
      color:#3e4a52;
      font-size:11px;
      line-height:1.9;
    }

    html[lang="en"] .cap-body p{
      line-height:1.65;
    }

    .cap-body>span{
      display:block;
      margin-top:14px;
      color:#a56e2e;
      font-size:10px;
    }

    /* =====================================================
       WAREHOUSE
    ===================================================== */

    .warehouse{
      height:445px;
      position:relative;
      overflow:hidden;
      background:var(--navy);
      color:#fff;
    }

    .warehouse-photo{
      position:absolute;
      inset:0;
      background:url("images/warehouse-goyem.jpg") center/cover no-repeat;
      filter:saturate(.68) contrast(1.06) brightness(.78);
    }

    .warehouse-shade{
      position:absolute;
      inset:0;
      background:linear-gradient(
        90deg,
        rgba(2,18,30,.07) 23%,
        rgba(2,18,30,.76) 65%,
        rgba(2,18,30,.99) 100%
      );
    }

    html[dir="ltr"] .warehouse-shade{
      background:linear-gradient(
        270deg,
        rgba(2,18,30,.07) 23%,
        rgba(2,18,30,.76) 65%,
        rgba(2,18,30,.99) 100%
      );
    }

    .warehouse-grid{
      height:100%;
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
    }

    .warehouse-copy{
      width:min(570px,49%);
    }

    .warehouse-copy h2{
      margin:8px 0 10px;
      font-size:38px;
      line-height:1.3;
    }

    .warehouse-copy>p{
      color:#d1dbe1;
      font-size:12px;
      line-height:1.9;
    }

    html[lang="en"] .warehouse-copy>p{
      line-height:1.7;
    }

    .warehouse-facts{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      margin-top:20px;
      padding-top:17px;
      border-top:1px solid rgba(255,255,255,.18);
    }

    .warehouse-facts div{
      padding:0 12px;
      border-inline-end:1px solid rgba(255,255,255,.18);
    }

    .warehouse-facts div:last-child{
      border-inline-end:0;
    }

    .warehouse-facts strong{
      display:block;
      color:var(--gold-2);
      font:600 14px Inter,Arial,sans-serif;
    }

    .warehouse-facts span{
      color:#cbd7dd;
      font-size:8px;
    }

    .gold-btn{
      min-width:165px;
      border:0;
      background:linear-gradient(90deg,#d4a259,#e4bd7c);
      color:#111;
    }

    .gold-btn:hover{
      filter:brightness(1.05);
      transform:translateY(-1px);
    }

    /* =====================================================
       NUMBERS
    ===================================================== */

    .numbers{
      background:#fff;
      border-bottom:1px solid var(--line);
    }

    .number-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
    }

    .number-item{
      padding:27px 20px;
      display:grid;
      grid-template-columns:auto 1fr;
      column-gap:16px;
      align-items:center;
      border-inline-end:1px solid var(--line);
    }

    .number-item:last-child{
      border-inline-end:0;
    }

    .number-icon{
      grid-row:1/4;
      color:#1c354b;
      font-size:34px;
    }

    .number-item strong{
      font:700 29px Inter,Arial,sans-serif;
    }

    .number-item p{
      font-size:11px;
      font-weight:600;
    }

    .number-item small{
      color:var(--muted);
      font-size:9px;
    }

    /* =====================================================
       PROJECTS + CLIENTS
    ===================================================== */

    .showcase{
      padding:30px 0;
      background:#f7f7f5;
    }

    .showcase-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:28px;
    }

    .projects-panel{
      padding-inline-end:28px;
      border-inline-end:1px solid var(--line);
    }

    .mini-head{
      margin-bottom:15px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .mini-head h2{
      font-size:17px;
    }

    .mini-head a{
      color:#9a6a30;
      font-size:9px;
      white-space:nowrap;
    }

    .project-list{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:3px;
    }

    .project-list a{
      height:185px;
      position:relative;
      overflow:hidden;
      background:var(--navy);
    }

    .project-list img{
      height:100%;
      object-fit:cover;
      filter:brightness(.72) saturate(.8);
      transition:.4s ease;
    }

    .project-list a:hover img{
      transform:scale(1.045);
      filter:brightness(.62) saturate(.9);
    }

    .project-list span{
      position:absolute;
      inset-inline:10px;
      bottom:10px;
      color:#fff;
      font-size:10px;
    }

    .project-list small{
      display:block;
      margin-top:2px;
      color:var(--gold-2);
      font-size:8px;
    }

    .client-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-top:1px solid var(--line);
      border-inline-start:1px solid var(--line);
    }

    .client-grid div{
      height:91px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      border-inline-end:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }

    .client-grid b{
      color:#164d86;
      font:700 22px Inter,Arial,sans-serif;
    }

    .client-grid span{
      max-width:135px;
      margin-top:4px;
      font-size:8px;
      line-height:1.5;
    }

    /* =====================================================
       CTA
    ===================================================== */

    .cta{
      position:relative;
      overflow:hidden;
      color:#fff;
      background:var(--navy-2);
      border-bottom:1px solid rgba(255,255,255,.14);
    }

    .cta::after{
      content:"";
      position:absolute;
      inset:0;
      opacity:.07;
      background-image:linear-gradient(30deg,transparent 48%,#fff 49%,transparent 50%);
      background-size:100px 100px;
    }

    .cta-grid{
      min-height:125px;
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.1fr 1fr auto;
      gap:50px;
      align-items:center;
    }

    .cta h2{
      font-size:25px;
      line-height:1.5;
    }

    .cta p{
      color:#ccd8df;
      font-size:11px;
      line-height:1.9;
    }

    html[lang="en"] .cta p{
      line-height:1.65;
    }

    .cta .gold-btn{
      min-width:220px;
      margin:0;
    }

    /* =====================================================
       FOOTER
    ===================================================== */

    footer{
      padding:34px 0;
      background:#03131f;
      color:#fff;
    }

    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .8fr .8fr .9fr .7fr;
      gap:45px;
    }

    .footer-brand p{
      margin-top:30px;
      color:#8fa1ac;
      font-size:8px;
    }

    .footer-grid h4{
      margin-bottom:10px;
      font-size:11px;
    }

    .footer-grid>div:not(.footer-brand){
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }

    .footer-grid a,
    .footer-grid p{
      color:#aebdc6;
      font-size:9px;
      line-height:1.9;
    }

    .socials{
      display:flex;
      gap:9px;
      direction:ltr;
    }

    .socials a{
      width:36px;
      height:36px;
      display:grid;
      place-items:center;
      border:1px solid #667985;
      color:#fff;
      font:600 13px Inter,Arial,sans-serif;
    }

    /* =====================================================
       LANGUAGE DIRECTION HELPERS
    ===================================================== */

    html[dir="ltr"] .brand,
    html[dir="ltr"] .desktop-nav,
    html[dir="ltr"] .hero-copy,
    html[dir="ltr"] .warehouse-copy,
    html[dir="ltr"] .section-heading,
    html[dir="ltr"] .cap-body,
    html[dir="ltr"] .mini-head,
    html[dir="ltr"] .cta-grid,
    html[dir="ltr"] .footer-grid{
      direction:ltr;
    }

    html[dir="ltr"] .hero-grid{
      grid-template-columns:minmax(0,1fr) 265px;
    }

    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media(max-width:1100px){
      .wrap{
        width:min(calc(100% - 40px),var(--max));
      }

      .desktop-nav{
        display:none;
        position:absolute;
        top:76px;
        inset-inline:20px;
        padding:18px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:#061b2a;
        border:1px solid rgba(255,255,255,.12);
      }

      .desktop-nav.open{
        display:flex;
      }

      .desktop-nav a{
        padding:11px 4px;
      }

      .desktop-nav a::after{
        display:none;
      }

      .hero-grid{
        grid-template-columns:1fr 215px;
        gap:35px;
      }

      .capability-list{
        grid-template-columns:repeat(2,1fr);
      }

      .warehouse-copy{
        width:62%;
      }

      .showcase-grid{
        grid-template-columns:1fr;
      }

      .projects-panel{
        padding-inline-end:0;
        border-inline-end:0;
      }

      .footer-grid{
        grid-template-columns:repeat(3,1fr);
      }
    }

    @media(max-width:700px){
      .wrap{
        width:calc(100% - 30px);
      }

      .site-header{
        height:68px;
      }

      .header-inner{
        grid-template-columns:1fr auto;
        gap:14px;
      }

      .brand{
        grid-column:2;
        grid-row:1;
      }

      html[dir="ltr"] .brand{
        grid-column:1;
      }

      .header-actions{
        grid-column:1;
        grid-row:1;
      }

      html[dir="ltr"] .header-actions{
        grid-column:2;
      }

      .brand-mark{
        width:38px;
        height:38px;
      }

      .brand-copy strong{
        font-size:14px;
      }

      .brand-copy small{
        display:none;
      }

      .desktop-nav{
        top:68px;
      }

      .hero{
        height:auto;
        max-height:none;
        min-height:760px;
      }

      .hero-grid{
        padding:105px 0 38px;
        grid-template-columns:1fr;
        align-content:center;
      }

      .hero h1{
        font-size:41px;
      }

      .hero-copy p{
        font-size:12px;
      }

      .hero-stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        border-inline-start:0;
      }

      .hero-stats div{
        padding:12px;
        border:1px solid rgba(255,255,255,.12);
      }

      .capability-list{
        grid-template-columns:1fr;
      }

      .cap-image{
        height:220px;
      }

      .warehouse{
        height:auto;
        min-height:630px;
      }

      .warehouse-shade,
      html[dir="ltr"] .warehouse-shade{
        background:linear-gradient(
          0deg,
          rgba(2,18,30,.99) 0%,
          rgba(2,18,30,.87) 52%,
          rgba(2,18,30,.13) 100%
        );
      }

      .warehouse-grid{
        align-items:flex-end;
        padding:235px 0 35px;
      }

      .warehouse-copy{
        width:100%;
      }

      .warehouse-copy h2{
        font-size:30px;
      }

      .warehouse-facts{
        grid-template-columns:1fr 1fr;
        gap:15px 0;
      }

      .number-grid{
        grid-template-columns:1fr 1fr;
      }

      .number-item:nth-child(2){
        border-inline-end:0;
      }

      .project-list{
        grid-template-columns:1fr 1fr;
      }

      .client-grid{
        grid-template-columns:1fr 1fr;
      }

      .cta-grid{
        padding:30px 0;
        grid-template-columns:1fr;
        gap:18px;
      }

      .footer-grid{
        grid-template-columns:1fr 1fr;
      }

      .footer-brand{
        grid-column:1/-1;
      }

      .lang-btn{
        height:36px;
        min-width:66px;
      }

      .menu-btn{
        width:38px;
        height:36px;
      }
    }

    @media(max-width:430px){
      .hero h1{
        font-size:35px;
      }

      .hero-stats{
        grid-template-columns:1fr;
      }

      .number-grid{
        grid-template-columns:1fr;
      }

      .number-item{
        border-inline-end:0;
        border-bottom:1px solid var(--line);
      }

      .project-list{
        grid-template-columns:1fr;
      }

      .project-list a{
        height:210px;
      }

      .footer-grid{
        grid-template-columns:1fr;
      }
    }

/* =====================================================
   PRELOADER — EXACT MUSEUM STYLE
===================================================== */
body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 138, 76, 0.12), transparent 28%),
    linear-gradient(145deg, #10171c 0%, #070d11 58%, #030608 100%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.8s linear;
}

.preloader::before,
.preloader::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.preloader::before {
  inset: 24px;
  border: 1px solid rgba(217, 173, 114, 0.18);
}

.preloader::after {
  width: min(68vw, 620px);
  height: min(68vw, 620px);
  border: 1px solid rgba(217, 173, 114, 0.08);
  transform: rotate(45deg);
  animation: loader-frame 8s linear infinite;
}

.preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(420px, calc(100% - 48px));
  text-align: center;
}

.loader-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 28px;
  border: 1px solid rgba(217, 173, 114, 0.72);
  color: #d9ad72;
  transform: rotate(45deg);
  animation: loader-emblem-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loader-emblem::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(217, 173, 114, 0.25);
  content: "";
}

.loader-emblem span {
  font-size: 33px;
  line-height: 1;
  transform: rotate(-45deg);
  animation: loader-star 2.2s ease-in-out infinite;
}

.loader-kicker,
.loader-title,
.loader-location {
  margin: 0;
}

.loader-kicker {
  color: #e4ded5;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  opacity: 0;
  animation: loader-text-in 0.7s 0.25s ease forwards;
}

.loader-title {
  margin-top: 4px;
  color: #d9ad72;
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  animation: loader-text-in 0.7s 0.38s ease forwards;
}

.loader-location {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  direction: ltr;
  opacity: 0;
  animation: loader-text-in 0.7s 0.5s ease forwards;
}

.loader-progress {
  position: relative;
  width: min(280px, 74vw);
  height: 1px;
  margin-top: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.loader-progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #866235, #d9ad72, #f0d2a4);
  box-shadow: 0 0 16px rgba(217, 173, 114, 0.58);
  transition: width 0.12s linear;
}

html[dir="ltr"] .loader-progress-bar {
  right: auto;
  left: 0;
}

.loader-percent {
  min-width: 42px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  direction: rtl;
}

@keyframes loader-emblem-in {
  from { opacity: 0; transform: rotate(15deg) scale(0.65); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

@keyframes loader-star {
  0%, 100% { opacity: 0.55; transform: rotate(-45deg) scale(0.88); }
  50% { opacity: 1; transform: rotate(-45deg) scale(1.08); }
}

@keyframes loader-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes loader-frame {
  to { transform: rotate(405deg); }
}

@media (max-width: 620px) {
  .preloader::before { inset: 12px; }
  .loader-emblem { width: 66px; height: 66px; }
  .loader-title { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader *,
  .preloader::after {
    animation: none !important;
  }
}