/* DANA is a licensed commercial font — no legitimate free CDN exists for it, so it
     can't be embedded without the actual font files. Once you have a licensed copy,
     drop the woff2 files in /fonts/dana/, uncomment the two blocks below, and the
     whole site switches to Dana automatically (font-family already points to it
     first, Vazirmatn is only the fallback). Same approach used on the ArshaBar site.

  @font-face{
    font-family:'Dana'; font-weight:400; font-style:normal; font-display:swap;
    src:url('./fonts/dana/Dana-Regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Dana'; font-weight:700; font-style:normal; font-display:swap;
    src:url('./fonts/dana/Dana-Bold.woff2') format('woff2');
  }
  */

  :root{
    --ink: #1c1815;
    --ink-soft: #2b2419;
    --husk: #ded5c0;
    --husk-soft: #e9e1cf;
    --paper: #f6f2e7;
    --brass: #a1712c;
    --brass-light: #c2924c;
    --brass-dark: #7e5920;
    --forest: #3a4830;
    --forest-light: #4c5e40;
    --cream: #f3ecdc;
    --line: rgba(28,24,21,0.14);
    --line-on-dark: rgba(243,236,220,0.18);
    --shadow: 0 18px 40px -20px rgba(28,24,21,0.45);

    --font-display: 'Dana', 'Vazirmatn', Tahoma, sans-serif;
    --font-body: 'Dana', 'Vazirmatn', Tahoma, sans-serif;

    --container: 1180px;
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 26px;

    --s-1: .5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2.5rem;
    --s-5: 4rem;
    --s-6: 6rem;
    --s-7: 8.5rem;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:84px; }
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--husk);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,p,figure{ margin:0; }
  button{ font:inherit; cursor:pointer; }

  .container{ max-width:var(--container); margin:0 auto; padding:0 var(--s-3); }
  @media (max-width:640px){ .container{ padding:0 var(--s-2); } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--font-display);
    font-size:.82rem;
    letter-spacing:.04em;
    color:var(--brass-dark);
    background:rgba(161,113,44,0.12);
    border:1px solid rgba(161,113,44,0.35);
    padding:.4em 1em;
    border-radius:999px;
  }
  .eyebrow.on-dark{ color:var(--brass-light); background:rgba(243,236,220,0.08); border-color:var(--line-on-dark); }

  h2.section-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem);
    line-height:1.35;
    margin:.6em 0 0;
  }
  .section-head{ max-width:44rem; margin-inline:auto; }
  .section-head p{ margin-top:var(--s-2); font-size:1.05rem; color:var(--ink-soft); opacity:.85; }
  .section-head.on-dark p{ color:var(--cream); opacity:.78; }

  section{ padding:var(--s-6) 0; text-align:center; }
  @media (max-width:640px){ section{ padding:var(--s-5) 0; } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:var(--font-body); font-weight:700; font-size:1rem;
    padding:.95em 1.7em; border-radius:999px; border:2px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    white-space:nowrap;
  }
  .btn svg{ width:1.15em; height:1.15em; flex:none; }
  .btn-primary{ background:var(--brass); color:var(--paper); box-shadow:0 12px 24px -10px rgba(161,113,44,0.55); }
  .btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }
  .btn-outline{ border-color:currentColor; color:var(--ink); background:transparent; }
  .btn-outline:hover{ background:rgba(28,24,21,0.06); }
  .btn-outline.on-dark{ color:var(--cream); }
  .btn-outline.on-dark:hover{ background:rgba(243,236,220,0.08); }
  .btn-ghost-dark{ background:var(--ink); color:var(--cream); }
  .btn-ghost-dark:hover{ background:var(--ink-soft); transform:translateY(-2px); }
  .btn-block{ width:100%; }

  .icon{ width:1em; height:1em; }

  /* ---------- Skip link ---------- */
  .skip-link{
    position:absolute; right:1rem; top:-3rem;
    background:var(--ink); color:var(--cream); padding:.7em 1.2em; border-radius:var(--r-sm);
    transition:top .2s ease; z-index:200;
  }
  .skip-link:focus{ top:1rem; }

  /* ---------- Header ---------- */
  header.site-header{
    position:sticky; top:0; z-index:100;
    background:rgba(28,24,21,0.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-on-dark);
    transition:box-shadow .25s ease;
  }
  header.site-header.scrolled{ box-shadow:0 12px 30px -18px rgba(0,0,0,0.6); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:.9rem 0; }
  .brand{ display:flex; align-items:center; gap:.6rem; color:var(--cream); }
  .brand-mark{ width:38px; height:38px; flex:none; }
  .brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.01em; }

  nav.main-nav{ display:flex; align-items:center; gap:var(--s-4); }
  nav.main-nav ul{ display:flex; gap:var(--s-3); }
  nav.main-nav a{
    color:var(--cream); opacity:.82; font-size:.96rem; padding:.4em 0; position:relative;
  }
  nav.main-nav a:hover{ opacity:1; }
  nav.main-nav a::after{
    content:""; position:absolute; right:0; left:0; bottom:-2px; height:2px; background:var(--brass-light);
    transform:scaleX(0); transition:transform .2s ease; transform-origin:center;
  }
  nav.main-nav a:hover::after{ transform:scaleX(1); }

  .header-cta{ display:flex; align-items:center; gap:var(--s-2); }
  .hamburger{
    display:none; background:none; border:none; color:var(--cream); padding:.4rem;
  }
  .hamburger svg{ width:26px; height:26px; }

  .mobile-nav{
    display:none; position:fixed; inset:0 0 auto 0; top:64px; z-index:99;
    background:var(--ink); border-bottom:1px solid var(--line-on-dark);
    padding:var(--s-3); transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .mobile-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .mobile-nav ul{ display:flex; flex-direction:column; gap:.2rem; }
  .mobile-nav a{ display:block; text-align:center; color:var(--cream); padding:.9em .2em; border-bottom:1px solid var(--line-on-dark); }
  .mobile-nav .btn{ margin-top:var(--s-2); }

  @media (max-width:900px){
    nav.main-nav{ display:none; }
    .hamburger{ display:inline-flex; }
    .mobile-nav{ display:block; }
    .header-cta .btn-primary{ display:none; }
  }
  @media (max-width:400px){
    .brand-name{ font-size:1rem; }
    .brand-mark{ width:32px; height:32px; }
  }
  @media (min-width:901px){ .mobile-nav{ display:none !important; } }

  /* ---------- Hero ---------- */
  .hero{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(161,113,44,0.28), transparent 60%),
      linear-gradient(rgba(28,24,21,0.88), rgba(28,24,21,0.93)),
      url('https://d8j0ntlcm91z4.cloudfront.net/user_3ECevkIBQTDKLINE2sZ6vKUAvjC/hf_20260818_110108_3008cf6a-8d7a-4749-ba2f-0b1bb3a119d0.png') center/cover;
    color:var(--cream);
    position:relative; overflow:hidden;
    padding:3.25rem 0 2.75rem;
  }
  .hero-grid{ display:flex; flex-direction:column; align-items:center; gap:2.25rem; }
  .hero-copy{ max-width:42rem; }

  .hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
    line-height:1.28; margin:.55em 0 0;
  }
  .hero h1 .accent{ color:var(--brass-light); }
  .hero p.lede{ margin-top:var(--s-3); font-size:1.15rem; color:var(--cream); opacity:.82; max-width:34rem; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4); justify-content:center; }

  .trust-chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--s-4); justify-content:center; }
  .trust-chip{
    display:inline-flex; align-items:center; gap:.5em;
    font-size:.86rem; color:var(--cream); opacity:.9;
    background:rgba(243,236,220,0.06); border:1px solid var(--line-on-dark);
    padding:.5em 1em; border-radius:999px;
  }
  .trust-chip svg{ width:1.1em; height:1.1em; color:var(--brass-light); }

  /* Hero tag illustration (signature element) */
  .hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:270px; }
  .seed-scatter{ position:absolute; inset:0; pointer-events:none; }
  .seed-scatter span{
    position:absolute; width:10px; height:16px; border-radius:60% 60% 55% 55% / 70% 70% 45% 45%;
    background:var(--brass-light); opacity:.35;
  }
  .hang-cord{
    position:absolute; top:-46px; right:calc(50% - 1px); width:2px; height:56px;
    background:linear-gradient(var(--line-on-dark), var(--brass-light));
    transform-origin:top center; transform:rotate(-6deg);
  }
  .hero-tag{
    position:relative; transform:rotate(-6deg);
    width:min(320px, 78vw); background:var(--paper); color:var(--ink);
    border-radius:14px; padding:2.1rem 1.6rem 1.8rem;
    box-shadow:var(--shadow);
    border:1.5px dashed var(--brass);
  }
  .hero-tag::before{
    content:""; position:absolute; top:14px; right:calc(50% - 8px); width:16px; height:16px;
    border-radius:50%; background:var(--husk); border:2px solid var(--ink);
  }
  .hero-tag .stamp-label{
    font-family:var(--font-display); font-size:.76rem; letter-spacing:.08em; color:var(--brass-dark);
  }
  .hero-tag .stamp-main{
    font-family:var(--font-display); font-weight:700; font-size:1.9rem; margin-top:.3rem;
  }
  .hero-tag .stamp-sub{ font-size:.86rem; color:var(--ink-soft); opacity:.75; margin-top:.5rem; }
  .hero-tag .stamp-row{ display:flex; gap:.5rem; margin-top:1.1rem; }
  .hero-tag .stamp-pill{
    font-size:.76rem; font-weight:700; padding:.35em .8em; border-radius:999px;
    border:1.5px solid var(--ink); color:var(--ink);
  }

  /* ---------- Stitch divider (signature motif, used sparingly) ---------- */
  .stitch{
    height:0; border-top:2px dashed rgba(161,113,44,.45); margin:0 auto;
  }

  /* ---------- Benefits strip ---------- */
  .benefits{ background:var(--husk); }
  .benefits-grid{
    margin-top:var(--s-4); display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  }
  @media (max-width:960px){ .benefits-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .benefits-grid{ grid-template-columns:1fr; } }
  .benefit-card{
    background:var(--paper); border-radius:var(--r-md); padding:1.6rem 1.4rem;
    border:1px solid var(--line);
  }
  .benefit-card .icon-wrap{
    width:46px; height:46px; border-radius:12px; background:rgba(161,113,44,0.12);
    display:flex; align-items:center; justify-content:center; color:var(--brass-dark);
    margin:0 auto 1rem;
  }
  .benefit-card .icon-wrap svg{ width:24px; height:24px; }
  .benefit-card h3{ font-family:var(--font-display); font-size:1.02rem; font-weight:700; }
  .benefit-card p{ margin-top:.5rem; font-size:.92rem; color:var(--ink-soft); opacity:.85; }

  /* ---------- Products ---------- */
  .products{ background:var(--paper); }
  .note-line{
    display:flex; gap:.6em; align-items:center; justify-content:center; margin:var(--s-2) auto 0;
    font-size:.9rem; color:var(--ink-soft); opacity:.8; max-width:38rem;
  }
  .note-line svg{ width:1.1em; height:1.1em; flex:none; margin-top:.2em; color:var(--brass-dark); }

  .product-grid{ margin-top:var(--s-4); display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  @media (max-width:960px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .product-grid{ grid-template-columns:1fr; } }

  .product-card{
    background:var(--husk-soft); border-radius:var(--r-md); padding:1.5rem;
    border:1px solid var(--line); display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:.9rem;
  }
  @keyframes card-shake{
    0%,100%{ transform:translateY(-4px) rotate(0); }
    15%{ transform:translateY(-4px) rotate(-2deg); }
    30%{ transform:translateY(-4px) rotate(2deg); }
    45%{ transform:translateY(-4px) rotate(-1.6deg); }
    60%{ transform:translateY(-4px) rotate(1.6deg); }
    75%{ transform:translateY(-4px) rotate(-0.8deg); }
    90%{ transform:translateY(-4px) rotate(0.8deg); }
  }
  .product-card:hover{ animation:card-shake .5s ease; box-shadow:var(--shadow); }
  .product-photo{
    width:100%; aspect-ratio:1/1; border-radius:calc(var(--r-md) - 6px); overflow:hidden;
    background:var(--husk); border:1px solid var(--line);
  }
  .product-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .product-top{ display:flex; align-items:center; justify-content:center; }
  .flavor-dot{ width:14px; height:14px; border-radius:50%; flex:none; border:1.5px solid var(--ink); }
  .product-card h3{ font-family:var(--font-display); font-size:1.12rem; font-weight:700; }
  .product-card p.desc{ font-size:.92rem; color:var(--ink-soft); opacity:.85; flex:1; }
  .weight-row{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
  .weight-pill{
    font-size:.78rem; font-weight:700; padding:.35em .85em; border-radius:999px;
    background:rgba(58,72,48,0.1); color:var(--forest);
    border:1px solid rgba(58,72,48,0.28);
  }
  .product-card .btn{ margin-top:.3rem; align-self:center; padding:.65em 1.3em; font-size:.9rem; }

  .packaging{ background:var(--husk); }
  .packaging .section-head{ max-width:58rem; }
  .packaging .section-title{ font-size:clamp(1.3rem, 1rem + 1.1vw, 1.9rem); white-space:normal; }
  .pack-grid{ margin-top:var(--s-4); display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  @media (max-width:760px){ .pack-grid{ grid-template-columns:1fr; } }
  .pack-card{
    position:relative; background:var(--ink); color:var(--cream);
    border-radius:var(--r-lg); padding:2.4rem 2rem; overflow:hidden;
  }
  .pack-card::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background:repeating-linear-gradient(135deg, rgba(243,236,220,0.035) 0 2px, transparent 2px 14px);
  }
  .pack-card .weight-huge{
    font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,2rem+2vw,3.4rem);
    color:var(--brass-light); position:relative;
  }
  .pack-card .weight-unit{ font-size:1.1rem; font-family:var(--font-body); color:var(--cream); opacity:.75; margin-inline-start:.4rem; }
  .pack-card h3{ font-family:var(--font-display); font-size:1.25rem; margin-top:.5rem; position:relative; }
  .pack-card p{ margin:.7rem auto 0; opacity:.78; font-size:.96rem; max-width:24rem; position:relative; }
  .pack-card .btn{ margin-top:1.4rem; position:relative; }

  /* ---------- Price banner ---------- */
  .price-banner{
    background:var(--brass); color:var(--ink);
    border-radius:var(--r-lg); padding:2.2rem 2rem; margin-top:var(--s-4);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; text-align:center;
  }
  .price-banner .txt{ max-width:38rem; }
  .price-banner h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center; gap:.5em; }
  .price-banner h3 .dot{ width:9px; height:9px; border-radius:50%; background:var(--forest); animation:pulse 1.8s ease-in-out infinite; flex:none; }
  .price-banner p{ margin-top:.5rem; font-size:.95rem; opacity:.85; }
  .price-banner .actions{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
  .price-banner .btn-ghost-dark{ box-shadow:0 12px 24px -12px rgba(28,24,21,.5); }

  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.5);} }

  /* ---------- Flavors ---------- */
  .flavors{ background:var(--paper); }
  .flavor-grid{ margin-top:var(--s-4); display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
  @media (max-width:760px){ .flavor-grid{ grid-template-columns:repeat(2,1fr); } }
  .flavor-tile{
    background:var(--husk-soft); border:1px solid var(--line); border-radius:var(--r-md);
    padding:1.5rem 1rem; text-align:center; transition:transform .2s ease, background-color .2s ease;
  }
  .flavor-tile:hover{ transform:translateY(-3px); background:var(--husk); }
  .flavor-tile .flavor-dot{ margin:0 auto .8rem; }
  .flavor-photo{
    width:56px; height:56px; border-radius:50%; overflow:hidden; margin:0 auto .8rem;
    border:2px solid var(--brass); background:var(--husk);
  }
  .flavor-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .flavor-tile span{ font-weight:700; font-size:.98rem; }

  /* ---------- Why us / About ---------- */
  .why{ background:var(--husk); }
  .why-grid{ margin-top:var(--s-4); display:flex; flex-direction:column; align-items:center; gap:var(--s-4); }
  .why-copy{ max-width:44rem; margin-inline:auto; }
  .why-copy p{ font-size:1.03rem; color:var(--ink-soft); }
  .why-copy p + p{ margin-top:1rem; }
  .why-list{ display:flex; flex-direction:column; gap:.9rem; max-width:36rem; width:100%; }
  .why-list li{
    display:flex; gap:.8rem; align-items:flex-start; background:var(--paper);
    border:1px solid var(--line); border-radius:var(--r-sm); padding:1rem 1.1rem; font-size:.95rem;
  }
  .why-list li svg{ width:1.3em; height:1.3em; flex:none; color:var(--forest); margin-top:.1em; }

  /* ---------- Process ---------- */
  .process{ background:var(--paper); }
  .process-track{
    margin-top:var(--s-5); display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; position:relative;
  }
  .process-track::before{
    content:""; position:absolute; top:26px; right:10%; left:10%; height:2px;
    background:repeating-linear-gradient(90deg, var(--brass) 0 10px, transparent 10px 18px);
  }
  @media (max-width:900px){
    .process-track{ grid-template-columns:1fr; gap:1.4rem; }
    .process-track::before{ display:none; }
  }
  .process-step{ position:relative; text-align:center; }
  @media (max-width:900px){ .process-step{ display:flex; align-items:center; gap:1rem; text-align:right; } }
  .process-num{
    width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--cream);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
    font-size:1.1rem; margin:0 auto 1rem; position:relative; z-index:1; flex:none;
  }
  @media (max-width:900px){ .process-num{ margin:0; } }
  .process-step h3{ font-size:.98rem; font-weight:700; font-family:var(--font-display); }
  .process-step p{ font-size:.86rem; color:var(--ink-soft); opacity:.8; margin-top:.4rem; }

  /* ---------- B2B collaboration ---------- */
  .b2b{ background:var(--forest); color:var(--cream); }
  .b2b .section-head p{ color:var(--cream); }
  .b2b-chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--s-4); justify-content:center; }
  .b2b-chip{
    font-size:.9rem; padding:.6em 1.2em; border-radius:999px;
    border:1px solid rgba(243,236,220,.3); background:rgba(243,236,220,.06);
  }
  .b2b .btn{ margin-top:var(--s-4); }

  /* ---------- SEO content ---------- */
  .seo-content{ background:var(--husk); }
  .seo-content .prose{ margin:var(--s-3) auto 0; max-width:52rem; }
  .seo-content .prose p{ color:var(--ink-soft); font-size:1rem; }
  .seo-content .prose p + p{ margin-top:1.1rem; }
  .seo-content .prose strong{ color:var(--ink); }

  /* ---------- FAQ ---------- */
  .faq{ background:var(--paper); }
  .faq-list{ margin:var(--s-4) auto 0; max-width:46rem; display:flex; flex-direction:column; gap:.8rem; }
  .faq-item{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--husk-soft); overflow:hidden; }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    background:none; border:none; text-align:right; padding:1.1rem 1.3rem; font-weight:700; font-size:.98rem;
    color:var(--ink);
  }
  .faq-q .plus{
    flex:none; width:24px; height:24px; position:relative;
  }
  .faq-q .plus::before,.faq-q .plus::after{
    content:""; position:absolute; background:var(--brass-dark); border-radius:2px; top:50%; left:50%;
    transform:translate(-50%,-50%);
  }
  .faq-q .plus::before{ width:14px; height:2px; }
  .faq-q .plus::after{ width:2px; height:14px; transition:transform .2s ease; }
  .faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .faq-a p{ padding:0 1.3rem 1.2rem; font-size:.92rem; color:var(--ink-soft); }

  /* ---------- Blog teaser ---------- */
  .blog{ background:var(--husk); }
  .blog-grid{ margin-top:var(--s-4); display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
  @media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
  .blog-card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:1.4rem;
    display:flex; flex-direction:column; gap:.8rem;
  }
  .blog-card .tag{ font-size:.76rem; color:var(--brass-dark); font-weight:700; }
  .blog-card h3{ font-size:1rem; font-weight:700; line-height:1.5; }
  .blog-card .soon{ font-size:.86rem; color:var(--brass-dark); font-weight:700; margin-top:auto; }
  .blog-card:hover .soon{ color:var(--brass); }
  .blog-note{ margin:var(--s-3) auto 0; font-size:.9rem; color:var(--ink-soft); opacity:.85; max-width:40rem; }

  /* ---------- Final CTA ---------- */
  .final-cta{
    background:var(--ink); color:var(--cream); text-align:center; padding:var(--s-6) 0;
  }
  .final-cta h2{
    font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,1.2rem+1.6vw,2.3rem);
  }
  .final-cta p{ margin-top:.8rem; opacity:.78; }
  .final-cta .hero-actions{ justify-content:center; margin-top:var(--s-4); }

  /* ---------- Contact ---------- */
  .contact{ background:var(--paper); }
  .contact-grid{ margin-top:var(--s-4); display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-card{
    background:var(--husk-soft); border:1px solid var(--line); border-radius:var(--r-md); padding:1.8rem;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
  }
  .contact-row{ display:flex; align-items:center; justify-content:center; gap:.8rem; font-size:1.02rem; }
  .contact-row svg{ width:1.4em; height:1.4em; color:var(--brass-dark); flex:none; }
  .contact-card .btn{ margin-top:.4rem; }
  .map-note{
    border:1px dashed var(--line); border-radius:var(--r-md); padding:1.8rem; display:flex;
    flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.6rem;
    color:var(--ink-soft); font-size:.9rem; min-height:180px;
  }
  /* stylized Iran map with a Tehran marker — swap for a real Google Maps embed once a street address exists */

  /* ---------- Footer ---------- */
  footer{ background:var(--ink); color:var(--cream); padding:var(--s-5) 0 var(--s-3); }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-4); text-align:center; }
  @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-brand{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:.9rem; }
  .footer-brand .brand-mark{ width:32px; height:32px; }
  .footer-brand span{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
  .footer-about{ font-size:.9rem; opacity:.7; max-width:22rem; margin-inline:auto; }
  footer h4{ font-size:.9rem; margin-bottom:.9rem; opacity:.85; }
  footer .col ul{ display:flex; flex-direction:column; gap:.6rem; align-items:center; }
  footer .col a{ font-size:.88rem; opacity:.68; }
  footer .col a:hover{ opacity:1; }
  .footer-bottom{
    margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line-on-dark);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
    font-size:.82rem; opacity:.65; text-align:center;
  }
  .footer-bottom a{ opacity:1; color:var(--brass-light); }

  /* ---------- Floating WhatsApp ---------- */
  .wa-float{
    position:fixed; bottom:22px; left:22px; z-index:150;
    width:58px; height:58px; border-radius:50%; background:#2e7d55; color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(0,0,0,.5);
  }
  .wa-float svg{ width:28px; height:28px; }
  .wa-float::before{
    content:""; position:absolute; inset:0; border-radius:50%; background:#2e7d55;
    animation:wa-pulse 2.4s ease-out infinite; z-index:-1;
  }
  @keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }
  @media (max-width:600px){ .wa-float{ width:52px; height:52px; bottom:16px; left:16px; } .wa-float svg{ width:25px; height:25px; } }

  /* ---------- Reveal-on-scroll ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- Accessibility ---------- */
  :focus-visible{ outline:3px solid var(--brass-light); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- Blog article pages ---------- */
  .article-hero{ background:var(--ink); color:var(--cream); padding:3rem 0 2.5rem; text-align:center; }
  .article-hero .eyebrow{ margin-bottom:.8rem; }
  .article-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,1.2rem+1.8vw,2.4rem); line-height:1.4; max-width:46rem; margin:0 auto; }
  .breadcrumb{ font-size:.85rem; opacity:.7; margin-top:1rem; }
  .breadcrumb a{ color:var(--brass-light); }
  .article-body{ max-width:42rem; margin:0 auto; padding:3rem 1.5rem; text-align:right; }
  .article-body p{ font-size:1.05rem; line-height:1.9; color:var(--ink-soft); margin-bottom:1.2rem; }
  .article-body h2{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--ink); margin:2rem 0 1rem; }
  .article-body ul{ margin:0 0 1.2rem; padding-inline-start:1.4rem; list-style:disc; }
  .article-body li{ font-size:1.02rem; line-height:1.8; color:var(--ink-soft); margin-bottom:.5rem; }
  .article-cta{
    margin-top:2.5rem; background:var(--husk); border-radius:var(--r-md); padding:1.8rem;
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  .article-cta p{ margin:0; font-weight:700; color:var(--ink); }
  .related-links{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
  .related-links h3{ font-size:.95rem; color:var(--ink-soft); margin-bottom:.8rem; }
  .related-links a{ display:block; font-size:.95rem; color:var(--brass-dark); padding:.4rem 0; }

  /* ---------- Icon-illustration fallback for flavors without a photo yet ---------- */
  .product-icon-frame{
    width:100%; aspect-ratio:1/1; border-radius:calc(var(--r-md) - 6px);
    display:flex; align-items:center; justify-content:center;
  }
  .product-icon-frame svg{ width:42%; height:42%; }
  .flavor-icon-frame{
    width:56px; height:56px; border-radius:50%; margin:0 auto .8rem;
    display:flex; align-items:center; justify-content:center;
  }
  .flavor-icon-frame svg{ width:52%; height:52%; }

  /* ---------- Motion polish ---------- */

  /* staggered entrance for grid items — cascades in instead of popping all at once */
  .benefits-grid > .reveal:nth-child(1),.product-grid > .reveal:nth-child(1),.flavor-grid > .reveal:nth-child(1),.pack-grid > .reveal:nth-child(1),.blog-grid > .reveal:nth-child(1),.why-list > .reveal:nth-child(1),.process-track > .reveal:nth-child(1){ transition-delay:0s; }
  .benefits-grid > .reveal:nth-child(2),.product-grid > .reveal:nth-child(2),.flavor-grid > .reveal:nth-child(2),.pack-grid > .reveal:nth-child(2),.blog-grid > .reveal:nth-child(2),.why-list > .reveal:nth-child(2),.process-track > .reveal:nth-child(2){ transition-delay:.07s; }
  .benefits-grid > .reveal:nth-child(3),.product-grid > .reveal:nth-child(3),.flavor-grid > .reveal:nth-child(3),.pack-grid > .reveal:nth-child(3),.blog-grid > .reveal:nth-child(3),.why-list > .reveal:nth-child(3),.process-track > .reveal:nth-child(3){ transition-delay:.14s; }
  .benefits-grid > .reveal:nth-child(4),.product-grid > .reveal:nth-child(4),.flavor-grid > .reveal:nth-child(4),.blog-grid > .reveal:nth-child(4),.why-list > .reveal:nth-child(4),.process-track > .reveal:nth-child(4){ transition-delay:.21s; }
  .benefits-grid > .reveal:nth-child(5),.product-grid > .reveal:nth-child(5),.flavor-grid > .reveal:nth-child(5),.why-list > .reveal:nth-child(5),.process-track > .reveal:nth-child(5){ transition-delay:.28s; }
  .benefits-grid > .reveal:nth-child(6),.product-grid > .reveal:nth-child(6),.flavor-grid > .reveal:nth-child(6){ transition-delay:.35s; }
  .benefits-grid > .reveal:nth-child(7),.flavor-grid > .reveal:nth-child(7){ transition-delay:.42s; }
  .benefits-grid > .reveal:nth-child(8),.flavor-grid > .reveal:nth-child(8){ transition-delay:.49s; }

  /* hero entrance — plays once on load, independent of scroll */
  @keyframes heroUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
  .hero-copy > *{ opacity:0; animation:heroUp .7s ease forwards; }
  .hero-copy .eyebrow{ animation-delay:.05s; }
  .hero-copy h1{ animation-delay:.15s; }
  .hero-copy .lede{ animation-delay:.28s; }
  .hero-copy .hero-actions{ animation-delay:.4s; }
  .hero-copy .trust-chips{ animation-delay:.52s; }
  .hero-visual{ opacity:0; animation:heroUp .8s ease forwards; animation-delay:.35s; }

  /* idle float on the hero tag illustration */
  @keyframes tagFloat{ 0%,100%{ transform:rotate(-6deg) translateY(0); } 50%{ transform:rotate(-6deg) translateY(-8px); } }
  .hero-tag{ animation:tagFloat 4.5s ease-in-out infinite; }

  /* shine sweep on primary buttons */
  .btn-primary{ position:relative; overflow:hidden; }
  .btn-primary::after{
    content:""; position:absolute; top:0; bottom:0; right:-60%; width:35%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
    transform:skewX(-15deg); transition:right .6s ease;
  }
  .btn-primary:hover::after{ right:130%; }

  /* icon micro-interaction on hover */
  .flavor-icon-frame svg,.flavor-photo img,.product-icon-frame svg,.product-photo img{ transition:transform .35s ease; }
  .flavor-tile:hover .flavor-icon-frame svg,.flavor-tile:hover .flavor-photo img{ transform:scale(1.15) rotate(-5deg); }
  .product-card:hover .product-icon-frame svg,.product-card:hover .product-photo img{ transform:scale(1.08); }

  /* benefit icon nudge on hover */
  .benefit-card .icon-wrap{ transition:transform .3s ease, background-color .3s ease; }
  .benefit-card:hover .icon-wrap{ transform:scale(1.1) rotate(-4deg); background:rgba(161,113,44,0.22); }

  /* pack-card number gently pops on hover */
  .pack-card .weight-huge{ display:inline-block; transition:transform .3s ease; }
  .pack-card:hover .weight-huge{ transform:scale(1.05); }