:root{
  --navy:#0d1e52;
  --red:#8d1f25;
  --text:#17213d;
  --muted:#5a6378;
  --white:#fff;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

body{
  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
  background:#fff;
  color:var(--text);
}

.screen{
  position:relative;
  width:100%;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 15% 12%,rgba(13,30,82,.045),transparent 22%),
    linear-gradient(145deg,#fff 0%,#fcfcfd 58%,#f0f2f6 100%);
}

.content{
  position:relative;
  z-index:3;
  width:min(94vw,980px);
  height:100%;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  justify-items:center;
  align-items:center;
  padding:clamp(10px,1.7vh,22px) 16px clamp(72px,9vh,96px);
  text-align:center;
}

.brand{
  width:min(54vw,520px);
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand img{
  display:block;
  width:100%;
  height:auto;
  max-height:25vh;
  object-fit:contain;
}

.status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.9vw,12px);
}

.status h1{
  margin:0 clamp(8px,1.2vw,16px);
  font-size:clamp(30px,4.8vw,60px);
  line-height:1.15;
  font-weight:800;
  color:var(--navy);
  white-space:nowrap;
}

.status span{
  width:clamp(6px,.65vw,10px);
  aspect-ratio:1;
  border-radius:50%;
  background:#d7a8ab;
}

.status span.active{background:var(--red)}

.lead{
  margin:clamp(7px,1.1vh,14px) 0 0;
  font-size:clamp(14px,1.5vw,20px);
  line-height:1.85;
  color:var(--muted);
}

.scene{
  width:min(91vw,850px);
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.illustration{
  display:block;
  width:100%;
  max-height:35vh;
  overflow:visible;
}

.contact-card{
  min-width:min(90vw,560px);
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  gap:18px;
  padding:10px 18px;
  border:1px solid rgba(13,30,82,.1);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 30px rgba(13,30,82,.08);
  backdrop-filter:blur(8px);
}

.contact-item{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--navy);
  text-decoration:none;
  font-size:clamp(14px,1.3vw,18px);
  transition:.2s ease;
}

.contact-item:hover{
  color:var(--red);
  transform:translateY(-1px);
}

.icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:var(--red);
  flex:0 0 auto;
}

.icon svg{width:100%;height:100%}

.divider{
  width:1px;
  height:28px;
  background:rgba(13,30,82,.14);
}

.decor{
  position:absolute;
  pointer-events:none;
}

.decor-one{
  width:46vw;
  height:46vw;
  right:-25vw;
  top:-18vw;
  border:38px solid rgba(13,30,82,.035);
  transform:rotate(45deg);
}

.decor-two{
  width:32vw;
  height:32vw;
  left:-18vw;
  bottom:8vh;
  border:24px solid rgba(141,31,37,.03);
  transform:rotate(45deg);
}

.dot-pattern{
  position:absolute;
  left:4vw;
  top:4vh;
  width:180px;
  height:180px;
  opacity:.14;
  background-image:radial-gradient(var(--navy) 1.5px,transparent 1.5px);
  background-size:13px 13px;
}

.bottom-wave{
  position:absolute;
  z-index:1;
  left:-3%;
  right:-3%;
  bottom:-11vh;
  height:24vh;
  background:var(--navy);
  border-radius:50% 50% 0 0/38% 38% 0 0;
  transform:rotate(-1.3deg);
  box-shadow:0 -5px 0 var(--red);
}

.gear-one{
  transform-origin:9px 18px;
  animation:spin 14s linear infinite;
}

.gear-two{
  transform-origin:6px 13px;
  animation:spin-reverse 10s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-reverse{to{transform:rotate(-360deg)}}

@media (max-width:700px){
  .screen{
    min-height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .content{
    width:100%;
    height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(5px,1.1vh,10px);
    padding:10px 12px clamp(50px,7vh,70px);
    text-align:center;
  }

  .brand{
    width:min(68vw,330px);
    margin:0 auto;
    flex:0 0 auto;
  }

  .brand img{
    width:100%;
    max-height:19vh;
    margin:0 auto;
  }

  .status{
    width:100%;
    flex:0 0 auto;
    justify-content:center;
    gap:4px;
  }

  .status h1{
    font-size:clamp(26px,8vw,38px);
    line-height:1.1;
    margin-inline:5px;
  }

  .status span:first-child,
  .status span:last-child{
    display:none;
  }

  .lead{
    width:100%;
    flex:0 0 auto;
    margin:0;
    padding-inline:8px;
    font-size:clamp(12px,3.5vw,15px);
    line-height:1.65;
    text-align:center;
  }

  .scene{
    width:min(104vw,560px);
    height:min(31vh,300px);
    min-height:155px;
    flex:0 1 auto;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }

  .illustration{
    display:block;
    width:100%;
    height:100%;
    max-height:none;
    margin:0 auto;
    object-fit:contain;
  }

  .contact-card{
    width:min(94vw,430px);
    min-width:0;
    flex:0 0 auto;
    grid-template-columns:1fr 1px 1fr;
    gap:8px;
    padding:9px 10px;
    border-radius:15px;
    margin:0 auto;
  }

  .divider{
    width:1px;
    height:25px;
    margin:0;
  }

  .contact-item{
    width:100%;
    justify-content:center;
    gap:6px;
    font-size:clamp(11px,3.2vw,14px);
    white-space:nowrap;
  }

  .icon{
    width:20px;
    height:20px;
  }

  .bottom-wave{
    bottom:-11vh;
    height:18vh;
  }

  .decor-one{
    width:85vw;
    height:85vw;
    right:-55vw;
    top:-34vw;
  }

  .dot-pattern{
    width:100px;
    height:100px;
    left:2vw;
    top:2vh;
  }
}

@media (max-width:420px){
  .content{
    gap:4px;
    padding-inline:8px;
    padding-bottom:48px;
  }

  .brand{width:min(66vw,285px)}

  .status h1{font-size:clamp(24px,7.8vw,33px)}

  .lead{
    font-size:12px;
    line-height:1.55;
  }

  .scene{
    width:108vw;
    height:min(29vh,245px);
    min-height:145px;
  }

  .contact-card{
    width:95vw;
    padding:8px 7px;
    gap:5px;
  }

  .contact-item{
    gap:4px;
    font-size:11px;
  }

  .icon{
    width:18px;
    height:18px;
  }
}

@media (max-height:690px) and (min-width:701px){
  .content{
    padding-top:6px;
    padding-bottom:56px;
  }

  .brand{
    width:min(42vw,410px);
  }

  .brand img{max-height:20vh}

  .status h1{
    font-size:clamp(30px,4vw,46px);
  }

  .lead{
    margin-top:4px;
    font-size:15px;
    line-height:1.55;
  }

  .illustration{max-height:32vh}

  .contact-card{
    padding-block:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}