/* ════════════════════════════════════
       TOKENS
    ════════════════════════════════════ */
:root {
  --bg: #04101f;
  --bg2: #071828;
  --bg3: #0c2038;
  --bg4: #102840;
  --goodGrean: #128623;
  --accent: #02a1c9;
  --whitecolor: #ffffff;
  --coolbtn: #093f82df;
  --accent2: #6aadff;
  --accent3: #a8ccff;
  --muted: #1d4068;
  --border: rgba(61, 142, 245, 0.14);
  --border2: rgba(61, 142, 245, 0.28);
  --text: #bdd3ee;
  --light: #e6f0fc;
  --dim: #5a7ea8;
  --dim2: #3a5c80;
  --ff-fa: "Vazirmatn", sans-serif;
  --ff-en: "Space Grotesk", "Vazirmatn", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-fa);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  transition: direction 0s;
}

/* English mode overrides */
html[lang="en"] body {
  font-family: var(--ff-en);
}
html[lang="en"] .fa {
  display: none !important;
}
html[lang="en"] .en {
  display: block !important;
}
html[lang="en"] .en-inline {
  display: inline !important;
}
html[lang="en"] .fa-inline {
  display: none !important;
}
html[lang="fa"] .en {
  display: none !important;
}
html[lang="fa"] .fa {
  display: block !important;
}
html[lang="fa"] .en-inline {
  display: none !important;
}
html[lang="fa"] .fa-inline {
  display: inline !important;
}

/* ════════════════════════════════════
       SCROLLBAR
    ════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
}

/* ════════════════════════════════════
       NAV
    ════════════════════════════════════ */
#nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 64px;
  background: rgba(4, 16, 31, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}


.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--light);
  letter-spacing: 0.03em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
}
.nav-links a {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--accent2);
}

.nav-logo img {
  height: 100%;
  width: auto;
  display: block;
}
/* ── LANG TOGGLE ── */
#lang-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 100px;
  padding: 0.32rem 0.9rem;
  cursor: pointer;
  font-family: var(--ff-en);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent2);
  letter-spacing: 0.08em;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  white-space: nowrap;
}
#lang-btn:hover {
  background: var(--bg4);
  border-color: var(--accent);
  color: var(--light);
}
#lang-btn .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.nav-logo img {
  height: 54px; /* same as #nav */
  width: auto;
  border-radius: 50%;
}
/* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 80px 5vw 0;
}

#starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Glowing orb behind logo */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(61, 142, 245, 0.1) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero-logo-wrap{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.hero-logo-wrap img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    object-fit: contain;
    transform: translate(-50%, -50%);
}
.base {
  z-index: 1;
  /* no animation needed — stays fully visible blue underneath */
}

.white {
  animation: whiteWipe 7s ease-in-out infinite;
  clip-path: inset(0 100% 0 0);
  position: absolute;
  z-index: 2;
  filter: brightness(0) invert(1);
}
.white2 {
  /* animation: whiteWipe 7s ease-in-out infinite; */
  /* clip-path: inset(0 100% 0 0); */
  /* position: absolute; */
  /* z-index: 2; */
  filter: brightness(0) invert(1);
}

@keyframes whiteWipe {
  0%   { clip-path: inset(0 100% 0 0); } /* hidden */
  50%  { clip-path: inset(0 0%   0 0); } /* fully visible */
  100% { clip-path: inset(0 0   0 100%); } /* wiped out */
}
.hero-eyebrow {
  font-family: "Orbitron",  var(--ff-en);
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.35em;
text-transform: uppercase;
  color: var(--goodGrean);
  margin-bottom: 1rem;
}
@font-face {
    font-family: "Quilon";
    src: url("fonts/011c6c63f1c5303247573002f53613b4.woff2") format("woff2"),
         url("fonts/011c6c63f1c5303247573002f53613b4.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.hero-eyebrow2 {
  font-weight: 700;
  font-size: 3rem;
  box-sizing: border-box;
  padding-bottom: 0;        /* removed the 30px gap */
  margin-bottom: 0;         /* no bottom margin — blue line handles spacing */
  color: white;
  margin-top: -20px;
  position: relative;
  direction: ltr;
}
.textraper {
  position: relative;
  display: inline-block; 
    direction: ltr;
}
.blue_title {
  color: #02cafd;
  z-index: 1;
  position: relative; /* ← add this */
}

.blue_title2 {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  /* margin-top: -8.9px; ← DELETE this line */
  animation: whiteWipe 7s ease-in-out infinite;
  z-index: 2;
}
.blue_center{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.blue_line{
  min-height: 0.2rem;
  width: 3%;
  border-radius: 35%;

  min-width:32px;
  min-height:2px;
  background-color: #02cafd;
}
.hero-title {
  font-family: var(--ff-en);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--light);
  margin-bottom: 1.3rem;
}
html[lang="fa"] .hero-title {
  font-family: var(--ff-fa);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
}

.hero-title .ac {
  color: var(--accent);
}

.hero-sub {
  font-size: 1rem;
  color: var(--dim);
  max-width: 540px;
  margin: 0 auto 1.2rem;
  font-weight: 300;
  line-height: 1.75;
}

.hero-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.6rem;
}
.stack-pill {
  background: rgba(61, 142, 245, 0.07);
  border: 1px solid var(--border2);
  color: var(--accent2);
  font-size: 0.72rem;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  letter-spacing: 0.07em;
  font-family: var(--ff-en);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.stack-pill:hover {
  background: rgba(61, 142, 245, 0.14);
  border-color: var(--accent);
}

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--ff-en);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 7px;
  letter-spacing: 0.04em;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(61, 142, 245, 0);
}
.btn-primary:hover {
  background: var(--coolbtn);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(61, 142, 245, 0.28);
}
html[lang="fa"] .btn-primary {
  font-family: var(--ff-fa);
}

/* ════════════════════════════════════
       SECTION COMMONS
    ════════════════════════════════════ */
.sec {
  padding: 2rem 4vw;
}
.sec-alt {
  background: var(--bg2);
}

.sec-head {
  max-width: 600px;
  margin-bottom: 1.75rem;
}
html[lang="fa"] .sec-head {
  margin-inline-start: 0;
}
html[lang="en"] .sec-head {
  margin-inline-start: 0;
}

.sec-eye {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
  font-family: var(--ff-en);
}
.sec-title {
  font-family: var(--ff-en);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--light);
  margin-bottom: 0.8rem;
  line-height: 1.2;
}
html[lang="fa"] .sec-title {
  font-family: var(--ff-fa);
  font-weight: 900;
}
.sec-desc {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.75;
  font-weight: 300;
}
.rule {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0.9rem 0 1.6rem;
}

/* ════════════════════════════════════
       SERVICES
    ════════════════════════════════════ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}
.svc-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.7rem;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.svc-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}

.svc-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1.3rem;
}
.svc-card h3 {
  font-family: var(--ff-en);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 0.5rem;
}
html[lang="fa"] .svc-card h3 {
  font-family: var(--ff-fa);
}
.svc-card p {
  font-size: 0.83rem;
  color: var(--dim);
  line-height: 1.7;
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1rem;
}
.svc-tag {
  font-size: 0.64rem;
  background: rgba(61, 142, 245, 0.08);
  color: var(--accent2);
  border: 1px solid rgba(61, 142, 245, 0.18);
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  font-family: var(--ff-en);
}

/* ════════════════════════════════════
       PROJECTS
    ════════════════════════════════════ */

.proj-thumb {
  position: relative;
  overflow: hidden;
}

.proj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.proj-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}

.proj-card:hover .proj-thumb video {
  opacity: 1;
}

.proj-card:hover .proj-thumb img {
  opacity: 0;
}
    







    /* old */
.proj-grid {
  /* display: grid; */
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
}
.project_img{
  width: 100%;
  height: 320PX;
}
.project_img > img{
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  object-fit: cover;
}
.proj-card {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* width: 100%; */
  min-height: 380px;
  /* height: 80vh; */
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.proj-card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}
/* .proj-card.c7 {
  grid-column: span 7;
}
.proj-card.c5 {
  grid-column: span 5;
}
.proj-card.c4 {
  grid-column: span 4;
} */

.proj-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.proj-thumb svg {
  width: 100%;
  height: 100%;
}

.proj-body {
  padding: 1.4rem 1.5rem 1.7rem;
  
  text-align: center;
  /* background-color: #6aadff; */
}
.proj-tag {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
  font-family: var(--ff-en);
}
.proj-body h3 {
  font-family: var(--ff-en);
  font-size: 1rem;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 0.35rem;
}
html[lang="fa"] .proj-body h3 {
  font-family: var(--ff-fa);
}
.proj-body p {
  font-size: 0.81rem;
  color: var(--dim);
  line-height: 1.65;
}

.backGr{
   background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.99) 100%
  );
   
   /* background-color: rgb(255, 0, 0); */
}
.proj-techs {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}
.t-tag {
  font-size: 0.64rem;
  background: rgba(61, 142, 245, 0.07);
  color: var(--accent2);
  border: 1px solid rgba(61, 142, 245, 0.17);
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-family: var(--ff-en);
}

/* ════════════════════════════════════
       TEAM
    ════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem;
}
.member {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 1.4rem;
  text-align: center;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.member:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.avatar {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: rgba(61, 142, 245, 0.08);
  border: 1.5px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 1.2rem;
  box-sizing: border-box;
  color: var(--accent2);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.member h3 {
  font-family: var(--ff-fa);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--light);
  margin-bottom: 0.25rem;
}
.member-role {
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--ff-en);
  margin-bottom: 0.55rem;
}
.member p {
  font-size: 0.78rem;
  color: var(--dim);
  line-height: 1.6;
}

/* ════════════════════════════════════
       FOOTER
    ════════════════════════════════════ */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 4rem 5vw 2rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.8rem;
}
.foot-brand .nav-logo {
  margin-bottom: 0.9rem;
  display: inline-flex;
  
}
.foot-brand p {
  font-size: 0.82rem;
  color: var(--dim);
  max-width: 250px;
  line-height: 1.7;
}
.foot-col h4 {
  font-family: var(--ff-en);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
html[lang="fa"] .foot-col h4 {
  font-family: var(--ff-fa);
  letter-spacing: 0;
}
.foot-col ul {
  list-style: none;
}
.foot-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.83rem;
  color: var(--dim);
  line-height: 1.5;
}
.foot-col li a {
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.foot-col li a:hover {
  color: var(--accent2);
}
.foot-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.socials {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.soc-btn {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}
.soc-btn:hover {
  border-color: var(--accent);
  background: rgba(61, 142, 245, 0.1);
  transform: translateY(-2px);
}

.foot-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--dim2);
}

/* ════════════════════════════════════
       REVEAL ANIMATION
    ════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════ */
@media (max-width: 900px) {
  .proj-card.c7,
  .proj-card.c5,
  .proj-card.c4 {
    grid-column: span 12;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 640px) {
  .nav-links {
    display: none;
  }
  .preloader-text {
    font-size: 1.4rem !important;
    letter-spacing: 3px !important;
  }

    .smoke-1 {
    width: 120vw;
    height: 120vw;
  }

  .smoke-2 {
    width: 130vw;
    height: 130vw;
  }

  .smoke-3 {
    width: 90vw;
    height: 90vw;
  }

  .smoke-4 {
    width: 80vw;
    height: 80vw;
  }
}






/* smoke screan */


body.no-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

/*--- کادر اصلی ---*/
.site-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
  overflow: hidden;
}

@supports (-webkit-touch-callout: none) {
  .site-preloader {
    height: -webkit-fill-available;
  }
}

/* --- دود --- */
.smoke-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.9;
}

.smoke {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(160, 160, 160, 0.15) 0%,
    rgba(160, 160, 160, 0) 65%
  );
  filter: blur(40px);
  animation: floatSmoke 12s infinite alternate linear;
}

.smoke-1 {
  width: 60vw;
  height: 60vw;
  top: -15%;
  left: -15%;
  animation-duration: 20s;
  background: radial-gradient(
    circle,
    rgba(2, 161, 201, 0.12) 0%,
    rgba(2, 161, 201, 0) 65%
  );
}

.smoke-2 {
  width: 70vw;
  height: 70vw;
  bottom: -25%;
  right: -15%;
  animation-duration: 25s;
  animation-direction: alternate-reverse;
  background: radial-gradient(
    circle,
    rgba(106, 173, 255, 0.08) 0%,
    rgba(106, 173, 255, 0) 65%
  );
}

.smoke-3 {
  width: 50vw;
  height: 50vw;
  top: 40%;
  left: 40%;
  animation-duration: 18s;
  background: radial-gradient(
    circle,
    rgba(2, 161, 201, 0.12) 0%,
    rgba(2, 161, 201, 0) 65%
  );
}

.smoke-4 {
  width: 45vw;
  height: 45vw;
  top: 10%;
  right: 20%;
  animation-duration: 22s;
  animation-direction: alternate-reverse;
  background: radial-gradient(
    circle,
    rgba(106, 173, 255, 0.08) 0%,
    rgba(106, 173, 255, 0) 65%
  );
}

@keyframes floatSmoke {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(60px, -60px) scale(1.4);
  }
}

/* --- متن --- */
.preloader-content {
  position: relative;
  z-index: 2;
}
.preloader-text {
  font-size: 3.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 5px;
  display: flex;
  direction: ltr;
  justify-content: center;
  /* color: transparent; */  /* ← DELETE or COMMENT OUT this line */
}

/*--- استایل هر حرف که توسط جاوااسکریپت ساخته می‌شود ---*/
.preloader-text span {
  opacity: 0;
  color: var(--whitecolor);
  transform: translateY(20px);
  animation: letterEnter 0.5s ease forwards;
}

/*--- کلاس خروج کل متن ---*/
.preloader-text.text-exit {
  animation: textExit 0.8s cubic-bezier(0.5, 0, 0.1, 1) forwards;
}

/*--- کلاس محو کننده کل پری‌لودر ---*/
.site-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/*--- انیمیشن ورود حرف به حرف ---*/
@keyframes letterEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*--- انیمیشن خروج کل متن ---*/
@keyframes textExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.1);
    filter: blur(10px);
  }
}