/* ==========================================================================
   سوویتی لند — Design tokens
   پالت برگرفته از خود محصول: پوسته‌ی پسته‌ای، رزی و طلایی ماکارون فرانسوی،
   روی زمینه‌ی کرم گرم، با متن قهوه‌ای بنفش تیره (رنگ گاناش/شکلات).
   ========================================================================== */
:root{
  --cream:        #FAF3E7;
  --cream-deep:   #F1E2CF;
  --white:        #FFFCF7;
  --plum:         #3B2635;   /* متن اصلی */
  --plum-soft:    #6C566A;   /* متن ثانویه */
  --pistachio:    #7E9A5C;
  --pistachio-lt: #AFC38F;
  --rose:         #C97F7E;
  --rose-lt:      #EFC1BF;
  --gold:         #B98B3E;
  --gold-lt:      #D8B87A;
  --cocoa:        #6B4226;
  --line:         rgba(59,38,53,0.12);

  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Fraunces', Georgia, serif;

  --container: 1180px;
  --radius: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--cream);
  color: var(--plum);
  font-family: var(--font-fa);
  font-size: 17px;
  line-height: 1.9;
  -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; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  display: inline-block;
}

h1,h2,h3{
  margin: 0 0 0.5em;
  font-weight: 800;
  color: var(--plum);
  letter-spacing: -0.01em;
}
h2{ font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
p{ color: var(--plum-soft); margin: 0 0 1em; }

.section{ padding: 108px 0; position: relative; }
.section--tight{ padding: 72px 0; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn--gold{
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(185,139,62,0.55);
}
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(185,139,62,0.6); }
.btn--outline{
  border-color: var(--plum);
  color: var(--plum);
  background: transparent;
}
.btn--outline:hover{ background: var(--plum); color: var(--white); }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   دیوایدر امضادار — مقطع ماکارون (به‌جای شماره‌گذاری ژنریک ۰۱/۰۲/۰۳)
   ========================================================================== */
.macaron-divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 0 auto 44px; opacity:.85; }
.macaron-divider .line{ width: 60px; height: 1px; background: var(--line); }
.macaron-divider svg{ width: 34px; height: 22px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background: rgba(250,243,231,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -14px rgba(59,38,53,0.25);
  padding: 12px 0;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 20px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark svg{ width: 38px; height: 30px; }
.brand .word{ display:flex; flex-direction:column; line-height:1.1; }
.brand .word b{ font-size: 1.15rem; font-weight: 800; color: var(--plum); }
.brand .word span{ font-family: var(--font-en); font-style: italic; font-size: .72rem; letter-spacing: .08em; color: var(--gold); }

.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{
  font-size: .95rem; font-weight: 600; color: var(--plum-soft);
  position: relative; padding: 4px 0;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{ color: var(--plum); }
.nav-links a:hover::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap: 12px; }
.header-cta .btn{ padding: 11px 22px; font-size: .9rem; }
.icon-btn{
  width: 42px; height: 42px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line);
  transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.icon-btn:hover{ background: var(--plum); border-color: var(--plum); transform: translateY(-2px); }
.icon-btn:hover svg{ stroke: var(--white); }
.icon-btn svg{ width: 18px; height: 18px; stroke: var(--plum); transition: stroke .3s var(--ease); }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius: 50%; border:1px solid var(--line);
  background: transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  cursor:pointer;
}
.nav-toggle span{ width: 18px; height: 2px; background: var(--plum); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO — بخش ویدیوی اسکرول‌محور (پین‌شونده)
   ========================================================================== */
.scrub-runway{
  position: relative;
  height: 420vh; /* مسافت کل اسکرول برای پخش انیمیشن؛ برای سرعت بیشتر عدد را کم کنید */
}
.scrub-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cream-deep);
}
.scrub-video{
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%,-50%);
  object-fit: cover;
}
.scrub-sticky::after{
  /* لایه‌ی تیره‌ی ملایم برای خوانایی متن روی ویدیو */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(59,38,53,0.35) 0%, rgba(59,38,53,0.12) 32%, rgba(59,38,53,0.05) 55%, rgba(59,38,53,0.55) 100%);
  pointer-events:none;
}
.scrub-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 0 24px;
  pointer-events:none;
  z-index: 2;
}
.scrub-caption{
  position:absolute;
  text-align:center;
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  max-width: 780px;
}
.scrub-caption.is-visible{ opacity:1; transform: translateY(0); }
.scrub-caption .eyebrow{ color: var(--gold-lt); justify-content:center; }
.scrub-caption .eyebrow::before{ display:none; }
.scrub-caption h1{
  color: var(--white);
  font-size: clamp(2rem, 5.4vw, 4rem);
  line-height: 1.28;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
  margin: 0;
}
.scrub-caption p{
  color: rgba(255,252,247,0.86);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 18px auto 0;
}
.scrub-caption .btn{ margin-top: 22px; pointer-events:auto; }

.scroll-hint{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  z-index: 3; display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,252,247,0.85); font-size: .78rem; letter-spacing:.08em;
  animation: hintBob 2.2s ease-in-out infinite;
}
@keyframes hintBob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }
.scroll-hint svg{ width:16px; height:22px; stroke: rgba(255,252,247,0.85); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ background: var(--cream); }
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center;
}
.about-visual{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 4/5; background: linear-gradient(155deg, var(--rose-lt), var(--gold-lt) 60%, var(--pistachio-lt));
  display:flex; align-items:center; justify-content:center;
}
.about-visual svg{ width: 62%; height: auto; }
.about-badge{
  position:absolute; bottom: 22px; inset-inline-end: 22px;
  background: rgba(255,252,247,0.92); backdrop-filter: blur(6px);
  border-radius: 16px; padding: 14px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow: 0 14px 30px -14px rgba(59,38,53,0.35);
}
.about-badge b{ display:block; font-size:1.3rem; color:var(--plum); }
.about-badge span{ font-size:.78rem; color:var(--plum-soft); }

.stat-row{ display:flex; gap: 34px; margin-top: 30px; flex-wrap:wrap; }
.stat-row div b{ display:block; font-family: var(--font-en); font-size: 1.7rem; color: var(--gold); }
.stat-row div span{ font-size: .85rem; color: var(--plum-soft); }

/* ==========================================================================
   SIGNATURE PRODUCT — ماکارون فرانسوی
   ========================================================================== */
.signature{
  background: var(--plum);
  color: var(--cream);
  position: relative;
  overflow:hidden;
}
.signature::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 50% at 80% 15%, rgba(185,139,62,0.28), transparent 65%),
              radial-gradient(50% 45% at 10% 90%, rgba(126,154,92,0.28), transparent 60%);
  pointer-events:none;
}
.signature .container{ position:relative; z-index:1; }
.signature h2{ color: var(--white); }
.signature p{ color: rgba(250,243,231,0.78); }
.signature .eyebrow{ color: var(--gold-lt); }
.signature .eyebrow::before{ background: var(--gold-lt); }

.sig-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; }
.sig-illustration{ display:flex; align-items:center; justify-content:center; }
.sig-illustration svg{ width: 100%; max-width: 380px; height:auto; }

.flavor-list{ display:grid; gap: 18px; margin-top: 34px; }
.flavor-item{
  display:flex; align-items:center; gap: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(250,243,231,0.14);
  border-radius: 16px;
  background: rgba(250,243,231,0.04);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.flavor-item:hover{ background: rgba(250,243,231,0.08); border-color: rgba(250,243,231,0.28); transform: translateX(-3px); }
.flavor-dot{ width: 34px; height:34px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18); }
.flavor-item b{ display:block; font-size: 1.02rem; color: var(--white); }
.flavor-item span{ font-size: .86rem; color: rgba(250,243,231,0.65); }

/* ==========================================================================
   GALLERY — کارت‌های طعم (تصویرسازی، بدون نیاز به عکس)
   ========================================================================== */
.gallery{ background: var(--cream); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.g-card{
  border-radius: 20px;
  padding: 28px 20px 22px;
  text-align:center;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.g-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 40px -22px rgba(59,38,53,0.3); }
.g-card .macaron-icon{ width: 84px; height: 84px; margin: 0 auto 18px; }
.g-card h3{ margin-bottom: 4px; }
.g-card span{ font-size: .82rem; color: var(--gold); font-weight:600; }

/* ==========================================================================
   WORKSHOP / ATELIER — کارگاه
   ========================================================================== */
.atelier{ background: var(--cream-deep); }
.atelier-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.atelier-list{ display:grid; gap: 26px; margin-top: 30px; }
.atelier-list li{ display:flex; gap: 16px; }
.atelier-list .num{
  font-family: var(--font-en); font-style: italic; color: var(--gold);
  font-size: 1.4rem; flex: none; width: 44px;
}
.atelier-list b{ display:block; color: var(--plum); margin-bottom: 4px; }
.atelier-list span{ font-size: .92rem; color: var(--plum-soft); }

.atelier-visual{
  border-radius: var(--radius);
  aspect-ratio: 1/1;
  background: linear-gradient(160deg, var(--white), var(--cream));
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow:hidden;
}
.atelier-visual svg{ width: 58%; }
.atelier-visual::after{
  content:"دستپخت فرانسوی، در قلب قم";
  position:absolute; bottom:20px; inset-inline:20px;
  font-size:.8rem; color: var(--plum-soft); text-align:center;
}

/* ==========================================================================
   INSTAGRAM STRIP
   ========================================================================== */
.insta{ background: var(--plum); color: var(--cream); text-align:center; }
.insta .eyebrow{ justify-content:center; color: var(--gold-lt); }
.insta .eyebrow::before{ background: var(--gold-lt); }
.insta h2{ color: var(--white); }
.insta p{ color: rgba(250,243,231,0.75); max-width: 560px; margin-inline:auto; }
.insta-handle{
  display:inline-flex; align-items:center; gap:10px; margin-top: 8px;
  font-family: var(--font-en); font-style: italic; font-size: 1.2rem; color: var(--gold-lt);
}
.insta-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-top: 46px;
}
.insta-tile{
  aspect-ratio: 1/1; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  opacity: .9;
}
.insta-tile:hover{ transform: scale(1.05); opacity:1; }
.insta-tile svg{ width: 40%; }
.insta-tile:nth-child(1){ background: linear-gradient(155deg, var(--rose-lt), var(--rose)); }
.insta-tile:nth-child(2){ background: linear-gradient(155deg, var(--gold-lt), var(--gold)); }
.insta-tile:nth-child(3){ background: linear-gradient(155deg, var(--pistachio-lt), var(--pistachio)); }
.insta-tile:nth-child(4){ background: linear-gradient(155deg, var(--gold-lt), var(--rose)); }
.insta-tile:nth-child(5){ background: linear-gradient(155deg, var(--pistachio-lt), var(--gold)); }
.insta-tile:nth-child(6){ background: linear-gradient(155deg, var(--rose-lt), var(--pistachio)); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ background: var(--cream); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-cards{ display:grid; gap: 18px; }
.c-card{
  display:flex; align-items:center; gap: 18px;
  padding: 22px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.c-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 34px -20px rgba(59,38,53,0.28); }
.c-card .ic{
  width: 50px; height:50px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--cream-deep);
}
.c-card .ic svg{ width: 22px; height:22px; stroke: var(--gold); }
.c-card b{ display:block; font-size: 1.02rem; }
.c-card span, .c-card a.value{ font-size: .92rem; color: var(--plum-soft); direction:ltr; display:inline-block; }

.map-frame{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio: 4/3; background: var(--cream-deep);
}
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(0.15) sepia(0.08); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--plum); color: rgba(250,243,231,0.7); padding: 52px 0 26px; }
.footer-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 40px; flex-wrap:wrap;
  padding-bottom: 36px; border-bottom: 1px solid rgba(250,243,231,0.12);
}
.footer-brand .word b{ color: var(--white); font-size:1.2rem; }
.footer-brand p{ color: rgba(250,243,231,0.6); max-width: 320px; margin-top: 14px; }
.footer-links{ display:flex; gap: 64px; flex-wrap:wrap; }
.footer-links h4{ color: var(--white); font-size: .9rem; margin-bottom: 16px; }
.footer-links ul{ display:grid; gap: 10px; }
.footer-links a{ font-size: .88rem; color: rgba(250,243,231,0.65); transition: color .3s; }
.footer-links a:hover{ color: var(--gold-lt); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top: 22px;
  font-size: .8rem; color: rgba(250,243,231,0.5); flex-wrap:wrap; gap:12px;
}
.footer-social{ display:flex; gap: 10px; }
.footer-social a{
  width: 38px; height:38px; border-radius:50%; border:1px solid rgba(250,243,231,0.18);
  display:flex; align-items:center; justify-content:center; transition: background .3s, border-color .3s;
}
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); }
.footer-social svg{ width:16px; height:16px; stroke: rgba(250,243,231,0.85); }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .about-grid, .sig-grid, .atelier-grid, .contact-grid{ grid-template-columns: 1fr; }
  .about-grid{ gap: 40px; }
  .sig-illustration{ order: 2; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .insta-grid{ grid-template-columns: repeat(3,1fr); }
  .nav-links{ display:none; }
  .header-cta .btn--outline{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 640px){
  .section{ padding: 76px 0; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); gap: 14px; }
  .scrub-runway{ height: 320vh; }
  .footer-top{ flex-direction:column; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* mobile nav drawer */
.mobile-nav{
  position: fixed; inset: 0; z-index: 99;
  background: var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 30px;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{ font-size: 1.4rem; font-weight:700; color: var(--plum); }