@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');


/* =========================================
   ROOT
========================================= */

:root {

  --background: #080909;
  --surface: #0d0f10;
  --surface-light: #111415;

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

  --text: #f2f2ef;
  --muted: #858b89;

  --accent: #c9ffdc;

  --accent-dark: #8ed9ad;

  --max-width: 1180px;

}


/* =========================================
   RESET
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  background: var(--background);

  color: var(--text);

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

  overflow-x: hidden;

}


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


/* =========================================
   BACKGROUND
========================================= */

.grid {

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .22;

  background-image:

    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );

}


.noise {

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .025;

  z-index: 100;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

}


/* =========================================
   NAVBAR
========================================= */

.navbar {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  height: 90px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

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

}


.logo {

  display: flex;

  align-items: center;

  gap: 11px;

  font-weight: 600;

}


.logo-mark {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(201,255,220,.2);

  border-radius: 10px;

  color: var(--accent);

  font-family: monospace;

  font-size: 11px;

  background:
    rgba(201,255,220,.03);

}


.navbar nav {

  display: flex;

  gap: 34px;

}


.navbar nav a {

  color: var(--muted);

  font-size: 13px;

  transition: .25s;

}


.navbar nav a:hover {

  color: var(--text);

}


.nav-button {

  display: flex;

  align-items: center;

  gap: 8px;

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

  padding:
    9px 14px;

  border-radius: 8px;

  font-size: 12px;

  transition: .25s;

}


.nav-button:hover {

  border-color:
    rgba(201,255,220,.3);

  color: var(--accent);

}


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

/* .hero {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  min-height: 700px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1.15fr
    .85fr;

  align-items: center;

  gap: 80px;

}


.hero-content {

  position: relative;

  z-index: 2;

} */


.availability {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    7px 12px;

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

  border-radius: 100px;

  color: var(--muted);

  font-size: 11px;

  margin-bottom: 28px;

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

}


.availability span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow:
    0 0 12px
    rgba(201,255,220,.7);

}


/* .small-label {

  color: var(--accent);

  font-size: 12px;

  margin-bottom: 15px;

} */


h1 {

  font-size:
    clamp(48px, 7vw, 82px);

  line-height: 1.18;

  letter-spacing: -3px;

  font-weight: 600;

}


/* h1 em {

  color: var(--accent);

  font-style: normal;

} */


/* .hero-description {

  max-width: 530px;

  margin-top: 27px;

  color: var(--muted);

  line-height: 2;

  font-size: 15px;

}


.hero-buttons {

  display: flex;

  gap: 10px;

  margin-top: 30px;

} */


.button {

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px 17px;

  border-radius: 8px;

  font-size: 12px;

  transition: .25s;

}


.button-primary {

  color: #090a0a;

  background: var(--text);

}


.button-primary:hover {

  transform:
    translateY(-2px);

}


.button-ghost {

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

  color: var(--muted);

}


.button-ghost:hover {

  color: var(--text);

}


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

.hero-visual {

  position: relative;

  height: 390px;

  display: grid;

  place-items: center;

}


.orb {

  position: absolute;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(201,255,220,.12),
      transparent 65%
    );

  filter: blur(5px);

}


.terminal {

  position: relative;

  z-index: 2;

  width: 390px;

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

  border-radius: 15px;

  background:
    rgba(13,15,16,.92);

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.45);

  overflow: hidden;

  transform:
    rotate(-2deg);

}


.terminal-top {

  height: 42px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

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

  color: #555c59;

  font:
    10px monospace;

  direction: ltr;

}


.terminal-dots {

  display: flex;

  gap: 5px;

}


.terminal-dots i {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #303432;

}


.terminal-code {

  direction: ltr;

  text-align: left;

  padding:
    28px;

  font:
    13px/2.1
    "SFMono-Regular",
    Consolas,
    monospace;

  color: #bfc7c3;

}


.terminal-code div {

  padding-left: 20px;

}


.purple {
  color: #c6a5ff;
}


.pink {
  color: #ff9bc2;
}


.blue {
  color: #9bd6ff;
}


.yellow {
  color: #d7eaa5;
}


.white {
  color: #f1f4f2;
}


.floating-card {

  position: absolute;

  z-index: 3;

  bottom: 35px;

  left: 15px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    12px 15px;

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

  background:
    rgba(15,17,18,.9);

  backdrop-filter:
    blur(15px);

  border-radius: 10px;

  font-size: 12px;

}


.floating-number {

  color: var(--accent);

  font:
    10px monospace;

}


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

.section {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin: auto;

  padding:
    130px 0;

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

}


.section-header {

  display: flex;

  align-items: flex-start;

  gap: 18px;

  margin-bottom: 65px;

}


.section-number {

  color: var(--accent);

  font:
    11px monospace;

  padding-top: 7px;

}


.section-kicker {

  color: var(--muted);

  font-size: 11px;

}


.section-header h2 {

  margin-top: 7px;

  font-size: 31px;

  font-weight: 500;

}


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

.about-layout {

  display: grid;

  grid-template-columns:
    1.2fr
    .8fr;

  gap: 100px;

}


.large-text {

  font-size: 25px;

  line-height: 1.9;

  font-weight: 400;

  max-width: 650px;

}


.muted-text {

  color: var(--muted);

  line-height: 2;

  font-size: 14px;

  max-width: 570px;

  margin-top: 25px;

}


.about-stats {

  display: grid;

  gap: 12px;

}


.stat {

  display: grid;

  grid-template-columns:
    35px
    1fr;

  gap: 8px;

  padding:
    20px;

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

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

  border-radius: 10px;

}


.stat span {

  color: var(--accent);

  font:
    10px monospace;

}


.stat strong {

  font-size: 13px;

  font-weight: 500;

}


.stat small {

  grid-column: 2;

  color: var(--muted);

  font-size: 10px;

}


/* =========================================
   SKILLS
========================================= */

.skills-container {

  display: grid;

  gap: 12px;

}


.skill-category {

  display: grid;

  grid-template-columns:
    50px
    200px
    1fr;

  align-items: center;

  gap: 20px;

  padding:
    24px;

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

  border-radius: 10px;

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

  transition: .25s;

}


.skill-category:hover {

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

  border-color:
    rgba(201,255,220,.14);

}


.category-number {

  color: #555b58;

  font:
    10px monospace;

}


.skill-category h3 {

  font-size: 14px;

  font-weight: 500;

}


.skills {

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 7px;

}


.skills span {
    
  
  padding:
    7px 10px;

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

  border-radius: 6px;

  color: #a9b0ac;

  font:
    10px
    monospace;

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

     display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;

}

.skills span:hover {
  transform: scale(1.1);
}




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

.contact-section {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin: auto;

  padding:
    130px 0;

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

}


.contact-inner {

  position: relative;

  padding:
    100px 60px;

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

  border-radius: 18px;

  text-align: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(201,255,220,.06),
      transparent 60%
    );

}


.contact-inner h2 {

  font-size:
    clamp(42px, 6vw, 65px);

  line-height: 1.35;

  margin-top: 18px;

  font-weight: 500;

}


.contact-inner h2 em {

  color: var(--accent);

  font-style: normal;

}


.contact-inner p {

  max-width: 510px;

  margin:
    20px auto 30px;

  color: var(--muted);

  line-height: 2;

  font-size: 13px;

}


.email-button {

  display: inline-flex;

  align-items: center;

  gap: 20px;

  padding:
    13px 18px;

  border:
    1px solid rgba(201,255,220,.2);

  border-radius: 8px;

  color: var(--accent);

  font:
    12px monospace;

  background:
    rgba(201,255,220,.03);

}


.socials {

  margin-top: 45px;

  display: flex;

  justify-content: center;

  gap: 25px;

}


.socials a {

  color: var(--muted);

  font-size: 11px;

}


.socials a:hover {

  color: var(--text);

}


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

footer {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin: auto;

  padding:
    25px 0 35px;

  display: flex;

  justify-content: center;

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

  color: #555b58;

  font-size: 16px;

}

footer .footer-heart {

     display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;

}

footer .footer-heart:hover {
  transform: scale(1.5);
    cursor: pointer;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 850px) {

  .navbar nav {
    display: none;
  }


  .hero {

    grid-template-columns: 1fr;

    min-height: auto;

    padding:
      100px 0;

  }


  .hero-visual {

    display: none;

  }


  .about-layout {

    grid-template-columns: 1fr;

    gap: 50px;

  }


  .skill-category {

    grid-template-columns:
      35px
      1fr;

  }


  .skills {

    grid-column: 2;

  }

}


@media (max-width: 550px) {

  .navbar,
  .hero,
  .section,
  .contact-section,
  footer {

    width:
      calc(100% - 32px);

  }


  .nav-button {

    display: none;

  }


  h1 {

    letter-spacing: -2px;

  }


  .hero-description {

    font-size: 13px;

  }


  .hero-buttons {

    flex-direction: column;

    align-items: stretch;

  }


  .button {

    justify-content: center;

  }


  .section {

    padding:
      90px 0;

  }


  .large-text {

    font-size: 20px;

  }


  .contact-inner {

    padding:
      70px 20px;

  }


  .contact-inner h2 {

    font-size: 38px;

  }


}