:root{
  --bg:#05030e;
  --bg2:#090611;
  --card:#0c0816;
  --text:#f4efff;
  --muted:#a69db8;
  --purple:#a855f7;
  --violet:#7c3aed;
  --border:rgba(196,181,253,.12);
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Sora,Vazir,Arial,sans-serif
}

a{
  color:inherit;
  text-decoration:none
}

button{
  font:inherit
}


/* =========================
   NAVIGATION
========================= */

.nav-wrap{
  position:fixed;
  top:18px;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:0 12px
}

.logo{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1a0533,#0f0220);
  border:1px solid rgba(167,139,250,.3);
  font-weight:800;
  color:#e9d5ff;
  box-shadow:0 4px 18px #0008
}

.nav{
  display:flex;
  align-items:center;
  gap:3px;
  padding:5px 6px;
  border-radius:999px;
  background:#080316c9;
  border:1px solid rgba(124,58,237,.18);
  backdrop-filter:blur(16px);
  box-shadow:0 5px 25px #0007
}

.nav a{
  padding:8px 12px;
  border-radius:999px;
  color:#b7accb;
  font-size:12px;
  font-weight:600;
  transition:.25s
}

.nav a:hover,
.nav a.active{
  color:#eadfff;
  background:#a78bfa18
}

.nav .contact-btn{
  background:linear-gradient(135deg,var(--violet),var(--purple));
  color:white;
  margin-left:4px
}


/* =========================
   LANGUAGE SWITCH
========================= */

.lang-switch{
  display:flex;
  padding:4px;
  border-radius:999px;
  background:#080316c9;
  border:1px solid rgba(124,58,237,.18);
  backdrop-filter:blur(16px);
  box-shadow:0 5px 25px #0007;
  flex:none
}

.lang-switch button{
  padding:8px 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#b7accb;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.2s
}

.lang-switch button.active{
  background:linear-gradient(135deg,var(--violet),var(--purple));
  color:white
}

html[dir="rtl"] body{
  font-family:Vazir,Sora,Arial,sans-serif
}


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

.hero{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      #190d32 0%,
      #070411 42%,
      #05030e 75%
    )
}

#particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.5
}

.hero-glow{
  position:absolute;
  width:650px;
  height:420px;
  border-radius:50%;
  background:#7c3aed44;
  filter:blur(100px)
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(900px,92%);
  padding-top:40px
}

.availability{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid #a78bfa44;
  background:#7c3aed16;
  color:#d9c8ff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em
}

.availability span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c084fc;
  box-shadow:0 0 12px #c084fc
}

h1{
  font-size:clamp(48px,9vw,96px);
  line-height:.95;
  letter-spacing:-.06em;
  margin:28px 0 16px;
  font-weight:800
}

h1 span{
  color:#f4efff
}

h1 b{
  font-weight:800;
  background:linear-gradient(
    135deg,
    #e9d5ff,
    #a855f7,
    #7c3aed
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.type-line{
  font-size:clamp(17px,2.5vw,26px);
  color:#d8ccef;
  font-weight:500
}

.cursor{
  display:inline-block;
  width:3px;
  height:1em;
  background:#a78bfa;
  margin-left:6px;
  vertical-align:-2px;
  animation:blink 1s infinite
}

.hero-content>p{
  max-width:500px;
  margin:15px auto;
  color:#aaa0b8;
  font-size:15px;
  line-height:1.8
}

.hero-cta{
  display:inline-flex;
  margin-top:32px;
  padding:14px 28px;
  border-radius:14px;
  background:white;
  color:#6d28d9;
  font-size:13px;
  font-weight:800;
  box-shadow:0 0 30px #a855f733;
  transition:.25s
}

.hero-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 0 45px #a855f755
}

.stats{
  display:flex;
  justify-content:center;
  gap:60px;
  margin-top:60px;
  flex-wrap:wrap
}

.stats div{
  display:flex;
  flex-direction:column;
  gap:5px
}

.stats strong{
  font-size:28px;
  background:linear-gradient(135deg,#fff,#a78bfa);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.stats small{
  font-size:10px;
  color:#81788f;
  letter-spacing:.1em;
  text-transform:uppercase
}


/* =========================
   SECTIONS
========================= */

.section{
  padding:100px 24px
}

.work-section,
.faq-section{
  background:var(--bg2)
}

.section-card,
.profile-card,
.contact-card{
  max-width:1200px;
  margin:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:30px;
  padding:45px 32px;
  box-shadow:0 30px 80px #0003
}

.section-heading{
  text-align:center
}

.section-heading h2{
  font-size:clamp(28px,4vw,38px);
  margin:0 0 10px
}

.section-heading h2 span,
.profile-card h2 span{
  color:var(--purple)
}

.section-heading p{
  color:var(--muted);
  font-size:14px
}


/* =========================
   PROJECT CAROUSEL
========================= */

.carousel{
  height:530px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
  overflow:hidden
}

.project-track{
  width:100%;
  height:100%;
  position:relative
}

.project{
  position:absolute;
  width:285px;
  aspect-ratio:9/16;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:18px;
  overflow:hidden;
  border:1px solid #fff1;
  background:#050505;
  transition:
    transform .5s,
    opacity .5s,
    filter .5s;
  cursor:pointer
}


/* Thumbnail + Video */

.project img,
.project video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

/* جلوگیری از دانلود ویدیو */
.project video{
  -webkit-user-select:none;
  user-select:none;
  pointer-events:auto
}

video::-webkit-media-controls-download-button{
  display:none !important
}

video::-webkit-media-controls-enclosure{
  overflow:hidden
}

video::-internal-media-controls-overflow-button{
  display:none !important
}


/* Video داخل همان کارت */

.project-video{
  position:relative;
  z-index:1;
  background:#000
}


/* لایه گرادیان پایین کارت */

.project:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    #000d,
    transparent 60%
  );
  pointer-events:none;
  z-index:2
}


/* عنوان پروژه */

.project .label{
  position:absolute;
  z-index:6;
  bottom:16px;
  left:16px;
  font-size:13px;
  font-weight:700;
  pointer-events:none
}


/* دکمه Play */

.project .play{
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ffffff1c;
  border:1px solid #fff7;
  backdrop-filter:blur(12px);
  font-size:22px;
  transition:opacity .2s
}


/* کارت وسط */

.project.center{
  transform:translate(-50%,-50%) scale(1);
  z-index:5;
  box-shadow:0 30px 60px #000b
}


/* کارت سمت چپ */

.project.left{
  transform:
    translate(
      calc(-50% - 235px),
      -50%
    )
    scale(.8)
    rotateY(18deg);

  opacity:.7;
  z-index:3
}


/* کارت سمت راست */

.project.right{
  transform:
    translate(
      calc(-50% + 235px),
      -50%
    )
    scale(.8)
    rotateY(-18deg);

  opacity:.7;
  z-index:3
}


/* کارت‌های مخفی */

.project.hidden-left{
  transform:
    translate(
      calc(-50% - 440px),
      -50%
    )
    scale(.6)
    rotateY(35deg);

  opacity:0
}

.project.hidden-right{
  transform:
    translate(
      calc(-50% + 440px),
      -50%
    )
    scale(.6)
    rotateY(-35deg);

  opacity:0
}


/* =========================
   ARROWS
========================= */

.arrow{
  position:absolute;
  z-index:10;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid #fff2;
  background:#0008;
  color:white;
  font-size:30px;
  cursor:pointer;
  backdrop-filter:blur(10px)
}

.arrow.left{
  left:5%
}

.arrow.right{
  right:5%
}


/* =========================
   DOTS
========================= */

.dots{
  display:flex;
  justify-content:center;
  gap:8px
}

.dots button{
  width:8px;
  height:8px;
  border:0;
  border-radius:9px;
  background:#fff2;
  cursor:pointer
}

.dots button.active{
  width:30px;
  background:#06b6d4
}


/* =========================
   ABOUT
========================= */

.about-section{
  background:var(--bg)
}

.profile-card{
  display:flex;
  align-items:center;
  gap:42px;
  position:relative;
  overflow:hidden
}

.profile-photo{
  width:160px;
  height:160px;
  flex:none;
  border-radius:28px;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(
    145deg,
    #1c102b,
    #0d0815
  );
  border:1px solid #a855f744;
  color:#a78bfa;
  font-size:12px;
  font-weight:800;
  transform:rotate(-3deg)
}

.profile-card h2{
  font-size:30px
}

.profile-card p{
  max-width:650px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}

.about-stats{
  max-width:1000px;
  margin:50px auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

.about-stats>div{
  padding:24px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#0a0612
}

.about-stats strong{
  display:block;
  font-size:26px
}

.about-stats b{
  display:block;
  margin-top:8px;
  font-size:11px;
  color:#c084fc;
  text-transform:uppercase
}

.about-stats small{
  color:#6e6677
}

.tools-title{
  text-align:center;
  color:#6e6677;
  font-size:11px;
  letter-spacing:.25em;
  margin:70px 0 35px
}

.tools{
  max-width:900px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  text-align:center
}

.tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px
}

.tool b{
  font-size:12px
}

.tool span{
  color:#a855f7;
  font-size:13px;
  font-weight:800
}

.ring{
  position:relative;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#d8c5ff
}

.ring svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg)
}

.ring .ring-bg{
  fill:none;
  stroke:#a855f726;
  stroke-width:7
}

.ring .ring-fill{
  fill:none;
  stroke:var(--purple);
  stroke-width:7;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px #a855f788);
  transition:stroke-dashoffset 1.2s ease
}

.ring>span{
  position:relative;
  z-index:1;
  color:#d8c5ff;
  font-size:18px;
  font-weight:800
}


/* =========================
   FAQ
========================= */

.faq{
  max-width:850px;
  margin:40px auto 0
}

.faq details{
  border-bottom:1px solid var(--border);
  padding:20px 5px
}

.faq summary{
  cursor:pointer;
  font-weight:600;
  font-size:14px
}

.faq p{
  color:var(--muted);
  line-height:1.8;
  font-size:13px;
  max-width:700px
}


/* =========================
   CONTACT
========================= */

.contact-section{
  background:
    radial-gradient(
      circle at 50% 50%,
      #1a0d32,
      #05030e 60%
    );
  text-align:center
}

.contact-card{
  padding:80px 30px
}

.contact-card h2{
  font-size:clamp(32px,5vw,56px);
  margin:22px 0 10px
}

.contact-card p{
  color:var(--muted)
}


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

footer{
  padding:55px max(
    24px,
    calc((100% - 1200px)/2)
  );
  background:#030208;
  color:#7d7488;
  display:grid;
  grid-template-columns:1fr auto;
  gap:35px
}

footer p{
  font-size:13px;
  max-width:400px;
  line-height:1.7
}

.footer-logo{
  color:white;
  font-weight:800;
  font-size:18px
}

.footer-links{
  display:flex;
  gap:22px;
  font-size:13px
}

.footer-bottom{
  grid-column:1/-1;
  border-top:1px solid var(--border);
  padding-top:25px;
  display:flex;
  justify-content:space-between;
  font-size:12px
}

.footer-bottom div{
  display:flex;
  gap:10px
}

.footer-bottom a{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px
}


/* =========================
   ANIMATION
========================= */

@keyframes blink{
  50%{
    opacity:0
  }
}


/* =========================
   TABLET
========================= */

@media(max-width:800px){

  .nav a:not(.contact-btn){
    padding:8px 7px;
    font-size:10px
  }

  .profile-card{
    flex-direction:column;
    text-align:center
  }

  .about-stats,
  .tools{
    grid-template-columns:repeat(2,1fr)
  }

  .project.left{
    transform:
      translate(
        calc(-50% - 155px),
        -50%
      )
      scale(.72)
  }

  .project.right{
    transform:
      translate(
        calc(-50% + 155px),
        -50%
      )
      scale(.72)
  }

  .arrow.left{
    left:2%
  }

  .arrow.right{
    right:2%
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:520px){

  .logo{
    display:none
  }

  .nav{
    max-width:100%;
    overflow:auto
  }

  .nav a{
    white-space:nowrap
  }

  .lang-switch button{
    padding:8px 9px;
    font-size:10px
  }

  .stats{
    gap:25px
  }

  .carousel{
    height:480px
  }

  .project{
    width:250px
  }

  .project.left,
  .project.right{
    opacity:.35
  }

  .project.left{
    transform:
      translate(
        calc(-50% - 100px),
        -50%
      )
      scale(.65)
  }

  .project.right{
    transform:
      translate(
        calc(-50% + 100px),
        -50%
      )
      scale(.65)
  }

  footer{
    grid-template-columns:1fr
  }

  .footer-links{
    flex-wrap:wrap
  }

  .footer-bottom{
    flex-direction:column
  }
}