:root {
      --c-bg: #0c1918;
      --c-surface: #0c2225;
      --c-gold: #ebca7f;
      --c-cream: #fbf3de;
      --c-muted: rgb(251 243 222 / .7);
      --c-line: rgb(235 202 127 / .18);
      --c-card: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 90%, var(--c-gold)), var(--c-surface));
      --c-card-deep: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 90%, var(--c-gold)), var(--c-bg));
      --font-fa: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
      --r-sm: 10px;
      --r-md: 18px;
      --r-lg: 28px;
      --wrap: 1180px;
      --bar-h: 4.25rem;
      --ease: cubic-bezier(.22, .8, .24, 1);
    }

    /* ========== 2. Base ========== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--c-bg);
      color: var(--c-cream);
      font: 400 1rem/1.95 var(--font-fa);
      text-rendering: optimizeLegibility;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    h1,
    h2,
    h3,
    p,
    ul {
      margin: 0;
    }

    ul {
      padding: 0;
      list-style: none;
    }

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

    button {
      font: inherit;
      color: inherit;
    }

    :focus-visible {
      outline: 2px solid var(--c-gold);
      outline-offset: 3px;
    }

    .icon {
      width: 1.4em;
      height: 1.4em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .wrap {
      width: min(100% - 2.5rem, var(--wrap));
      margin-inline: auto;
    }

    .section {
      padding-block: clamp(3rem, 7vw, 6rem);
    }

    .section-title {
      font-size: clamp(1.5rem, 3.2vw, 2.2rem);
      font-weight: 800;
      line-height: 1.55;
    }

    .section-lead {
      color: var(--c-muted);
      max-width: 62ch;
      margin-top: .75rem;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: .6rem;
      color: var(--c-gold);
      font-size: .9rem;
      font-weight: 700;
    }

    .bg-surface {
      background: var(--c-surface);
      border-block: 1px solid var(--c-line);
    }

    /* ========== 3. Category bar (top of page) ========== */
    .cats {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--c-line);
      background: rgb(12 25 24 / .88);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      padding-top: env(safe-area-inset-top, 0px);
    }

    .cats-inner {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-height: var(--bar-h);
    }

    .cats-label {
      display: none;
      flex: none;
      color: var(--c-gold);
      font-weight: 800;
      font-size: .95rem;
    }

    .cats-list {
      display: flex;
      flex: 1;
      gap: .5rem;
      padding: .75rem 0;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
      padding-inline: 1.5rem;
    }

    .cats-list::-webkit-scrollbar {
      display: none;
    }

    .chip {
      flex: none;
      scroll-snap-align: center;
      padding: .4rem 1.1rem;
      border: 1px solid var(--c-line);
      border-radius: 999px;
      background: transparent;
      font-size: .92rem;
      font-weight: 500;
      line-height: 1.8;
      cursor: pointer;
      white-space: nowrap;
      transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
    }

    .chip small {
      margin-inline-start: .4rem;
      opacity: .65;
      font-size: .78rem;
    }

    .chip:hover {
      border-color: var(--c-gold);
      color: var(--c-gold);
      transform: translateY(-1px);
    }

    .chip[aria-current="true"] {
      background: linear-gradient(90deg, var(--c-cream), var(--c-gold));
      border-color: transparent;
      color: var(--c-bg);
      font-weight: 700;
    }

    .chip.skeleton-chip {
      width: 5.5rem;
      height: 2.2rem;
      border-color: transparent;
      pointer-events: none;
    }

    /* ========== 4. Hero ========== */
    .hero {
      position: relative;
      isolation: isolate;
      text-align: center;
      padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
      background: radial-gradient(60% 70% at 50% 0%, rgb(235 202 127 / .16), transparent 70%), linear-gradient(180deg, var(--c-surface), var(--c-bg) 95%);
    }

    .brand {
      width: clamp(110px, 13vw, 150px);
      height: auto;
      margin: 0 auto 1.5rem;
    }

    .hero h1 {
      font-size: clamp(2rem, 5vw, 3.3rem);
      font-weight: 800;
      line-height: 1.45;
    }

    .hero h1 span {
      display: block;
      color: var(--c-gold);
    }

    .hero p {
      max-width: 60ch;
      margin: 1.1rem auto 0;
      color: var(--c-muted);
      font-size: 1.05rem;
    }

    /* ========== 5. Posts grid + cards ========== */
    .posts-section {
      padding-block: 1rem clamp(3rem, 6vw, 5rem);
      scroll-margin-top: calc(var(--bar-h) + 1rem);
    }

    .results {
      margin-bottom: 1.5rem;
      color: var(--c-muted);
      font-size: .92rem;
      min-height: 1.8em;
    }

    .results strong {
      color: var(--c-gold);
    }

    .grid {
      display: grid;
      gap: 1.5rem;
    }

    .post {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--c-line);
      border-radius: var(--r-md);
      background: var(--c-card);
      transition: border-color .5s ease, box-shadow .5s ease;
    }

    .post:hover,
    .post:focus-within {
      border-color: rgb(235 202 127 / .55);
      box-shadow: 0 0 0 1px rgb(235 202 127 / .18), 0 0 34px -6px rgb(235 202 127 / .28);
    }

    .post-media {
      position: relative;
      display: block;
      overflow: hidden;
      aspect-ratio: 16 / 10;
      background: var(--c-surface);
    }

    .post-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .post-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgb(12 25 24 / .65));
      pointer-events: none;
    }

    .post-ph {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: var(--c-gold);
      background: radial-gradient(60% 70% at 50% 40%, rgb(235 202 127 / .18), transparent), var(--c-surface);
    }

    .post-ph .icon {
      width: 3rem;
      height: 3rem;
      opacity: .8;
    }

    .tag {
      position: absolute;
      z-index: 1;
      top: .9rem;
      inset-inline-start: .9rem;
      padding: .15rem .85rem;
      border-radius: 999px;
      background: var(--c-gold);
      color: var(--c-bg);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.8;
    }

    .post-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: .6rem;
      padding: 1.3rem 1.4rem 1.4rem;
    }

    .post-meta {
      display: flex;
      align-items: center;
      gap: .5rem;
      color: var(--c-gold);
      font-size: .82rem;
      font-weight: 500;
    }

    .post-meta .icon {
      width: 1rem;
      height: 1rem;
    }

    .post-title {
      font-size: 1.12rem;
      font-weight: 800;
      line-height: 1.75;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color:#fff;
    }
    
    .post:hover .post-title {
        color: #fff;
    }

    .post-link::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      color: #fff;
    }

    .post-excerpt {
      color: var(--c-muted);
      font-size: .92rem;
      line-height: 1.9;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .more {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-top: auto;
      padding-top: .5rem;
      color: var(--c-gold);
      font-size: .9rem;
      font-weight: 700;
    }

    .more .icon {
      transition: transform .3s var(--ease);
    }

    .post:hover .more .icon {
      transform: translateX(-5px);
    }

    /* Loading skeleton */
    .skeleton .post-media,
    .skeleton .line,
    .skeleton-chip {
      background: linear-gradient(100deg, var(--c-surface) 30%, color-mix(in srgb, var(--c-surface) 80%, var(--c-gold)) 50%, var(--c-surface) 70%) 0 0 / 220% 100%;
      animation: shimmer 1.4s linear infinite;
    }

    .skeleton .post-media::after {
      display: none;
    }

    .skeleton .line {
      height: .9rem;
      border-radius: 6px;
    }

    .skeleton .line:nth-child(1) {
      width: 35%;
    }

    .skeleton .line:nth-child(2) {
      width: 90%;
      height: 1.2rem;
    }

    .skeleton .line:nth-child(3) {
      width: 75%;
    }

    @keyframes shimmer {
      to {
        background-position: -220% 0;
      }
    }

    /* States */
    .state {
      grid-column: 1 / -1;
      padding: 3rem 1.5rem;
      text-align: center;
      border: 1px dashed var(--c-line);
      border-radius: var(--r-lg);
      background: var(--c-card-deep);
    }

    .state .icon {
      width: 2.6rem;
      height: 2.6rem;
      margin: 0 auto 1rem;
      color: var(--c-gold);
    }

    .state p {
      color: var(--c-muted);
      margin-top: .4rem;
    }

    /* ========== 6. Pagination ========== */
    .pager {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: .5rem;
      margin-top: 3rem;
    }

    .pager a,
    .pager span {
      display: grid;
      place-items: center;
      min-width: 2.7rem;
      height: 2.7rem;
      padding-inline: .8rem;
      border: 1px solid var(--c-line);
      border-radius: var(--r-sm);
      background: var(--c-card-deep);
      font-weight: 700;
      transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
    }

    .pager a:hover {
      border-color: var(--c-gold);
      color: var(--c-gold);
      transform: translateY(-2px);
    }

    .pager [aria-current="page"] {
      background: linear-gradient(90deg, var(--c-cream), var(--c-gold));
      border-color: transparent;
      color: var(--c-bg);
    }

    .pager .gap {
      border-color: transparent;
      background: none;
      min-width: 1.5rem;
      padding: 0;
      color: var(--c-muted);
    }

    .pager .nav {
      display: inline-flex;
      gap: .4rem;
      align-items: center;
    }

    .pager [aria-disabled="true"] {
      opacity: .35;
      pointer-events: none;
    }

    .pager .prev .icon {
      transform: rotate(-90deg);
    }

    .pager .next .icon {
      transform: rotate(90deg);
    }

    .pager .nav span:last-child,
    .pager .nav b {
      font-weight: 700;
    }

    /* ========== 7. About blog + CTA ========== */
    .split {
      display: grid;
      gap: 2.5rem;
      align-items: center;
    }

    .prose p {
      color: var(--c-muted);
    }

    .prose p+p {
      margin-top: 1.1rem;
    }

    .topics {
      display: grid;
      gap: 1rem;
    }

    .topic {
      padding: 1.4rem;
      border: 1px solid var(--c-line);
      border-radius: var(--r-md);
      background: var(--c-card-deep);
      transition: border-color .3s, transform .3s var(--ease);
    }

    .topic:hover {
      border-color: var(--c-gold);
      transform: translateY(-4px);
    }

    .topic .badge {
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      margin-bottom: .9rem;
      border-radius: 50%;
      border: 1px solid var(--c-line);
      background: rgb(235 202 127 / .1);
      color: var(--c-gold);
    }

    .topic .icon {
      width: 1.5rem;
      height: 1.5rem;
    }

    .topic h3 {
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.7;
    }

    .topic p {
      margin-top: .3rem;
      color: var(--c-muted);
      font-size: .9rem;
    }

    .cta {
      text-align: center;
      background: linear-gradient(120deg, var(--c-gold), color-mix(in srgb, var(--c-gold) 55%, var(--c-cream)));
      color: var(--c-bg);
    }

    .cta .section-lead {
      color: rgb(12 25 24 / .8);
      margin-inline: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      margin-top: 1.8rem;
      padding: .9rem 1.8rem;
      border-radius: var(--r-sm);
      background: var(--c-bg);
      color: var(--c-gold);
      font-weight: 800;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -12px rgb(12 25 24 / .8);
    }

    .btn .icon {
      transition: transform .25s var(--ease);
    }

    .btn:hover .icon {
      transform: translateX(-4px);
    }

    /* ========== 8. Motion ========== */
    .js .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    .post.is-new {
      animation: rise .6s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 45ms);
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(22px);
      }
    }

    /* ========== 9. Breakpoints ========== */
    @media (min-width: 640px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .topics {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 960px) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .cats-label {
        display: block;
      }

      .split {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }

      .js .reveal {
        opacity: 1;
        transform: none;
      }
    }