@font-face {
      font-family: 'nebras';
      src: url('fonts/nebras.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --vh: 1vh;
      --green-900: #031A16;
      --green-800: #082E26;
      --green-700: #0F4C3A;
      --gold: #D6A84F;
      --gold-light: #FFD86B;
      --warm-white: #FFFCF6;
      --muted: rgba(255,252,246,.72);
      --fixed-logo-size: 84px;
      --fixed-logo-half-size: 42px;
      --fixed-logo-top: 22px;
      --portfolio-top: 150px;
      --float-menu-space: 82px;
    }
    * { box-sizing: border-box; }
    html { margin: 0; background: var(--green-900); scroll-behavior: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
    body {
      margin: 0; overflow-x: hidden; overscroll-behavior-y: none;
      font-family: 'nebras', 'Vazirmatn', 'IRANSansX', 'Yekan Bakh', Tahoma, sans-serif;
      color: var(--warm-white);
      background:
        radial-gradient(circle at 50% 16%, rgba(255,216,107,.10), transparent 30rem),
        linear-gradient(180deg, #031A16 0%, #041f1a 46%, #082E26 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(circle at 18% 70%, rgba(15,76,58,.45), transparent 40rem),
        radial-gradient(circle at 82% 28%, rgba(255,216,107,.06), transparent 30rem);
      opacity: .92;
    }
    .stage { position: relative; z-index: 1; }
    .section { position: relative; min-height: calc(var(--vh) * 100); height: calc(var(--vh) * 100); width: 100%; overflow: hidden; }

    .hero { display: grid; place-items: center; text-align: center; padding: max(22px, env(safe-area-inset-top)) 24px max(22px, env(safe-area-inset-bottom)); }
    .hero-text { position: absolute; top: 50%; left: 50%; width: min(92vw, 820px); transform: translate(-50%, -50%); will-change: opacity, transform, filter; }
    .hero-kicker { margin: 0 0 18px; color: rgba(255,216,107,.88); font-size: clamp(13px, 1.25vw, 16px); letter-spacing: .22em; text-transform: uppercase; }
    .hero-title-fa { margin: 0; font-size: clamp(36px, 5vw, 74px); line-height: 1.15; font-weight: 800; letter-spacing: -0.045em; text-shadow: 0 0 34px rgba(255,216,107,.12); }
    .hero-title-en { direction: ltr; margin: 12px 0 0; font-size: clamp(22px, 2.75vw, 38px); line-height: 1.15; font-weight: 700; color: rgba(255,252,246,.82); letter-spacing: -.018em; }
    .scroll-cue {     position: absolute;
    left: 50%;
    bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 20px;
    /* border: 1px solid rgba(255,216,107,.2); */
    border-radius: 999px;
    color: rgba(255,252,246,.74);
    /* background: rgba(255,252,246,.035); */
    /* backdrop-filter: blur(18px); */
    font-size: 14px;
    white-space: nowrap;
    will-change: opacity, transform;}
    /*.scroll-cue::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--gold-light); box-shadow: 0 0 18px rgba(255,216,107,.8); animation: pulseDot 1.6s ease-in-out infinite; }*/
    .scroll-cue::after { content: ''; width: 20px; height: 20px; border-right: 1.8px solid rgba(255,216,107,.72); border-bottom: 1.8px solid rgba(255,216,107,.72); transform: rotate(45deg) translateY(-4px); animation: arrowDown 1.7s ease-in-out infinite; }
    @keyframes pulseDot { 0%,100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.2); opacity: 1; } }
    @keyframes arrowDown { 0%,100% { opacity: .45; translate: 0 -2px; } 50% { opacity: 1; translate: 0 5px; } }

    .service {
      --service-bg: none;
      display: grid;
      place-items: center;
      padding: max(20px, env(safe-area-inset-top)) 22px calc(max(20px, env(safe-area-inset-bottom)) + var(--float-menu-space));
      isolation: isolate;
    }
    .service::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: var(--service-bg);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      transform: scale(1.045);
      opacity:0;transition:opacity .6s ease, filter .6s ease;filter:blur(0px) brightness(1) saturate(1);
    }
    .service::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
background: linear-gradient(180deg, rgba(3,26,22,.26) 50%, rgba(3,26,22,.52) 100%),
        linear-gradient(90deg, rgba(3,26,22,.58) 0%, rgba(3,26,22,.12) 08%, rgba(3,26,22,.10) 100%, rgba(3,26,22,.58) 90%),
        radial-gradient(circle at 20% 50%, rgba(3,26,22,.06) 0%, rgba(3,26,22,.22) 100%, rgba(3,26,22,.48) 78%),
        radial-gradient(circle at 20% 22%, rgba(214,168,79,.10), transparent 20%),
        radial-gradient(circle at 60% 15%, rgba(15,76,58,.18), transparent 23%);
      opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .5s ease,backdrop-filter .5s ease;
    }
    #service01 { --service-bg: url('img/s1.webp'); }
    #service02 { --service-bg: url('img/s2.webp'); }
    #service03 { --service-bg: url('img/s3.webp'); }
    #service04 { --service-bg: url('img/s4.webp'); }
    #service05 { --service-bg: url('img/s5.webp'); }
    #service06 { --service-bg: url('img/s6.webp'); }
    #service07 { --service-bg: url('img/s7.webp'); }
    #service08 { --service-bg: url('img/s8.webp'); }
    #service09 { --service-bg: url('img/s9.webp'); }
    #service10 { --service-bg: url('img/s10.webp'); }
    .service-card {
      z-index: 2;
      --side-x: 88%; --shine: 0;
      position: relative; width: min(72vw, 1040px); height: min(720px, calc(100% - 8px)); max-height: none;
      padding: 24px;
      border-radius: clamp(30px, 3.8vw, 54px); 
      overflow: hidden;
      display: flex; flex-direction: column; justify-content: center;
      border: 1px solid rgba(255,216,107,.20);
      background: linear-gradient(145deg, rgba(255,252,246,.08), rgba(255,252,246,.035)), linear-gradient(180deg, rgba(15,76,58,.54), rgba(3,26,22,.68));
      box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 46px rgba(255,216,107,.02);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      opacity: 0 !important; transform: translateY(26px) scale(.985) !important; filter: blur(10px) !important;
      transition: opacity .55s ease, transform .55s ease, filter .55s ease;
      will-change: opacity, transform, filter;
    }
    .service-card::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at var(--side-x) 18%, rgba(255,216,107, calc(.28 * var(--shine))) 0%, rgba(255,216,107, calc(.18 * var(--shine))) 20%, rgba(214,168,79, calc(.08 * var(--shine))) 42%, transparent 68%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%);
      opacity: .92;
    }
    .service-card::after { content: ''; position: absolute; inset: 22px; border-radius: inherit; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
    .service-card.side-right { --side-x: 92%; }
    .service-card.side-left { --side-x: 8%; }
    .service-content {
      justify-items: center; position: relative; z-index: 2; /*width: min(760px, 100%);*/ }
    /* .side-right .service-content { margin-inline-start: auto; }
    .side-left .service-content { margin-inline-end: auto; } */
    .service-category { display: none; align-items: center; gap: 10px; margin: 0 0 24px; padding: 10px 16px; border: 1px solid rgba(255,216,107,.22); border-radius: 999px; background: rgba(255,252,246,.055); color: rgba(255,216,107,.90); font-size: clamp(13px, 1.2vw, 15px); line-height: 1.5; }
    .service-category::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 16px rgba(255,216,107,.72); }
    .service-title {padding: 16px; margin: 0; color: var(--warm-white); font-size: clamp(38px, 4.9vw, 72px); font-weight: 850; letter-spacing: -0.06em; line-height: 1.08; }
    .service-lead { padding: 16px;text-align: justify; margin: 18px 0 0; color: rgba(255,252,246,.88); font-size: clamp(16px, 1.6vw, 22px); line-height: 1.9; font-weight: 560; }
    .service-text {padding: 16px;text-align: justify; margin: 18px 0 0; color: rgba(255,252,246,.70); font-size: clamp(14px, 1.2vw, 17px); line-height: 2.05; font-weight: 390; }
.tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 28px 0 0;
  padding-right: 8px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  scrollbar-color: rgba(255,216,107,.32) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.tags.is-dragging {
  cursor: grabbing;
}

.tags.is-dragging li {
  pointer-events: none;
}

.tags::-webkit-scrollbar {
  height: 6px;
}

.tags::-webkit-scrollbar-thumb {
  background: rgba(255,216,107,.32);
  border-radius: 999px;
}

.tags li {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 15px;
  border-radius: 999px;
  color: rgba(255,252,246,.78);
  background: rgba(255,252,246,.065);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  font-size: clamp(12px, 1.08vw, 14px);
  line-height: 1.4;
}
.service-cta { display: none; align-self: flex-start; margin-top: 36px; appearance: none; border: 0; border-radius: 999px; background: linear-gradient(135deg, #FFD86B, #D6A84F); color: #12382f; padding: 16px 34px; font: inherit; font-weight: 780; cursor: pointer; box-shadow: 0 18px 45px rgba(214,168,79,.24); }

    .lantern { position: fixed; z-index: 30; width: 172px; height: 172px; left: 0; top: 0; transform: translate3d(-999px, -999px, 0); pointer-events: none; filter: drop-shadow(0 0 20px rgba(255,216,107,.30)); will-change: transform, width, height, filter; isolation: isolate; }
    .lantern::before { content: ''; position: absolute; inset: -24%; z-index: -1; border-radius: 999px; background: radial-gradient(circle, rgba(255,216,107,.22) 0%, rgba(255,216,107,.125) 30%, rgba(214,168,79,.06) 56%, transparent 74%); filter: blur(22px); opacity: .72; transform: scale(.92); animation: lanternAura 5.2s ease-in-out infinite; transform-origin: center center; mix-blend-mode: screen; }
    .lantern svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; overflow: visible; animation: lanternFloat 4.8s ease-in-out infinite; transform-origin: center center; }
    @keyframes lanternAura { 0%,100% { transform: scale(.90); opacity: .45; } 50% { transform: scale(1.10); opacity: .78; } }
    @keyframes lanternFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    .soft-light-core { position: fixed; z-index: 29; width: 170px; height: 100px; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translate3d(-999px,-999px,0); border-radius: 50%; filter: blur(24px); background: radial-gradient(ellipse at center, rgba(255,216,107,.46), rgba(255,216,107,.20) 36%, transparent 72%); mix-blend-mode: screen; will-change: opacity, transform; }


    .floating-menu {
      position: fixed;
      left: 50%;
      bottom: max(8px, env(safe-area-inset-bottom));
      z-index: 60;
      display: grid;
      grid-template-columns: repeat(4, max-content);
      gap: 6px;
      padding: 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,216,107,.20);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,216,107,.13), transparent 70%),
        rgba(3,26,22,.46);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
      opacity: 0;
      transform: translateX(-50%) translateY(24px) scale(.96);
      filter: blur(10px);
      pointer-events: none;
      transition: opacity .38s ease, transform .38s ease, filter .38s ease;
    }
    .floating-menu.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
      filter: blur(0);
      pointer-events: auto;
    }
    .floating-menu button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 12px 18px;
      color: rgba(255,252,246,.78);
      background: transparent;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
      white-space: nowrap;
    }
    .floating-menu button:hover {
      color: rgba(255,252,246,.96);
      background: rgba(255,252,246,.07);
    }
    .floating-menu button.is-active {
      color: #12382f;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      box-shadow: 0 12px 30px rgba(214,168,79,.22), inset 0 1px 0 rgba(255,255,255,.26);
    }

    .portfolio { padding: 0; background: linear-gradient(180deg, rgba(3,26,22,.12), rgba(246,241,231,.03)); }
    .portfolio-brand {
      position: fixed;
      top: calc(var(--fixed-logo-top) + var(--fixed-logo-half-size));
      left: calc(50% - var(--fixed-logo-half-size) - 12px);
      transform: translateX(-100%) translateY(calc(-50% + 12px));
      z-index: 20;
      text-align: right;
      width: max-content;
      max-width: min(34vw, 260px);
      opacity: 0;
      filter: blur(8px);
      will-change: opacity, transform, filter;
      pointer-events: none;
    }
    .portfolio-brand-fa { text-align-last: justify;font-size: clamp(17px, 1.95vw, 22px); font-weight: 620; line-height: 1.85; letter-spacing: -.025em; color: var(--warm-white); text-shadow: 0 0 18px rgba(255,216,107,.14); overflow-wrap: break-word; }
    .portfolio-brand-en { text-align-last: justify;direction: ltr; margin-top: 1px; font-size: clamp(10px, 1.05vw, 13px);font-weight: 500; line-height: 1.22; color: rgba(255,252,246,.66); letter-spacing: -.01em; overflow-wrap: break-word; }

    .portfolio-board {
      position: absolute;
      left: clamp(14px, 3vw, 42px);
      right: clamp(14px, 3vw, 42px);
      top: var(--portfolio-top);
      bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--float-menu-space));
      border-radius: clamp(28px, 3vw, 48px);
      border: 1px solid rgba(255,216,107,.16);
      background: rgba(255,252,246,.045);
      box-shadow: 0 24px 86px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      overflow: hidden;
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
      will-change: opacity, transform, filter;
    }

    .portfolio-nav {
      position: absolute;
      z-index: 18;
      top: 50%;
      width: clamp(44px, 4.6vw, 62px);
      height: clamp(44px, 4.6vw, 62px);
      border: 1px solid rgba(255,216,107,.24);
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,216,107,.18), transparent 70%),
        rgba(3,26,22,.46);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
      cursor: pointer;
      opacity: 1;
      transform: translateY(-50%) scale(1);
      transition: opacity .32s ease, transform .32s ease, filter .32s ease;
    }
    .portfolio-nav::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 13px;
      height: 13px;
      border-top: 2px solid rgba(255,216,107,.92);
      border-left: 2px solid rgba(255,216,107,.92);
      filter: drop-shadow(0 0 8px rgba(255,216,107,.55));
    }
    .portfolio-nav::after {
      content: '';
      position: absolute;
      inset: -16px;
      border-radius: inherit;
      background: radial-gradient(circle, rgba(255,216,107,.18), transparent 64%);
      opacity: 0;
      transition: opacity .32s ease;
      pointer-events: none;
    }
    .portfolio-nav:hover {
      transform: translateY(-50%) scale(1.045);
      filter: brightness(1.08);
    }
    .portfolio-nav:hover::after { opacity: 1; }
    .portfolio-nav.is-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) scale(.86);
    }
    .portfolio-nav-prev { right: clamp(14px, 2vw, 28px); left: auto; }
    .portfolio-nav-next { left: clamp(14px, 2vw, 28px); right: auto; }
    .portfolio-nav-prev::before { transform: rotate(135deg); right: 3px; }
    .portfolio-nav-next::before { transform: rotate(-45deg); left: 3px; }

    .portfolio-scroll { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; direction: rtl; overscroll-behavior-x: contain; overscroll-behavior-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,216,107,.32) transparent; touch-action: pan-x; }
    .portfolio-scroll::-webkit-scrollbar { height: 8px; }
    .portfolio-scroll::-webkit-scrollbar-thumb { background: rgba(255,216,107,.32); border-radius: 999px; }
    .portfolio-track { height: 100%; display: flex; gap: 10px; padding: 10px; align-items: stretch; width: max-content; direction: rtl; }
    .mosaic-page { flex: 0 0 min(940px, calc(100vw - 110px)); height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 10px; }
    .portfolio-tile { --mx: 50%; --my: 50%; position: relative; overflow: hidden; border-radius: 24px; isolation: isolate; text-decoration: none; color: var(--warm-white); background: #0a2a24; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transform: translateZ(0); }
    .tile-bg { position: absolute; inset: 0; z-index: 1; background: var(--bg); transition: filter .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
    .portfolio-tile::before { content: ''; position: absolute; inset: 0; z-index: 3; opacity: 0; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,216,107,.58) 0%, rgba(255,216,107,.24) 16%, rgba(15,76,58,.55) 42%, rgba(3,26,22,.72) 100%); mix-blend-mode: screen; transition: opacity .35s ease; pointer-events: none; }
    .portfolio-tile:hover::before, .portfolio-tile.is-auto-active::before { opacity: .9; }
    .portfolio-tile:hover .tile-bg, .portfolio-tile.is-auto-active .tile-bg { filter: blur(7px) brightness(.58) saturate(1.08); transform: scale(1.06); }
    .tile-short { position: absolute; z-index: 4; inset-inline-start: 18px; bottom: 16px; font-size: clamp(13px, 1.15vw, 16px); font-weight: 760; padding: 8px 12px; border-radius: 999px; color: rgba(255,252,246,.9); background: rgba(3,26,22,.24); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity .28s ease, transform .28s ease; }
    .tile-info { position: absolute; z-index: 5; inset: 20px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; direction: rtl; opacity: 0; transform: translateY(12px); filter: blur(8px); transition: opacity .38s ease, transform .38s ease, filter .38s ease; }
    .portfolio-tile:hover .tile-info, .portfolio-tile.is-auto-active .tile-info { opacity: 1; transform: translateY(0); filter: blur(0); }
    .portfolio-tile:hover .tile-short, .portfolio-tile.is-auto-active .tile-short { opacity: 0; transform: translateY(8px); }
    .tile-info strong { font-size: clamp(18px, 2vw, 30px); line-height: 1.25; font-weight: 850; margin-bottom: 10px; }
    .tile-info small { font-size: clamp(12px, 1vw, 14px); line-height: 1.7; color: rgba(255,252,246,.78); }
    .tile-a { grid-column: 1 / 3; grid-row: 1 / 4; }
    .tile-b { grid-column: 3 / 7; grid-row: 1 / 4; }
    .tile-c { grid-column: 1 / 5; grid-row: 4 / 7; }
    .tile-d { grid-column: 5 / 7; grid-row: 4 / 7; }
    .tile-e { grid-column: 1 / 3; grid-row: 1 / 7; }
    .tile-f { grid-column: 3 / 7; grid-row: 1 / 3; }
    .tile-g { grid-column: 3 / 5; grid-row: 3 / 7; }
    .tile-h { grid-column: 5 / 7; grid-row: 3 / 7; }
    .tile-i { grid-column: 1 / 4; grid-row: 1 / 4; }
    .tile-j { grid-column: 4 / 7; grid-row: 1 / 4; }
    .tile-k { grid-column: 1 / 3; grid-row: 4 / 7; }
    .tile-l { grid-column: 3 / 7; grid-row: 4 / 7; }
    .bg-brand { --bg: linear-gradient(135deg, rgba(255,216,107,.22), rgba(15,76,58,.86)), radial-gradient(circle at 30% 30%, #f4d46b, transparent 28%), linear-gradient(135deg, #153b31, #061c17); }
    .bg-web { --bg: linear-gradient(135deg, rgba(3,26,22,.24), rgba(15,76,58,.72)), repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px), linear-gradient(135deg, #244f42, #081f1a); }
    .bg-app { --bg: radial-gradient(circle at 25% 20%, rgba(255,216,107,.38), transparent 26%), linear-gradient(150deg, #0f4c3a, #06231d 60%, #d6a84f); }
    .bg-ai { --bg: radial-gradient(circle at 75% 30%, rgba(255,216,107,.44), transparent 24%), repeating-radial-gradient(circle at 48% 44%, rgba(255,255,255,.09) 0 2px, transparent 2px 18px), linear-gradient(135deg, #031a16, #0f4c3a); }
    .bg-seo { --bg: linear-gradient(120deg, rgba(255,216,107,.28), transparent 45%), linear-gradient(135deg, #123d32, #031a16); }
    .bg-content { --bg: radial-gradient(circle at 20% 75%, rgba(255,216,107,.36), transparent 24%), linear-gradient(135deg, #0c332b, #654f28); }
    .bg-event { --bg: linear-gradient(135deg, rgba(15,76,58,.85), rgba(214,168,79,.24)), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px), #09251f; }
    .bg-academy { --bg: radial-gradient(circle at 68% 20%, rgba(255,216,107,.38), transparent 24%), linear-gradient(135deg, #143e34, #061b17); }
    .bg-platform { --bg: linear-gradient(135deg, rgba(3,26,22,.15), rgba(15,76,58,.76)), conic-gradient(from 180deg at 45% 50%, #0f4c3a, #d6a84f, #082e26, #0f4c3a); }
    .bg-transform { --bg: radial-gradient(circle at 80% 20%, rgba(255,216,107,.42), transparent 25%), linear-gradient(145deg, #0b2d26, #14503f); }
    .bg-visual { --bg: linear-gradient(120deg, rgba(255,216,107,.32), transparent 40%), repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 18px), #0b2e27; }
    .bg-commerce { --bg: radial-gradient(circle at 40% 35%, rgba(255,216,107,.35), transparent 25%), linear-gradient(135deg, #0f4c3a, #031a16); }

    .team-section {
      display: grid;
      place-items: end center;
      padding: var(--portfolio-top) clamp(18px, 4vw, 64px) calc(max(22px, env(safe-area-inset-bottom)) + var(--float-menu-space));
    }
    .team-card {
      position: relative;
      width: min(1040px, 88vw);
      max-height: 100%;
      align-self: center;
      padding: 64px 16px 64px 16px;
      border-radius: clamp(32px, 3.8vw, 58px);
      overflow: hidden;
      border: 1px solid rgba(255,216,107,.18);
      background: linear-gradient(145deg, rgba(255,252,246,.10), rgba(255,252,246,.04)), linear-gradient(180deg, rgba(15,76,58,.45), rgba(3,26,22,.70));
      box-shadow: 0 34px 110px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      display: inline-grid;
      grid-template-columns: minmax(280px, .86fr) 1.18fr;
      gap: clamp(24px, 4vw, 56px);
      align-items: center;
      opacity: 0;
      transform: translateY(28px) scale(.985);
      filter: blur(12px);
      will-change: opacity, transform, filter;
    }
    .team-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 24% 28%, rgba(255,216,107,.24), transparent 27rem), linear-gradient(180deg, rgba(255,255,255,.055), transparent 45%);
    }
    .team-card::after {
      content: '';
      position: absolute;
      inset: 20px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
    }
    .member-photo {
      --photo-radius: 42% 58% 48% 52% / 48% 40% 60% 52%;
      position: relative;
      z-index: 2;
      width: min(360px, 90%);
      aspect-ratio: 1/1;
      margin-inline: auto;
      border-radius: var(--photo-radius);
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,216,107,.18), transparent 56%),
        linear-gradient(145deg, rgba(255,252,246,.10), rgba(15,76,58,.26)),
        rgba(255,252,246,.07);
      border: 1px solid rgba(255,216,107,.24);
      box-shadow:
        0 0 80px rgba(255,216,107,.15),
        0 24px 70px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.14);
      overflow: hidden;
      isolation: isolate;
    }
    .member-photo img {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      transform: scale(1.045);
      filter: grayscale(.18) sepia(.20) saturate(.86) contrast(1.08) brightness(.92);
      mix-blend-mode: luminosity;
      transition: transform .65s cubic-bezier(.22,1,.36,1), filter .65s cubic-bezier(.22,1,.36,1), mix-blend-mode .65s ease;
    }
    .member-photo::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,252,246,.20), transparent 28%),
        radial-gradient(circle at 50% 72%, rgba(15,76,58,.46), transparent 62%),
        linear-gradient(145deg, rgba(255,216,107,.20), rgba(3,26,22,.08) 46%, rgba(3,26,22,.42));
      mix-blend-mode: soft-light;
      opacity: .92;
    }
    /* .member-photo::after {
      content: '';
      position: absolute;
      inset: 13px;
      z-index: 3;
      pointer-events: none;
      border-radius: calc(var(--photo-radius));
      border: 1px solid rgba(255,255,255,.13);
      box-shadow:
        inset 0 0 0 1px rgba(255,216,107,.08),
        inset 0 -30px 55px rgba(3,26,22,.28);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 72% 24%, rgba(255,216,107,.16), transparent 33%);
    } */
    .team-card:hover .member-photo img {
      transform: scale(1.085);
      filter: grayscale(.06) sepia(.16) saturate(.95) contrast(1.12) brightness(.98);
      mix-blend-mode: normal;
    }
    .member-photo span {
      position: relative;
      z-index: 4;
      font-size: clamp(84px, 10vw, 142px);
      font-weight: 900;
      color: rgba(255,216,107,.84);
      text-shadow: 0 0 34px rgba(255,216,107,.32);
    }
    .member-photo img + span {
      opacity: 0;
    }
.member-info {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
  padding: 4px;
}
    .team-kicker {
      margin: 0 0 18px;
      display:  none !important;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,216,107,.18);
      background: rgba(255,252,246,.05);
      color: rgba(255,216,107,.88);
      font-size: 13px;
    }
    .member-info h2 {
      margin: 0;
      font-size: clamp(32px, 4vw, 64px);
      line-height: 1.08;
      letter-spacing: -.055em;
    }
    .member-info h3 {
      margin: 14px 0 0;
      font-size: clamp(16px, 1vw, 20px);
      line-height: 1.65;
      color: rgba(255,252,246,.84);
      font-weight: 680;
    }
.member-info p {
  text-align: justify;
  margin: 18px 0 0 18px;
  max-width: min(650px, 100%);
  font-size: clamp(14px, 1.3vw, 14px);
  line-height: 2.05;
  color: rgba(255,252,246,.70);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-break: normal;
}
    .skill-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 26px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 8px;
  scrollbar-width: none;
  scrollbar-color: rgba(255,216,107,.32) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.skill-list.is-dragging {
  cursor: grabbing;
}

.skill-list.is-dragging span {
  pointer-events: none;
}

.skill-list::-webkit-scrollbar {
  height: 6px;
}

.skill-list::-webkit-scrollbar-thumb {
  background: rgba(255,216,107,.32);
  border-radius: 999px;
}

.skill-list span {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255,252,246,.78);
  background: rgba(255,252,246,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}
    .member-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }
    .member-links a {
      text-decoration: none;
      color: #12382f;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      padding: 13px 20px;
      border-radius: 999px;
      font-weight: 720;
      font-size: 14px;
      box-shadow: 0 18px 40px rgba(214,168,79,.18);
    }
    .member-links a + a {
      color: rgba(255,252,246,.82);
      background: rgba(255,252,246,.055);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
    }


    .contact-section {
      display: grid;
      place-items: end center;
      padding: var(--portfolio-top) clamp(18px, 4vw, 64px) calc(max(22px, env(safe-area-inset-bottom)) + var(--float-menu-space));
    }
    .contact-card {
      position: relative;
      width: min(1120px, 90vw);
      max-height: 100%;
      align-self: center;
      padding: 64px 16px 64px 16px;
      border-radius: clamp(32px, 3.8vw, 58px);
      overflow: hidden;
      border: 1px solid rgba(255,216,107,.20);
      background:
        linear-gradient(145deg, rgba(255,252,246,.13), rgba(255,252,246,.045)),
        linear-gradient(180deg, rgba(15,76,58,.46), rgba(3,26,22,.72));
      box-shadow: 0 34px 110px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(24px, 4vw, 56px);
      align-items: stretch;
      padding: clamp(26px, 4.2vw, 64px);
      opacity: 0;
      transform: translateY(30px) scale(.985);
      filter: blur(12px);
      will-change: opacity, transform, filter;
    }
    .contact-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 72% 24%, rgba(255,216,107,.22), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 44%);
    }
    .contact-card::after {
      content: '';
      position: absolute;
      inset: 20px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,.08);
      pointer-events: none;
    }
    .contact-copy {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .contact-kicker {
      margin: 0 0 18px;
      display: inline-flex;
      width: max-content;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,216,107,.18);
      background: rgba(255,252,246,.05);
      color: rgba(255,216,107,.88);
      font-size: 13px;
    }
    .contact-copy h2 {
      margin: 0;
      font-size: clamp(36px, 4.7vw, 68px);
      line-height: 1.1;
      letter-spacing: -.055em;
      color: var(--warm-white);
    }
    .contact-copy > p {
      margin: 18px 0 0;
      max-width: 620px;
      font-size: clamp(14px, 1.3vw, 18px);
      line-height: 2.05;
      color: rgba(255,252,246,.72);
    }
    .office-grid {
      display: grid;
      gap: 14px;
      margin-top: 30px;
    }
    .office-box {
      padding: 18px 20px;
      border-radius: 28px;
      background: rgba(255,252,246,.06);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    }
    .office-box span {
      display: inline-flex;
      color: rgba(255,216,107,.90);
      font-size: 13px;
      margin-bottom: 8px;
    }
    .office-box strong {
      display: block;
      color: rgba(255,252,246,.95);
      font-size: clamp(17px, 1.5vw, 22px);
      line-height: 1.6;
    }
    .office-box p {
      margin: 6px 0 0;
      color: rgba(255,252,246,.68);
      font-size: clamp(13px, 1.08vw, 15px);
      line-height: 1.9;
    }
    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
      justify-content: center;
    }
    .contact-actions a {
      text-decoration: none;
      color: #12382f;
      background: linear-gradient(135deg, #FFD86B, #D6A84F);
      padding: 14px 22px;
      border-radius: 999px;
      font-weight: 780;
      box-shadow: 0 18px 40px rgba(214,168,79,.20);
    }
    .contact-actions a + a {
      color: rgba(255,252,246,.82);
      background: rgba(255,252,246,.055);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: none;
    }
    .map-panel {
      position: relative;
      z-index: 2;
      border-radius: 40px;
      overflow: hidden;
      min-height: 360px;
      background:
        linear-gradient(135deg, rgba(246,241,231,.84), rgba(255,252,246,.68)),
        radial-gradient(circle at 50% 50%, rgba(15,76,58,.20), transparent 60%);
      border: 1px solid rgba(255,255,255,.20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 24px 70px rgba(0,0,0,.18);
      background-image: url("img/map.webp");
      background-position-x: center;
    background-position-y: center;
    background-size: 110vh;
    }
    .map-glow {
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(circle at 34% 42%, rgba(255,216,107,.36), transparent 24%),
        radial-gradient(circle at 70% 62%, rgba(15,76,58,.20), transparent 28%);
      filter: blur(12px);
      opacity: .9;
    }
    .map-lines {
      position: absolute;
      inset: 0;
      opacity: .48;
      background:
        linear-gradient(90deg, transparent 0 15%, rgba(15,76,58,.22) 15% 16%, transparent 16% 44%, rgba(15,76,58,.18) 44% 45%, transparent 45% 70%, rgba(15,76,58,.22) 70% 71%, transparent 71%),
        linear-gradient(0deg, transparent 0 18%, rgba(15,76,58,.20) 18% 19%, transparent 19% 38%, rgba(15,76,58,.18) 38% 39%, transparent 39% 62%, rgba(15,76,58,.20) 62% 63%, transparent 63% 80%, rgba(15,76,58,.16) 80% 81%, transparent 81%);
    }
    .map-lines i {
      position: absolute;
      width: 74%;
      height: 2px;
      border-radius: 999px;
      background: rgba(15,76,58,.28);
      transform-origin: center;
    }
    .map-lines i:nth-child(1) { top: 28%; left: 4%; transform: rotate(-18deg); }
    .map-lines i:nth-child(2) { top: 52%; left: 18%; transform: rotate(11deg); }
    .map-lines i:nth-child(3) { top: 74%; left: 4%; transform: rotate(-8deg); }
    .map-lines i:nth-child(4) { top: 16%; left: 34%; transform: rotate(82deg); }
    .map-lines i:nth-child(5) { top: 36%; left: -6%; transform: rotate(74deg); }
    .map-lines i:nth-child(6) { top: 62%; left: 28%; transform: rotate(92deg); }
    .map-pin {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(3,26,22,.72);
      color: var(--warm-white);
      font-size: 13px;
      border: 1px solid rgba(255,216,107,.22);
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .map-pin b {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--gold-light);
      box-shadow: 0 0 20px rgba(255,216,107,.85);
    }
    .pin-isfahan { right: 16%; bottom: 24%; }
    .pin-tehran { left: 14%; top: 22%; }

    .service.reveal-bg::before{opacity:1}
    .service.reveal-overlay::after{opacity:1;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
    .service.reveal-card .service-card{opacity:1 !important;transform:translateY(0) scale(1) !important;filter:blur(0) !important;transition:opacity .55s ease,transform .55s ease,filter .55s ease;}
@media (max-width: 720px) {
      .service::before { transform: scale(1.02); background-position: center center; /*filter: blur(1.6px) brightness(.54) saturate(.88);*/ }
      .service::after {
        background: linear-gradient(180deg, rgba(3,26,22,.20) 0%, rgba(3,26,22,.46) 100%),
          linear-gradient(90deg, rgba(3,26,22,.20) 0%, rgba(3,26,22,0.1) 18%, rgba(3,26,22,.02) 82%, rgba(3,26,22,.20) 100%),
          radial-gradient(circle at 50% 50%, rgba(3,26,22,.08) 0%, rgba(3,26,22,.12) 42%, rgba(3,26,22,.34) 78%);}
      html { scroll-snap-type: y mandatory; }
      .section { scroll-snap-align: start; scroll-snap-stop: always; }
      :root { --float-menu-space: 74px; }
      .floating-menu {
        width: min(92vw, 430px);
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 6px;
        bottom: max(6px, env(safe-area-inset-bottom));
      }
      .floating-menu button {
        padding: 11px 6px;
        font-size: 11px;
      }
      .hero-text { width: min(88vw, 390px); }
      .hero-kicker { margin-bottom: 14px; letter-spacing: .15em; }
      .hero-title-fa { font-size: clamp(34px, 10.4vw, 46px); }
      .hero-title-en { font-size: clamp(21px, 5.7vw, 28px); margin-top: 8px; }
      .scroll-cue { bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); font-size: 13px; }
      .service { padding-inline: 18px; padding-bottom: calc(18px + var(--float-menu-space)); }
      .service-card { width: min(91vw, 430px); height: min(520px, calc(100% - 8px)); max-height: none; min-height: 0; padding: 54px 24px 28px; border-radius: 34px; }
      .service-content { width: 100%; }
      .service-category { margin-bottom: 18px; font-size: 12.5px; padding: 9px 13px; }
      .service-title {padding: 8px; font-size: clamp(34px, 9vw, 46px); }
      .service-lead { padding: 8px;font-size: 15px; line-height: 1.9; margin-top: 14px; }
      .service-text { padding: 8px;font-size: 13.4px; line-height: 2.0; margin-top: 14px; }
.tags {
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.tags li {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11.6px;
  padding: 8px 11px;
}
      .service-cta { width: 100%; margin-top: 24px; padding: 15px 22px; }
      .portfolio-brand { max-width: min(40vw, 120px); }
      .portfolio-brand-fa { font-size: clamp(14px, 4vw, 17px); font-weight: 540; line-height: 1.85; letter-spacing: -.015em; }
      .portfolio-brand-en { font-size: clamp(8.5px, 2.35vw, 10.5px); font-weight: 420; line-height: 1.15; margin-top: 0; }
      .portfolio-board { left: 12px; right: 12px; border-radius: 28px; bottom: calc(10px + var(--float-menu-space)); }
      .portfolio-nav { width: 42px; height: 42px; }
      .portfolio-nav-prev { right: 8px; left: auto; }
      .portfolio-nav-next { left: 8px; right: auto; }
      .portfolio-track { gap: 8px; padding: 8px; }
      .mosaic-page { flex-basis: calc(100vw - 40px); gap: 8px; }
      .portfolio-tile { border-radius: 18px; }
      .tile-short { inset-inline-start: 10px; bottom: 10px; font-size: 11.5px; padding: 7px 9px; }
      .tile-info { inset: 14px; opacity: 1; filter: blur(0); transform: none; justify-content: flex-end; }
      .tile-info strong { font-size: 17px; }
      .tile-info small { font-size: 11px; line-height: 1.6; }
      .team-section { padding: var(--portfolio-top) 14px calc(max(16px, env(safe-area-inset-bottom)) + var(--float-menu-space)); place-items: end center; }
      .team-card {
        width: min(90vw, 700px);
        height: 100%;
        max-height: none;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 26px 22px;
        border-radius: 34px;
        text-align: center;
      }
      .member-info {
  padding: 4px;
}
      .member-photo { width: min(190px, 54vw); }
      .member-info h2 { font-size: clamp(32px, 9vw, 44px); }
      .member-info h3 { font-size: 15.5px; line-height: 1.8; }
.member-info p {
  margin: 8px;
  font-size: 13.2px;
  line-height: 1.95;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.skill-list {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
}

.skill-list span {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11.5px;
  padding: 8px 10px;
}
      .member-links { justify-content: center; margin-top: 22px; }
      .member-links a { padding: 12px 16px; font-size: 12.5px; }

      .contact-section { padding: var(--portfolio-top) 14px calc(max(16px, env(safe-area-inset-bottom)) + var(--float-menu-space)); place-items: end center; }
      .contact-card {
        width: min(92vw, 430px);
        height: 100%;
        max-height: none;
        grid-template-columns: 1fr;
        gap: 0px;
        padding: 24px 20px;
        border-radius: 34px;
        grid-template-rows: max-content;
      }
      .contact-copy {  align-self: center; display: block; max-height: fit-content;     padding-right: 10px;         padding-left: 10px; text-align: center; align-items: center; }
      .contact-kicker { margin-bottom: 12px; }
      .contact-copy h2 { font-size: clamp(30px, 8.8vw, 42px); }
      .contact-copy > p { font-size: 13px; line-height: 1.9; margin-top: 12px; }
      .office-grid { margin-top: 18px; gap: 10px; width: 100%; }
      .office-box { border-radius: 22px; padding: 14px 15px; }
      .office-box strong { font-size: 15.5px; }
      .office-box p { font-size: 12.5px; line-height: 1.75; }
      .contact-actions { margin-top: 18px; justify-content: center; }
      .contact-actions a { padding: 12px 16px; font-size: 12.5px; }
      .map-panel {margin: 20px; border-radius: 26px;min-height: unset; }

    }
    @media (max-width: 370px) {
      .service-card { padding-inline: 20px; min-height: 500px; }
      .service-text { display: none; }
      .service-title { font-size: 32px; }
      .tags li { font-size: 11.2px; }
      .portfolio-brand { max-width: min(39vw, 108px); }
      .portfolio-brand-fa { font-size: 11.5px; font-weight: 520; }
      .portfolio-brand-en { font-size: 8.8px; font-weight: 400; }
      .team-card { padding: 22px 18px; }
      .member-info p { display: none; }
      /*.map-panel { display: none; }
      .contact-copy > p { display: none; }*/
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .scroll-cue::before, .scroll-cue::after, .lantern svg, .lantern::before { animation: none; }
    }
    .language-switcher{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);z-index:80;display:flex;gap:6px;padding:7px;border-radius:999px;border:1px solid rgba(255,216,107,.22);background:rgba(3,26,22,.48);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08)}
    .language-switcher a{text-decoration:none;color:rgba(255,252,246,.76);font-size:12px;font-weight:700;line-height:1;border-radius:999px;padding:10px 12px;letter-spacing:.02em;background:transparent;border:1px solid transparent;transition:background .25s ease,color .25s ease,border-color .25s ease}
    .language-switcher a:hover{color:rgba(255,252,246,.98);background:rgba(255,252,246,.07)}
    .language-switcher a.is-active{color:#12382f;background:linear-gradient(135deg,#FFD86B,#D6A84F);box-shadow:0 10px 24px rgba(214,168,79,.20)}
    html[lang="en"] .portfolio-scroll,html[lang="en"] .portfolio-track,html[lang="en"] .tile-info{direction:ltr}
    html[lang="en"] .portfolio-brand{text-align:left;left:calc(50% + var(--fixed-logo-half-size) + 12px);transform:translateX(0) translateY(calc(-50% + 12px))}
    html[lang="en"] .portfolio-brand-fa,html[lang="en"] .portfolio-brand-en{text-align-last:left;direction:ltr}
    @media (max-width:720px){.language-switcher{top:max(12px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);padding:5px}.language-switcher a{font-size:11px;padding:8px 9px}}