:root {
    --bg: #0B0D10;
    --surface: #111419;
    --surface-2: #171A20;
    --text: #F1F3F5;
    --muted: #9AA1AC;
    --accent: #6EE7B7;
    --accent-soft: rgba(110, 231, 183, 0.10);
    --line: #20252D;
    --line-strong: #2C333D;

    --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sans-fa: "Vazirmatn", "Geist", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --wrap: 1180px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 10vw, 8.5rem);
    --nav-h: 64px;

    color-scheme: dark;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html {
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  *, *::before, *::after {
    box-sizing: border-box;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  html[lang="fa"] body { font-family: var(--sans-fa); }
  html[lang="fa"] h1, html[lang="fa"] .role, html[lang="fa"] h2,
  html[lang="fa"] .project h3, html[lang="fa"] .phil-list p,
  html[lang="fa"] .contact h2, html[lang="fa"] .error-code + h2 {
    letter-spacing: 0;
  }
  html[lang="fa"] h1 { text-transform: none; }

  a,
  button,
  .tag,
  .learn,
  .project,
  .social,
  .lang-btn {
    transition: all .3s ease-in-out;
  }

  a,
  button {
    cursor: default;
  }

  h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  .mono { font-family: var(--mono); }
  /*::selection { background: var(--accent); color: #06110c; }*/
  ::selection { background: transparent; color: inherit; }
  /* Technical/code content always stays left-to-right, in both languages */
  [dir="ltr"] { unicode-bidi: isolate; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .wrap {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  section { position: relative; }
  .section { padding-block: var(--section-y); }

  /* ---------- Navigation ---------- */
  .nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: rgba(11, 13, 16, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .brand {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.16em;
    font-size: 0.95rem;
    flex: 0 0 auto;
  }
  .nav-right { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
  .links { display: flex; align-items: center; gap: 0.25rem; }
  .links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.8rem;
    font-size: 0.95rem;
    color: var(--muted);
    border-radius: 6px;
    transition: color .18s ease, background-color .18s ease;
    white-space: nowrap;
  }
  .links a:hover { color: var(--text); background: var(--surface); }
  .links .sep {
    width: 1px; height: 16px; background: var(--line-strong); margin-inline: 0.5rem;
  }
  .menu-btn, .lang-btn {
    display: none;
    min-height: 44px;
    padding: 0 0.9rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font: 500 0.85rem var(--mono);
    cursor: pointer;
  }
  .lang-btn {
    align-items: center;
    gap: 0.4rem;
    direction: ltr;
    /* display is intentionally NOT set here — .lang-btn--desktop /
       .lang-btn--mobile below decide it, and they must stay AFTER
       this rule in the file so they win the cascade. */
  }
  .lang-btn:hover { border-color: var(--accent); background: var(--surface-2); }
  .lang-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

  /* Desktop (>860px): toggle lives at the end of the navbar, next to LinkedIn.
     Mobile (<=860px): toggle lives next to the Menu button (flipped in the
     @media (max-width: 860px) block further down). */
  .lang-btn--desktop { display: inline-flex; margin-inline-start: 0.6rem; }
  .lang-btn--mobile { display: none; }

  /* ---------- Buttons & tags ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1.3rem;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    font: 500 0.95rem var(--sans);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, filter .18s ease;
  }
  html[lang="fa"] .btn { font-family: var(--sans-fa); }
  .btn:hover { border-color: var(--accent); background: var(--surface-2); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: #06110c; }
  .btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
  .btn-sm { min-height: 42px; padding: 0 1.1rem; font-size: 0.9rem; }

  .tag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 4px;
    font: 400 0.78rem/1.5 var(--mono);
    color: var(--muted);
    transition:
      color .3s ease-in-out,
      border-color .3s ease-in-out,
      background-color .3s ease-in-out;
  }

  .tag:hover {
    color: var(--accent);
    border-color: rgba(110, 231, 183, .45);
    background: rgba(110, 231, 183, .06);
  }

  /* ---------- Reveal ---------- */
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6.5rem);
    overflow: hidden;
  }
  .hero h1 {
    font-size: clamp(2.9rem, 8.6vw, 7rem);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  h1 {
    font-size: clamp(2.6rem, 8vw, 6.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
  }
  h1 span { display: block; }
  .role {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .lede {
    margin-top: 0.6rem;
    max-width: 32ch;
    color: var(--muted);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
  }
  .stack-line {
    margin-top: 1.75rem;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: left;
  }
  .cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

  /* Terminal card — always LTR, both languages */
  .term {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 40px 90px -50px rgba(110, 231, 183, 0.22);
    font-family: var(--mono);
    direction: ltr;
    text-align: left;
  }
  .term-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 0.8rem;
    color: var(--muted);
  }
  .term-body { padding: 1.4rem 1.5rem 1.6rem; font-size: 0.95rem; line-height: 1.7; }
  .tl { margin: 0; }
  .tl + .tl { margin-top: 0.15rem; }
  .tl.gap { margin-top: 1.1rem; }
  .tl .p { color: var(--accent); margin-right: 0.6rem; }
  .tl .out { color: var(--text); display: block; padding-left: 1.4rem; }
  .tl .out.dim { color: var(--muted); }
  .out .gap-x { display: inline-block; width: 1.4ch; }
  .status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 0.55rem;
    vertical-align: 0.05em;
    box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.5);
  }
  .cursor {
    display: inline-block;
    width: 0.6ch;
    height: 1.1em;
    vertical-align: -0.18em;
    background: var(--accent);
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes line-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes soft-pulse {
    0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.45); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(110, 231, 183, 0); }
  }
  html.js .term .tl {
    opacity: 0;
    animation: line-in .45s ease forwards;
    animation-delay: var(--d, 0s);
  }
  .term .status-dot { animation: soft-pulse 2.4s ease-out infinite; }

  /* ---------- Section heads ---------- */
  .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
  }
  h2 {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .meta { font: 400 0.85rem var(--mono); color: var(--muted); direction: ltr; }

  /* ---------- About ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
  .about-copy p {
    margin-top: 1.5rem;
    max-width: 46ch;
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.7;
    color: var(--muted);
  }
  .about-copy p:first-of-type { color: var(--text); }
  /*.about-copy:hover p {*/
  /*  opacity: .5;*/
  /*}*/

  /*.about-copy p:hover {*/
  /*  opacity: 1;*/
  /*}*/
  .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .cat {
    padding: 1.25rem 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color .2s ease;
  }
  .cat:hover { border-color: var(--line-strong); }
  .cat h3 {
    font: 500 0.82rem var(--mono);
    color: var(--muted);
    margin-bottom: 0.9rem;
    direction: ltr;
    text-align: left;
  }
  .cat .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; direction: ltr; text-align: left; }

  /* ---------- Projects ---------- */
  .projects { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
  .project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .25s ease;
  }
  .project:hover { border-color: rgba(110, 231, 183, 0.35); }
  .project-body {
    order: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3.2vw, 2.75rem);
    min-width: 0;
  }
  .viz { order: 2; }
  .project.reverse .viz { order: 0; border-left: 0; border-right: 1px solid var(--line); }
  .project.reverse .project-body { order: 1; }
  .repo { font: 400 0.82rem var(--mono); color: var(--accent); direction: ltr; display: inline-block; }
  .project h3 {
    margin-top: 1rem;
    font-size: clamp(1.65rem, 3.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .project .desc {
    margin-top: 1rem;
    max-width: 40ch;
    color: var(--muted);
    font-size: 1.05rem;
  }
  .project .tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; direction: ltr; }
  .project .actions { margin-top: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

  .viz {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background-color: #0D1015;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 20px 20px;
    border-left: 1px solid var(--line);
    min-height: 280px;
    direction: ltr;
  }
  .viz svg { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
  svg .svg-mono { font-family: var(--mono); }

  .packet { opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .project:hover .packet,
    .project:focus-within .packet { animation: travel 2.6s ease-in-out infinite; }
  }
  @keyframes travel {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(256px); opacity: 0; }
  }

  .details {
    grid-column: 1 / -1;
    order: 3;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
    border-top: 0 solid var(--line);
  }
  .details.open { grid-template-rows: 1fr; border-top-width: 1px; }
  .details-inner {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear .32s;
  }
  .details.open .details-inner { visibility: visible; transition-delay: 0s; }
  .details dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.7rem 2rem;
    padding: 1.5rem clamp(1.5rem, 3.2vw, 2.75rem) 1.75rem;
    font-size: 0.95rem;
  }
  .details dt { font: 400 0.85rem var(--mono); color: var(--muted); padding-top: 0.05rem; direction: ltr; text-align: left; }
  .details dd { color: var(--text); }
  .details dd[dir="ltr"] { text-align: left; }

  /* ---------- Skills ---------- */
  .skill-rows { border-top: 1px solid var(--line); }
  .skill-row {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
    gap: 1rem 2rem;
    padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .skill-row h3 { font: 400 0.9rem var(--mono); color: var(--muted); }
  .skill-row ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 2rem;
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
    direction: ltr;
    justify-content: flex-start;
  }
  .skill-row li { transition: color .2s ease; font-family: var(--sans); }
  .skill-row li:hover { color: var(--accent); }

  /* ---------- Currently learning ---------- */
  .learning-wrap {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--surface-2);
    border: 1px dashed #3a424e;
    border-radius: 10px;
  }
  .learning-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; }
  .learning-head p { color: var(--muted); max-width: 44ch; }
  .learn-grid {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .learn {
    padding: 1.35rem 1.35rem 1.5rem;
    border: 1px dashed #3a424e;
    border-radius: 8px;
    background: var(--bg);
  }
  .learn .state { font: 400 0.78rem var(--mono); color: var(--accent); display: flex; align-items: center; }
  .learn .state .status-dot { width: 7px; height: 7px; margin-right: 0.5rem; animation: none; }
  .learn h3 { margin-top: 1.1rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
  .learn .with { margin-top: 0.5rem; font: 400 0.88rem var(--mono); color: var(--muted); direction: ltr; text-align: left; }

  .learn-grid:hover .learn {
    opacity: .5;
  }

  .learn:hover {
    opacity: 1;
    border-style: solid;
    border-color: rgba(110, 231, 183, .28);
    background:
      linear-gradient(
        135deg,
        rgba(110, 231, 183, .06),
        rgba(110, 231, 183, 0)
      );
    box-shadow:
      0 12px 35px rgba(0, 0, 0, .18);
    transform: translateY(-4px);
  }
  @media (hover: hover) {
    .learn-grid:hover .learn { opacity: 0.5; }
    .learn:hover {
      opacity: 1;
      border-style: solid;
      border-color: rgba(110, 231, 183, 0.5);
      background: linear-gradient(165deg, rgba(110, 231, 183, 0.1), var(--bg) 62%);
      box-shadow: inset 3px 0 0 var(--accent), 0 14px 32px -18px rgba(110, 231, 183, 0.4);
    }
    .learn:hover h3 { color: var(--accent); }
    .learn:hover .with { color: var(--text); }
    .learn:hover .status-dot { animation: soft-pulse 2s ease-out infinite; }
  }

  /* ---------- Philosophy ---------- */
  .phil-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
  .phil-grid h2 {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 2rem);
    color: var(--muted);
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
  }
  .phil-list { border-bottom: 1px solid var(--line); }
  .phil-list li {
    display: grid;
    grid-template-columns: clamp(3.5rem, 8vw, 6rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding-block: clamp(1.75rem, 3.6vw, 2.9rem);
    border-top: 1px solid var(--line);
  }
  .phil-list .n {
    font: 300 clamp(1.8rem, 4vw, 3rem)/1 var(--mono);
    color: #465060;
    transition: color .25s ease;
    direction: ltr;
  }
  .phil-list li:hover .n { color: var(--accent); }
  .phil-list p {
    max-width: 30ch;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .phil h3 {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
  }

  .phil p {
    font-size: 1.05rem;
  }

  /* ---------- Contact ---------- */
  .contact { border-top: 1px solid var(--line); }
  .contact h2 {
    font-size: clamp(2.8rem, 7vw, 6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .contact p {
    margin-top: 1.75rem;
    max-width: 34ch;
    color: var(--muted);
    font-size: clamp(1.1rem, 1.9vw, 1.35rem);
    line-height: 1.5;
  }
  .contact .cta-row { margin-top: 2.5rem; }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--line); padding-block: 1.75rem 2rem; }
  .foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-size: 0.9rem;
    color: var(--muted);
  }
  .foot .mono { font-size: 0.82rem; direction: ltr; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .term { max-width: 520px; }
    .about-grid { grid-template-columns: minmax(0, 1fr); }
    .project { grid-template-columns: minmax(0, 1fr); }
    .project-body, .project.reverse .project-body { order: 1; }
    .viz, .project.reverse .viz {
      order: 2;
      border-left: 0;
      border-right: 0;
      border-top: 1px solid var(--line);
      min-height: 240px;
    }
    .learn-grid { grid-template-columns: minmax(0, 1fr); }
    .phil-grid { grid-template-columns: minmax(0, 1fr); }
    .phil-grid h2 { position: static; }
    .skill-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  }
  @media (max-width: 860px) {
    .lang-btn--desktop { display: none; }
    .lang-btn--mobile { display: inline-flex; }
    .menu-btn { display: inline-flex; align-items: center; }
    .links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 0.5rem var(--gutter) 1rem;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
    }
    .links.open { display: flex; }
    .links a { min-height: 48px; padding: 0 0.25rem; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--line); }
    .links a:hover { background: transparent; }
    .links .sep { display: none; }
  }
  @media (max-width: 560px) {
    body { font-size: 1rem; }
    .cat-grid { grid-template-columns: minmax(0, 1fr); }
    .cta-row .btn { flex: 1 1 auto; }
    .project .actions .btn { flex: 1 1 auto; }
    .details dl { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
    .details dd { margin-bottom: 0.7rem; }
    .term-body { font-size: 0.88rem; padding: 1.15rem 1.15rem 1.3rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    html.js .reveal { opacity: 1; transform: none; }
    html.js .term .tl { opacity: 1; animation: none; }
    .cursor { animation: none; }
  }