/* =========================================================
   XSYN — SHARED DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   00. XSYN FONT
   ========================================================= */

@font-face {
  font-family: "Vazirmatn";

  src:
    url("../assets/fonts/Vazirmatn-Regular.woff2")
    format("woff2");

  font-style: normal;

  font-weight: 400;

  font-display: swap;
}


@font-face {
  font-family: "Vazirmatn";

  src:
    url("../assets/fonts/Vazirmatn-Bold.woff2")
    format("woff2");

  font-style: normal;

  font-weight: 700;

  font-display: swap;
}


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

  --bg: #030a16;
  --bg-2: #071322;

  --surface: #0a1728;
  --surface-2: #0d1c30;

  --text: #f4f7fb;
  --text-soft: #b7c2d0;
  --text-muted: #76869a;

  --silver: #dce3eb;

  --blue: #169cff;
  --blue-bright: #39b4ff;
  --blue-dark: #0b67a9;

  --line: rgba(255,255,255,.08);

  --border: rgba(146,170,198,.16);

  --border-blue: rgba(22,156,255,.28);

  --shadow:
    0 24px 70px rgba(0,0,0,.34);

  --shadow-soft:
    0 14px 36px rgba(0,0,0,.22);

  --container: 1180px;

  --radius: 18px;
}


/* =========================================================
   02. RESET / BASE
   ========================================================= */

* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}


html {

  scroll-behavior: smooth;

  background:
    var(--bg);
}


body {

  font-family:
    "Vazirmatn",
    Arial,
    Tahoma,
    sans-serif;

  font-weight: 400;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(22,156,255,.07),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 28%,
      rgba(22,156,255,.038),
      transparent 28%
    ),
    var(--bg);

  color:
    var(--text);

  line-height:
    1.9;

  min-height:
    100vh;

  overflow-x:
    hidden;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  text-rendering:
    optimizeLegibility;

  -webkit-text-size-adjust:
    100%;
}


a {

  color:
    inherit;

  text-decoration:
    none;
}


button,
input,
textarea,
select {

  font-family:
    inherit;

  font-size:
    inherit;
}


button {

  border:
    0;
}


img {

  display:
    block;

  max-width:
    100%;

  height:
    auto;
}


::selection {

  background:
    rgba(22,156,255,.24);

  color:
    var(--text);
}


.container {

  width:
    min(
      var(--container),
      calc(100% - 40px)
    );

  margin:
    0 auto;
}


/* =========================================================
   03. SHARED TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    "Vazirmatn",
    Arial,
    Tahoma,
    sans-serif;

  font-weight:
    700;

  text-wrap:
    balance;

  overflow-wrap:
    break-word;
}


p,
li,
a,
button,
input,
textarea,
select {

  font-family:
    "Vazirmatn",
    Arial,
    Tahoma,
    sans-serif;
}


p {

  overflow-wrap:
    break-word;
}


/* =========================================================
   04. SHARED HEADER
   ========================================================= */

header {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  background:
    rgba(3,10,22,.94);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid var(--line);
}


.nav {

  height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  position:
    relative;

  direction:
    ltr;
}


/* =========================================================
   05. BRAND
   ========================================================= */

.brand {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  transform:
    translate(-50%,-50%);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  z-index:
    5;

  flex-shrink:
    0;
}


.brand-logo {

  width:
    165px;

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

  transition:
    opacity .22s ease,
    transform .22s ease;
}


.brand:hover .brand-logo {

  opacity:
    .96;

  transform:
    scale(1.015);
}


/* =========================================================
   06. DESKTOP NAVIGATION
   ========================================================= */

.nav-links {

  order:
    3;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  direction:
    rtl;

  color:
    var(--text-soft);

  font-size:
    15px;

  font-weight:
    400;

  white-space:
    nowrap;
}


.nav-link {

  position:
    relative;

  height:
    76px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 11px;

  border:
    1px solid transparent;

  border-radius:
    9px;

  color:
    var(--text-soft);

  background:
    transparent;

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}


.nav-link::after {

  content:
    "";

  position:
    absolute;

  right:
    11px;

  left:
    11px;

  bottom:
    10px;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue-bright),
      transparent
    );

  border-radius:
    999px;

  transform:
    scaleX(.15);

  transform-origin:
    center;

  opacity:
    0;

  box-shadow:
    0 0 11px
    rgba(57,180,255,.45);

  transition:
    transform .22s ease,
    opacity .22s ease;
}


.nav-link:hover {

  color:
    var(--blue-bright);

  background:
    linear-gradient(
      180deg,
      rgba(22,156,255,.075),
      rgba(22,156,255,.025)
    );

  border-color:
    rgba(57,180,255,.12);

  transform:
    translateY(-1px);

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.10);
}


.nav-link:hover::after {

  opacity:
    1;

  transform:
    scaleX(1);
}


.nav-link.active {

  color:
    var(--text);

  font-weight:
    700;

  background:
    linear-gradient(
      180deg,
      rgba(22,156,255,.065),
      rgba(22,156,255,.018)
    );

  border-color:
    rgba(57,180,255,.10);
}


.nav-link.active::after {

  opacity:
    1;

  transform:
    scaleX(1);
}


/* =========================================================
   07. NAV ITEM / ARROW
   ========================================================= */

.nav-item {

  position:
    relative;
}


.arrow {

  font-size:
    12px;

  line-height:
    1;

  opacity:
    .68;

  color:
    var(--text-soft);

  transition:
    transform .22s ease,
    color .22s ease,
    opacity .22s ease;
}


.nav-item:hover .arrow {

  color:
    var(--blue-bright);

  opacity:
    1;

  transform:
    rotate(180deg);
}


/* =========================================================
   08. DROPDOWN
   ========================================================= */

.dropdown {

  position:
    absolute;

  top:
    71px;

  right:
    50%;

  transform:
    translateX(50%)
    translateY(8px);

  width:
    300px;

  padding:
    9px;

  background:
    rgba(7,19,34,.985);

  border:
    1px solid var(--line);

  border-radius:
    14px;

  box-shadow:
    var(--shadow);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .20s ease,
    transform .20s ease;
}


.nav-item:hover .dropdown {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateX(50%)
    translateY(0);
}


.dropdown::before {

  content:
    "";

  position:
    absolute;

  top:
    -5px;

  left:
    50%;

  width:
    9px;

  height:
    9px;

  transform:
    translateX(-50%)
    rotate(45deg);

  background:
    rgba(7,19,34,.985);

  border-left:
    1px solid var(--line);

  border-top:
    1px solid var(--line);
}


.dropdown a {

  position:
    relative;

  display:
    block;

  padding:
    12px 13px;

  border-radius:
    9px;

  color:
    var(--text);

  transition:
    background .20s ease,
    color .20s ease,
    transform .20s ease;
}


.dropdown a:hover {

  background:
    linear-gradient(
      90deg,
      rgba(22,156,255,.115),
      rgba(22,156,255,.028)
    );

  color:
    var(--text);

  transform:
    translateX(-3px);
}


.dropdown strong {

  display:
    block;

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.75;

  margin-bottom:
    2px;
}


.dropdown span {

  display:
    block;

  direction:
    ltr;

  text-align:
    right;

  color:
    var(--text-muted);

  font-size:
    10px;

  letter-spacing:
    .25px;

  line-height:
    1.5;
}


/* =========================================================
   09. NAV ACTIONS
   ========================================================= */

.nav-actions {

  order:
    1;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  direction:
    ltr;

  flex-shrink:
    0;
}


/* =========================================================
   10. SEARCH BUTTON
   ========================================================= */

.search-btn {

  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--text-soft);

  border:
    1px solid var(--line);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.008);

  font-size:
    18px;

  line-height:
    1;

  text-decoration:
    none;

  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    transform .20s ease,
    box-shadow .20s ease;
}


.search-btn:hover {

  color:
    var(--blue-bright);

  border-color:
    rgba(57,180,255,.34);

  background:
    rgba(22,156,255,.07);

  transform:
    translateY(-1px);

  box-shadow:
    0 0 18px
    rgba(22,156,255,.07);
}


/* =========================================================
   11. PRIMARY BUTTON
   ========================================================= */

.primary-btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px 17px;

  border:
    1px solid rgba(57,180,255,.42);

  border-radius:
    9px;

  color:
    var(--text);

  background:
    linear-gradient(
      180deg,
      rgba(22,156,255,.10),
      rgba(22,156,255,.045)
    );

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.5;

  transition:
    color .20s ease,
    background .20s ease,
    border-color .20s ease,
    transform .20s ease,
    box-shadow .20s ease;
}


.primary-btn:hover {

  color:
    #ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(22,156,255,.17),
      rgba(22,156,255,.075)
    );

  border-color:
    rgba(57,180,255,.68);

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 24px
    rgba(22,156,255,.08);
}


/* =========================================================
   12. ACCESSIBILITY / FOCUS
   ========================================================= */

.nav-link:focus-visible,
.search-btn:focus-visible,
.primary-btn:focus-visible,
.mobile-toggle:focus-visible,
.dropdown a:focus-visible,
.mobile-menu a:focus-visible {

  outline:
    2px solid var(--blue-bright);

  outline-offset:
    3px;
}


/* =========================================================
   13. MOBILE TOGGLE
   ========================================================= */

.mobile-toggle {

  display:
    none;

  width:
    40px;

  height:
    40px;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--line);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.008);

  color:
    var(--text);

  font-size:
    20px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    transform .20s ease;
}


.mobile-toggle:hover {

  color:
    var(--blue-bright);

  border-color:
    rgba(57,180,255,.35);

  background:
    rgba(22,156,255,.06);

  transform:
    translateY(-1px);
}


/* =========================================================
   14. MOBILE MENU
   ========================================================= */

.mobile-menu {

  display:
    none;
}


.mobile-item > a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    14px 4px;

  color:
    var(--text-soft);

  border-bottom:
    1px solid var(--line);

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.8;

  transition:
    color .20s ease,
    background .20s ease;
}


.mobile-item > a:hover {

  color:
    var(--blue-bright);

  background:
    rgba(22,156,255,.025);
}


.mobile-sub {

  display:
    none;

  padding:
    5px 12px 10px;
}


.mobile-sub a {

  display:
    block;

  padding:
    9px 8px;

  color:
    var(--text-muted);

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.8;

  border-radius:
    7px;

  transition:
    color .20s ease,
    background .20s ease,
    transform .20s ease;
}


.mobile-sub a:hover {

  color:
    var(--text-soft);

  background:
    rgba(22,156,255,.045);

  transform:
    translateX(-2px);
}


.mobile-item.open .mobile-sub {

  display:
    block;
}


/* =========================================================
   15. SHARED FOOTER
   ========================================================= */

footer {

  padding:
    35px 0;

  border-top:
    1px solid var(--line);

  color:
    var(--text-muted);

  font-size:
    13px;

  background:
    rgba(3,10,22,.42);
}


.footer-brand {

  display:
    inline-flex;

  align-items:
    center;

  direction:
    ltr;
}


.footer-brand img {

  width:
    125px;

  height:
    auto;

  display:
    block;

  opacity:
    .94;

  transition:
    opacity .20s ease,
    transform .20s ease;
}


.footer-brand:hover img {

  opacity:
    1;

  transform:
    translateY(-1px);
}


.footer-meta {

  margin-top:
    12px;

  color:
    var(--text-muted);

  font-size:
    11px;

  letter-spacing:
    1.8px;

  direction:
    ltr;

  text-align:
    left;
}


/* =========================================================
   16. SHARED TEXT HELPERS
   ========================================================= */

.eyebrow {

  color:
    var(--blue-bright);

  font-size:
    12px;

  font-weight:
    400;

  letter-spacing:
    2px;

  margin-bottom:
    18px;

  direction:
    ltr;

  text-align:
    left;
}


.section-label {

  color:
    var(--blue-bright);

  font-size:
    12px;

  font-weight:
    400;

  letter-spacing:
    1.8px;

  direction:
    ltr;

  text-align:
    left;
}


.muted {

  color:
    var(--text-muted);
}


.soft {

  color:
    var(--text-soft);
}


/* =========================================================
   17. FORM DEFAULTS
   ========================================================= */

input,
textarea,
select {

  color:
    var(--text);

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    9px;
}


input::placeholder,
textarea::placeholder {

  color:
    var(--text-muted);
}


/* =========================================================
   18. RESPONSIVE — TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1050px) {

  .nav {

    height:
      72px;
  }


  .nav-links {

    display:
      none;
  }


  .primary-btn.nav-cta {

    display:
      none;
  }


  .nav-actions {

    position:
      absolute;

    inset:
      0;

    width:
      100%;

    height:
      100%;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    direction:
      ltr;

    pointer-events:
      none;
  }


  .nav-actions .search-btn,
  .nav-actions .mobile-toggle {

    pointer-events:
      auto;

    position:
      relative;

    z-index:
      6;
  }


  .mobile-toggle {

    display:
      inline-flex;
  }


  .brand {

    position:
      absolute;

    left:
      50%;

    top:
      50%;

    transform:
      translate(-50%,-50%);

    z-index:
      5;
  }


  .brand-logo {

    width:
      145px;
  }


  .mobile-menu {

    padding:
      8px 0 18px;

    border-top:
      1px solid var(--line);
  }


  .mobile-menu.open {

    display:
      block;
  }

}


/* =========================================================
   19. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .container {

    width:
      min(
        var(--container),
        calc(100% - 28px)
      );
  }


  .nav {

    height:
      70px;
  }


  .brand-logo {

    width:
      132px;
  }


  .search-btn {

    width:
      37px;

    height:
      37px;

    font-size:
      17px;
  }


  .mobile-toggle {

    width:
      39px;

    height:
      39px;

    font-size:
      19px;
  }


  .mobile-item > a {

    padding:
      13px 3px;
  }


  .mobile-sub {

    padding:
      4px 10px 10px;
  }


  .footer-meta {

    font-size:
      10px;

    letter-spacing:
      1.4px;
  }

}


/* =========================================================
   20. RESPONSIVE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .container {

    width:
      calc(100% - 24px);
  }


  .nav {

    height:
      66px;
  }


  .brand-logo {

    width:
      123px;
  }


  .search-btn {

    width:
      36px;

    height:
      36px;
  }


  .mobile-toggle {

    width:
      38px;

    height:
      38px;
  }

}