* { font-family: 'Vazirmatn', sans-serif; }
  html { scroll-behavior: smooth; }
  body { background: #f6efe4; color: #3b2418; overflow-x: clip; }

  .grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .hero-bg {
    background:
      radial-gradient(ellipse at 20% 20%, rgba(212,162,76,.25), transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(181,87,58,.25), transparent 50%),
      linear-gradient(160deg, #2a1912 0%, #3b2418 45%, #4d2f1e 100%);
  }

  .steam { position: absolute; bottom: 100%; width: 14px; height: 70px; border-radius: 50%;
    background: linear-gradient(to top, rgba(255,255,255,.55), transparent);
    filter: blur(6px); animation: rise 3.2s ease-in-out infinite; opacity: 0; }
  .steam:nth-child(2) { animation-delay: .9s; left: 30%; }
  .steam:nth-child(3) { animation-delay: 1.8s; left: 60%; }
  @keyframes rise {
    0% { transform: translateY(0) scaleX(1); opacity: 0; }
    30% { opacity: .8; }
    100% { transform: translateY(-90px) scaleX(1.6); opacity: 0; }
  }

  .float { animation: float 6s ease-in-out infinite; }
  .float-slow { animation: float 9s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-18px) rotate(calc(var(--r, 0deg) + 6deg)); } }

  .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .delay-1 { transition-delay: .1s } .delay-2 { transition-delay: .2s } .delay-3 { transition-delay: .3s } .delay-4 { transition-delay: .4s } .delay-5 { transition-delay: .5s }

  .card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
  @media (hover: hover) and (pointer: fine) {
    .card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(59,36,24,.45); }
  }
  .card:hover .bag { transform: rotate(-4deg) scale(1.05); }
  .bag { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

  .bean-shape { width: 44px; height: 68px; border-radius: 50%; position: relative;
    background: linear-gradient(145deg, #7a4a2b, #3b2418); box-shadow: inset -6px -6px 12px rgba(0,0,0,.4), 4px 8px 16px rgba(0,0,0,.35); }
  .bean-shape::after { content:''; position:absolute; top:8%; bottom:8%; left:48%; width:4px; border-radius:4px;
    background: linear-gradient(#2a1912, #8a5a38 50%, #2a1912); transform: rotate(6deg); }

  .roast-dot { width: 10px; height: 10px; border-radius: 9999px; display:inline-block; }

  .btn-gold { background: linear-gradient(135deg, #d4a24c, #b98332); box-shadow: 0 10px 30px -10px rgba(212,162,76,.7); transition: all .3s; }
  .btn-gold:hover, .btn-gold:focus-visible { background: linear-gradient(135deg, #e0b25c, #c99341); box-shadow: 0 16px 36px -10px rgba(212,162,76,.95); }
  .btn-gold:active { transform: translateY(1px); }
  @media (hover: hover) and (pointer: fine) {
    .btn-gold:hover { transform: translateY(-2px); }
  }

  /* ---------- Header & footer interactive states ---------- */
  .logo-link { transition: transform .3s ease; }
  .logo-link:hover, .logo-link:focus-visible { transform: translateY(-1px); }
  .logo-badge { transition: box-shadow .35s ease, transform .35s ease; }
  .logo-link:hover .logo-badge, .logo-link:focus-visible .logo-badge { transform: rotate(-6deg); box-shadow: 0 0 0 8px rgba(212,162,76,.28), 0 0 0 16px rgba(212,162,76,.10); }

  .nav-link { position: relative; padding-bottom: 3px; color: inherit; transition: color .25s ease; }
  .nav-link::after { content: ''; position: absolute; right: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: linear-gradient(90deg, #d4a24c, #b5573a); transition: width .3s ease; }
  .nav-link:hover, .nav-link:focus-visible { color: #b5573a; }
  .nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }

  .icon-btn { transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
  .icon-btn:hover, .icon-btn:focus-visible { background-color: #6b4226; box-shadow: 0 10px 24px -12px rgba(59,36,24,.85); }
  .icon-btn:active { transform: scale(.95); }

  .icon-btn-ghost { transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
  .icon-btn-ghost:hover, .icon-btn-ghost:focus-visible { background-color: #e9dcc7; border-color: #c8a97e; }
  .icon-btn-ghost:active { transform: scale(.95); }

  .mob-link { transition: color .25s ease; }
  .mob-link:hover, .mob-link:focus-visible { color: #b5573a; }

  .foot-link { transition: color .25s ease, padding-right .25s ease; }
  .foot-link:hover, .foot-link:focus-visible { color: #d4a24c; padding-right: .4rem; }

  a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(212,162,76,.55); outline-offset: 2px; }

  .tab { color: #3b2418; }
  .tab.active { background: #3b2418; color: #f6efe4; }
  @media (hover: hover) and (pointer: fine) {
    .tab:not(.active):hover { background: rgba(59,36,24,.08); color: #b5573a; }
  }
  .tab:focus-visible { outline: 3px solid rgba(212,162,76,.55); outline-offset: 2px; }

  .divider { height: 2px; background: linear-gradient(90deg, transparent, #d4a24c, transparent); }

  .toast { transform: translateY(120%); opacity: 0; transition: all .45s cubic-bezier(.2,.8,.2,1); }
  .toast.show { transform: none; opacity: 1; }

  .num { font-variant-numeric: tabular-nums; }

  .marquee { display:flex; gap:3rem; width:max-content; animation: marquee 30s linear infinite; }
  @keyframes marquee { from { transform: translateX(0);} to { transform: translateX(50%);} }

  .ring-glow { box-shadow: 0 0 0 6px rgba(212,162,76,.15), 0 0 0 14px rgba(212,162,76,.06); }

  .step-line::before { content:''; position:absolute; top:28px; right:50%; width:100%; height:2px; background: repeating-linear-gradient(90deg, #c8a97e 0 8px, transparent 8px 16px); }
  .step:last-child .step-line::before { display:none; }
  @media (max-width: 1023px) { .step-line::before { display:none; } }

  ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #e9dcc7; } ::-webkit-scrollbar-thumb { background: #6b4226; border-radius: 10px; }

  #mobileMenu { transition: max-height .4s ease, opacity .3s; max-height: 0; opacity: 0; overflow: hidden; }
  #mobileMenu.open { max-height: 400px; opacity: 1; }

  input[type=range] { accent-color: #d4a24c; }

  /* ---------- Site search (سرچ‌بار نویگیشن‌بار) ---------- */
  .js-site-search-item.is-active,
  .js-site-search-item:hover { background: #f6efe4; }
  .js-site-search-results { max-height: 320px; overflow-y: auto; }

  /* ---------- Article content (دانستنیجات) ---------- */
  /* Tailwind preflight تیترها را ریست می‌کند؛ بدنه‌ی CKEditor را دستی استایل می‌دهیم */
  .article-content { line-height: 2.1; color: #3b2418; font-size: 1rem; }
  .article-content > *:first-child { margin-top: 0; }
  .article-content p { margin: 0 0 1.25rem; }
  .article-content h2 { font-size: 1.5rem; font-weight: 900; margin: 2rem 0 1rem; }
  .article-content h3 { font-size: 1.25rem; font-weight: 800; margin: 1.5rem 0 .75rem; }
  .article-content h4 { font-size: 1.1rem; font-weight: 700; margin: 1.25rem 0 .6rem; }
  .article-content ul, .article-content ol { margin: 0 0 1.25rem; padding-right: 1.5rem; }
  .article-content ul { list-style: disc; }
  .article-content ol { list-style: decimal; }
  .article-content li { margin-bottom: .5rem; }
  .article-content blockquote {
    border-right: 4px solid #d4a24c; background: #f6efe4;
    padding: 1rem 1.25rem; border-radius: .75rem; margin: 0 0 1.25rem; font-weight: 500;
  }
  .article-content img { max-width: 100%; height: auto; border-radius: 1rem; margin: 1.5rem auto; display: block; }
  .article-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
  .article-content th, .article-content td { border: 1px solid #e9dcc7; padding: .5rem .75rem; text-align: right; }
  .article-content th { background: #f6efe4; font-weight: 800; }
  .article-content a { color: #b5573a; text-decoration: underline; }
  .article-content strong { font-weight: 800; }
  .article-content hr { border-color: #e9dcc7; margin: 2rem 0; }

  /* ---------- Responsive / mobile UX improvements ---------- */

  /* Keep intentional horizontal scrollers inside their own components. */
  body.menu-open { overflow: hidden; }

  /* Better touch target for sliders. */
  input[type=range] { min-height: 32px; }

  /* Avoid expensive decorative texture on small screens. */
  @media (max-width: 640px) {
    .grain { opacity: .035; }

    .steam {
      filter: blur(4px);
      animation-duration: 4s;
    }

    .marquee { animation-duration: 45s; }

    .toast {
      width: max-content;
      max-width: calc(100vw - 2rem);
      text-align: center;
      white-space: normal;
      line-height: 1.7;
    }

    #mobileMenu {
      max-height: 0;
      overflow: hidden;
    }

    #mobileMenu.open {
      max-height: 70vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .hero-visual-bean {
      transform: scale(.75);
    }
  }

  /* Respect users who prefer reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }