/* =========================================================
   PARSYU — TOKENS, BACKGROUND & GLOBAL FOUNDATION
   Change the variables here to retheme the entire website.
========================================================= */

/* ═══════════════════════════════════════════════════════════
   PARSYU — CINEMATIC EDITION
══════════════════════════════════════════════════════════════ */

:root{
  --bg:#05060B;
  --bg-2:#080B14;
  --surface:rgba(255,255,255,.028);
  --surface-2:rgba(255,255,255,.055);
  --surface-3:rgba(255,255,255,.09);

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);

  --text:#F5F7FA;
  --text-2:#98A2B6;
  --text-3:#5D677A;

  --indigo:#6366F1;
  --indigo-2:#818CF8;
  --cyan:#22D3EE;
  --cyan-2:#67E8F9;
  --violet:#A855F7;
  --gold:#FCD34D;
  --gold-2:#F59E0B;
  --green:#34D399;
  --rose:#FB7185;

  --grad-brand:linear-gradient(120deg,#818CF8 0%,#A855F7 45%,#22D3EE 100%);
  --grad-text:linear-gradient(105deg,#C7D2FE 0%,#D8B4FE 42%,#A5F3FC 100%);
  --grad-gold:linear-gradient(120deg,#FEF3C7 0%,#FCD34D 50%,#F59E0B 100%);

  --shadow-1:0 12px 34px -14px rgba(0,0,0,.7);
  --shadow-2:0 30px 80px -28px rgba(0,0,0,.85);
  --shadow-glow:0 30px 80px -34px rgba(99,102,241,.75);

  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;

  --container:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --font:"Vazirmatn","Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --header-h:74px;
  --header-h-m:62px;
}

@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* ═══════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  direction:ltr;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scrollbar-width:thin;
  scrollbar-color:rgba(129,140,248,.55) transparent;
}

html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(129,140,248,.75),rgba(34,211,238,.65));
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:99px;
}
html::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#818CF8,#67E8F9);
  background-clip:padding-box;
}

body{
  direction:rtl;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font:500 15px/1.75 var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor:none;
}

html.locked{overflow:hidden}
body.is-touch{cursor:auto}

a{color:inherit;text-decoration:none;cursor:none}
body.is-touch a{cursor:pointer}

button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:none}
body.is-touch button{cursor:pointer}

img,svg{display:block;max-width:100%}
ul{list-style:none}

::selection{background:rgba(99,102,241,.42);color:#fff}
:focus-visible{outline:2px solid #818CF8;outline-offset:3px;border-radius:8px}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND
═══════════════════════════════════════════════════════════ */
.bg-layer{
  position:fixed;inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}

.bg-base{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 620px at 50% -180px,rgba(99,102,241,.15),transparent 70%),
    radial-gradient(900px 620px at 100% 40%,rgba(34,211,238,.055),transparent 68%),
    radial-gradient(900px 620px at 0% 60%,rgba(168,85,247,.06),transparent 68%),
    var(--bg);
}

.bg-grid{
  position:absolute;inset:0;
  opacity:.5;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 5%,#000 10%,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 5%,#000 10%,transparent 82%);
}

.bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 20%,transparent 30%,rgba(2,3,7,.45) 75%,rgba(2,3,7,.85) 100%);
}

.bg-grain{
  position:absolute;inset:-50%;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)}
  100%{transform:translate(0,0)}
}

.aurora{
  position:absolute;
  border-radius:999px;
  filter:blur(110px);
  opacity:.55;
  will-change:transform;
}
.aurora.a{
  width:720px;height:720px;
  top:-420px;right:-220px;
  background:radial-gradient(circle,rgba(99,102,241,.55),transparent 68%);
  animation:auroraA 26s ease-in-out infinite;
}
.aurora.b{
  width:640px;height:640px;
  top:-300px;left:-260px;
  background:radial-gradient(circle,rgba(34,211,238,.32),transparent 68%);
  animation:auroraB 32s ease-in-out infinite;
}
.aurora.c{
  width:760px;height:760px;
  top:42%;left:50%;
  background:radial-gradient(circle,rgba(168,85,247,.2),transparent 70%);
  transform:translateX(-50%);
  animation:auroraC 38s ease-in-out infinite;
}

@keyframes auroraA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-90px,80px,0) scale(1.14)}
}
@keyframes auroraB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(80px,60px,0) scale(1.1)}
}
@keyframes auroraC{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.5}
  50%{transform:translateX(-42%) scale(1.16);opacity:.8}
}

.pointer-light{
  position:fixed;
  width:640px;height:640px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  background:radial-gradient(circle,rgba(99,102,241,.09),transparent 62%);
  transform:translate(-50%,-50%);
  transition:opacity .45s ease;
  will-change:transform;
}

.scroll-line{
  position:fixed;top:0;right:0;
  height:2px;width:0%;
  z-index:5000;
  background:var(--grad-brand);
  box-shadow:0 0 20px rgba(99,102,241,.9);
  transition:width .08s linear;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.container{
  width:min(calc(100% - 48px),var(--container));
  margin-inline:auto;
  position:relative;
}

.section{
  position:relative;
  padding:88px 0;
}


/* ---------- Global design knobs ---------- */
:root{
  --brand-blue:#5B8CFF;
  --brand-cyan:#36D9FF;
  --brand-violet:#9B7BFF;
  --brand-gold:#F4D35E;
  --page-max:1240px;
  --content-gap:12px;
  --scrollbar-width:7px;
}

html{direction:rtl;scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.58) transparent}
html::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:#2E3E60;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
html::-webkit-scrollbar-thumb:hover{background:#536BA0;background-clip:padding-box}

/* Keep global spacing compact; utility sites should not waste vertical space. */
.container{max-width:var(--page-max)}
.section{padding-block:clamp(58px,7vw,82px)}

/* Prevent decorative layers from interfering with interaction. */
.p-bg,.bg-layer,.pointer-light,.hero-float{pointer-events:none}