@font-face {
  font-family: Inter;
  src: url("assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("assets/VazirmatnVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: Vazirmatn, system-ui, sans-serif;
  color: #231e2c;
  background: #f8f6f3;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #fff 0%, #f8f6f3 76%);
}

.shell { flex: 1; width: min(1220px, calc(100% - 96px)); margin-inline: auto; padding-bottom: 48px; }

.site-header {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e1d9d8;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: .95rem;
  font-weight: 700;
}

.brand img {
  display: block;
  width: clamp(62px, 8vw, 92px);
  height: auto;
}

.site-domain { color: #605969; font: 500 .8rem Inter, system-ui, sans-serif; }
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
  margin: clamp(38px, 5vw, 74px) auto clamp(35px, 5vw, 65px);
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.7vw, 4.4rem);
  font-weight: 850;
  line-height: 1.3;
}

h1 span { color: #ae283d; }
.intro p { margin: 12px 0 0; color: #5c5361; font-size: clamp(.96rem, 2vw, 1.15rem); }

.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.service {
  --accent: #443a9b;
  --terrain: #e2ddff;
  --scene-edge: #f2eeff;
  --pattern: #59519b32;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dfdae8;
  border-radius: 26px;
  box-shadow: 0 16px 30px #40314c0b;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.devices {
  --accent: #a1263e;
  --terrain: #f7ccd0;
  --scene-edge: #fff0eb;
  --pattern: #a7425532;
  border-color: #eddbde;
}

.service:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 32px #40314c16; }
.service:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 254px;
  margin: 9px 0 9px 9px;
  border-radius: 19px;
  background:
    radial-gradient(circle, var(--pattern) 1px, transparent 1.5px) center / 17px 17px,
    radial-gradient(ellipse at 50% 54%, var(--terrain), var(--scene-edge) 78%);
}

.orbit {
  position: absolute;
  width: min(78%, 355px);
  height: 53%;
  border: 1px solid var(--pattern);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.orbit-inner { width: min(63%, 288px); height: 38%; }
.device-scene .orbit { transform: rotate(13deg); }

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: shimmer 4.8s ease-in-out;
}

.spark-one { left: 22%; top: 41%; }
.spark-two { right: 20%; top: 33%; animation-delay: -.8s; }
.spark-three { left: 33%; bottom: 21%; opacity: .55; animation-delay: -1.8s; }

.cloud-art {
  position: absolute;
  width: 172px;
  height: 76px;
  margin: 24px 30px 0 0;
  isolation: isolate;
  border-radius: 100px;
  background: linear-gradient(155deg, #aba6f3, #6760c3);
  box-shadow: inset 0 -3px 9px #3a328e44, 0 14px 28px #51438c3d;
  animation: float 4.8s ease-in-out;
}

.cloud-art::before, .cloud-art::after {
  position: absolute;
  z-index: -1;
  content: "";
  border-radius: 50%;
}

.cloud-art::before {
  width: 90px;
  height: 90px;
  left: 28px;
  top: -53px;
  background: linear-gradient(145deg, #cdc6ff, #a69def 64%);
}

.cloud-art::after {
  width: 65px;
  height: 65px;
  right: 14px;
  top: -25px;
  background: linear-gradient(150deg, #c1b9ff, #9188dd 67%);
}

.folder-art {
  position: absolute;
  width: 100px;
  height: 65px;
  margin: 68px 0 0 92px;
  transform: rotate(-9deg);
  border-radius: 9px;
  background: linear-gradient(150deg, #fff, #ded7ff 69%, #b7acee);
  box-shadow: inset 0 1px #fff, inset 0 -2px #a69cdd, 0 9px 22px #4a3c8f58;
}

.folder-art::before {
  position: absolute;
  top: -13px;
  width: 46px;
  height: 14px;
  content: "";
  background: #e8e1ff;
  border-radius: 7px 9px 0 0;
}

.folder-art i {
  position: absolute;
  bottom: 18px;
  left: 16px;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background: #544aab99;
}

.folder-art i + i { width: 16px; bottom: 12px; }

.hero-device {
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 32px 12px;
  background: radial-gradient(ellipse at center, #f4ddd8, transparent 72%);
}

.hero-device .v100-device {
  width: min(96%, 340px);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-device .v100-device {
    animation: v100-bob 5s ease-in-out infinite;
    transition: translate 480ms ease-in-out;
  }

  .hero-device:hover .v100-device {
    translate: 0 -20px;
  }
}

@keyframes v100-bob {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
}

.shield-art {
  --shield: polygon(50% 0, 93% 14%, 91% 55%, 84% 70%, 71% 85%, 50% 100%, 29% 85%, 16% 70%, 9% 55%, 7% 14%);
  position: absolute;
  width: 136px;
  height: 145px;
  margin-left: 4px;
  filter: drop-shadow(0 14px 15px #a13b5445);
  animation: float 4.8s ease-in-out;
}

.shield-art::before, .shield-art::after, .shield-art i {
  position: absolute;
  inset: 0;
  content: "";
  clip-path: var(--shield);
}

.shield-art::before { background: linear-gradient(135deg, #ffe1d7, #e99298 53%, #ae4b64); }
.shield-art::after { inset: 8px; background: linear-gradient(135deg, #a44560, #f7acaa); }
.shield-art i { z-index: 1; inset: 11px; background: linear-gradient(135deg, #ffdad5, #cf6a80 76%); }

.pin-art {
  position: absolute;
  z-index: 2;
  width: 33px;
  height: 33px;
  margin: 0 0 18px 4px;
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 12%;
  background: #80223f;
  box-shadow: 0 2px #fcbabe;
  animation: float-pin 4.8s ease-in-out;
}

.pin-art::after {
  position: absolute;
  inset: 10px;
  content: "";
  border: 2px solid #ffe3df;
  border-radius: 50%;
}

@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes float-pin { 50% { transform: translateY(-6px) rotate(-45deg); } }
@keyframes shimmer { 50% { opacity: .35; } }

.service-copy { display: flex; flex-direction: column; padding: clamp(19px, 2.6vw, 37px); }

.service-type {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 740;
}

h2 { margin: 0; font-size: clamp(1.55rem, 2.65vw, 2.45rem); font-weight: 830; line-height: 1.25; }
.service-description { margin: 10px 0 22px; color: #5c5361; font-size: .9375rem; line-height: 1.85; }

.service-action {
  display: flex;
  align-self: flex-start;
  min-height: 42px;
  margin-top: auto;
  padding: 4px 15px 4px 11px;
  align-items: center;
  gap: 12px;
  border-radius: 30px;
  background: var(--accent);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}

.arrow {
  font: 500 1.1rem Inter, system-ui, sans-serif;
  transition: transform .24s ease;
}

.service:hover .arrow, .service:focus-visible .arrow { transform: translateX(-3px); }

.site-footer {
  padding: 32px clamp(20px, 5vw, 64px) 18px;
  border-block-start: 3px solid #e50000;
  background: #000;
  color: #c5c5c5;
  font-size: 13px;
  line-height: 1.8;
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px 36px;
  max-inline-size: 1120px;
  margin-inline: auto;
}

.site-footer h2 { margin: 0 0 8px; color: #fff; font-size: 15px; }
.site-footer p { margin: 6px 0 0; }

.site-footer address {
  display: grid;
  justify-items: start;
  gap: 5px;
  font-style: normal;
}

.site-footer a { color: #fff; overflow-wrap: anywhere; }
.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.site-footer .footer-copyright {
  max-inline-size: 1120px;
  margin: 24px auto 0;
  padding-block-start: 14px;
  border-block-start: 1px solid #303030;
  font-size: 12px;
}

@media (max-width: 640px) {
  .footer-content { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .intro, .service {
    animation: welcome-in 520ms ease-out backwards;
  }

  .service { animation-delay: 140ms; }
  .service + .service { animation-delay: 250ms; }
  .service:focus-visible { animation: none; }
}

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

@media (max-width: 1020px) {
  .shell { width: min(670px, calc(100% - 48px)); }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
  .hero-device { min-height: 0; }
  .hero-device .v100-device { width: min(92%, 280px); }
  .services { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scene { min-height: 208px; }
}

@media (max-width: 520px) {
  .shell { width: calc(100% - 36px); }
  .site-header { min-height: 68px; gap: 9px; }
  .brand { gap: 8px; font-size: .79rem; }
  .site-domain { font-size: .7rem; }
  .intro { margin: 44px 0 30px; }
  .service { grid-template-columns: minmax(0, 1fr); }
  .scene { grid-row: 1; min-height: 168px; margin: 8px 8px 0; }
  .service-copy { padding: 18px 20px 21px; }
  .service-description { margin-bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .service:hover { transform: none; }
}