:root{
  --primary:#0F172A; /* Obsidian */
  --accent:#CFA15A;  /* Brass */
  --stone:#F5F3F0;   /* Stone */
  --slate:#1F2937;
  --muted:#6B7280;
  --section-space: clamp(4.5rem, 6vw, 8rem);
  --radius-lg: 1rem;
}
html,body{font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI","Roboto","Helvetica Neue",Arial,"Noto Sans",sans-serif; background:var(--stone); color:var(--slate)}
a,html,body{max-width:100%}
html,body{overflow-x:hidden}
a{color:var(--slate); text-decoration:none}
a:hover{color:var(--slate)}

/* NAV — فاصله بیشتر + CTA */
.navbar{background:var(--primary); padding-block:1rem}
.navbar-brand img{height:56px; display:block}
.navbar .nav-link{color:#fff !important; font-size:1rem}
.navbar-nav>.nav-item{margin-inline:.95rem}
.btn-cta{background:var(--accent); color:#14181F; border-color:var(--accent)}
.btn-cta{position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .35s ease}
.btn-cta:hover{filter:brightness(.98); transform:translateY(-1px); box-shadow:0 10px 24px rgba(207,161,90,.24)}
.btn-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform:translateX(-120%); transition:transform .8s ease}
.btn-cta:hover::after{transform:translateX(120%)}

/* عناصر عمومی */
.section{padding-block:var(--section-space)}
.section-title{font-weight:800}
.badge-accent{background:var(--accent); color:#14181F}
/* نوار آمار با پارالاکس */
.stats-strip{position:relative; background:
  radial-gradient(900px 420px at 10% -10%, rgba(207,161,90,.12), rgba(15,23,42,.82) 60%),
  radial-gradient(600px 320px at 95% 110%, rgba(207,161,90,.08), rgba(15,23,42,.9) 60%),
  url('../img/pattern-navy-gold-1200.webp') center/cover fixed;
  color:#E5E7EB; isolation:isolate}
.stats-strip::after{content:""; position:absolute; inset:0; backdrop-filter:blur(2px); opacity:.6; pointer-events:none}
.stats-strip .stat .num{font-weight:800; font-size:clamp(1.6rem, 4vw, 2.2rem); line-height:1}
.stats-strip .stat .label{opacity:.9}
.stats-strip .stat .icon{font-size:1.6rem; color:#e9c880; margin-bottom:.35rem}
.stats-strip .stat .num .approx{opacity:.8; margin-inline-end:.25rem; color:#e9c880}
/* Breadcrumb fix: show divider with spacing (RTL aware) */
.breadcrumb{--bs-breadcrumb-divider: '/'}
.breadcrumb-item+.breadcrumb-item::before{display:inline-block; content:'/'; color:#9CA3AF; margin:0 .5rem}

/* زنده‌کردن سکشن‌ها با بک‌گراند سنگی */
.bg-stone-light{position:relative}
.bg-stone-light::before{content:"";position:absolute;inset:0;background:url("../img/pattern-texture-set-1200.webp") center/cover no-repeat;opacity:.12}
.bg-stone-light>*{position:relative}
.bg-stone-dark{position:relative;background:#0c1322;color:#e5e7eb}
.bg-stone-dark::before{content:"";position:absolute;inset:0;background:url("../img/pattern-navy-gold-1200.webp") center/cover no-repeat;opacity:.18}
.bg-stone-dark>*{position:relative}

/* ناوبری: زیرخط طلایی نرم شبیه sogandstone */
.navbar .nav-link{position:relative}
.navbar .nav-link::after{content:""; position:absolute; height:2px; width:0; inset:auto 0 -6px auto; background:linear-gradient(90deg,var(--accent),#e9c880); transition:width .35s ease}
.navbar .nav-link:hover::after{width:100%}

/* HERO — اتوپلی + درگ/سوایپ + قاب عمودی */
.hero{position:relative; color:#fff; background:var(--primary)}
.hero .overlay{
  position:absolute; inset:0;
  background: radial-gradient(900px 420px at 10% -10%, rgba(207,161,90,.18), rgba(15,23,42,.7) 60%),
              radial-gradient(600px 320px at 95% 110%, rgba(207,161,90,.1), rgba(15,23,42,.8) 60%);
  pointer-events:none;
}
.hero .carousel{--h: 75vh; cursor:grab}
.hero.dragging .carousel{cursor:grabbing}
.hero .carousel-item{min-height:var(--h); display:flex; align-items:center}
.hero .frame{height:70vh; border-radius:var(--radius-lg); overflow:hidden; background:#000; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero .frame img{width:100%; height:100%; object-fit:cover; object-position:center; opacity:.98}
@keyframes slideUp {from{transform:translateY(16px); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes clipReveal {from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0)}}
.anim-h1{animation:clipReveal .8s ease-out both}
.anim-lead{animation:slideUp .7s .15s ease-out both}
.anim-ctas{animation:slideUp .7s .25s ease-out both}
.hero .carousel-item:not(.active) .anim-h1,
.hero .carousel-item:not(.active) .anim-lead,
.hero .carousel-item:not(.active) .anim-ctas{animation:none}
.hero .carousel-indicators{top:auto; bottom:1.25rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem}
.hero .carousel-indicators button{background:rgba(255,255,255,.6); width:12px; height:12px; border-radius:50%; border:none; transition:background .25s ease}
.hero .carousel-indicators button.active,
.hero .carousel-indicators button:hover{background:#fff}

/* کارت‌ها/هاورهای الهام‌گرفته از sogandstone */
.hover-lift{transition:transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s}
.hover-lift:hover{transform:translateY(-8px); box-shadow:0 18px 40px rgba(16,24,40,.18)}
.img-zoom{position:relative; overflow:hidden;}
.img-zoom img{transition:transform .8s ease}
.img-zoom:hover img{transform:scale(1.05)}
.img-zoom::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(1200px 300px at 10% -20%, rgba(255,255,255,.15), transparent 60%); opacity:0; transition:opacity .6s ease}
.img-zoom:hover::after{opacity:.5}
.feature-card, .plan, .card{position:relative}
.feature-card::after, .plan::after, .card::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%); transform:translateX(-120%); transition:transform .9s ease}
.feature-card:hover::after, .plan:hover::after, .card:hover::after{transform:translateX(120%)}

/* کارت‌های پریمیوم: برجسته‌سازی حاشیه روی هاور */
.feature-card:hover{box-shadow:0 18px 40px rgba(16,24,40,.18)}
.feature-card:hover,.plan:hover{border-color:rgba(207,161,90,.5)}
.card.h-100{display:flex; flex-direction:column}
.card .card-body{position:relative; display:flex; flex-direction:column; gap:.5rem; padding-bottom:3rem}
/* ارتفاع ثابت تصویر کارت + کاور برای جلوگیری از کشیدگی */
.card .card-img-top{width:100%; height:220px; object-fit:cover}
@media (min-width: 768px){ .card .card-img-top{height:240px} }
/* دکمه ادامه در گوشهٔ چپ پایین کارت */
.btn-readmore{position:absolute; left:1rem; bottom:1rem; padding:.35rem .6rem; border-radius:.5rem; border:1px solid var(--accent); color:var(--slate); background:transparent; font-size:.85rem}
.btn-readmore:hover{background:var(--accent); color:#14181F}
.gold-underline{position:relative}
.gold-underline::after{
  content:""; position:absolute; inset:auto 0 -8px auto; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),#e9c880); transition:width .45s ease
}
.gold-underline:hover::after{width:100%}

/* SHOWCASE */
.showcase{--h: 560px}
.showcase .carousel{border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 10px 30px rgba(16,24,40,.15)}
.showcase .carousel-item{position:relative; height:var(--h); background:#000}
.showcase .carousel-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94}
.showcase .legend{position:absolute; top:.75rem; left:.75rem; background:rgba(15,23,42,.6); color:#fff; padding:.35rem .6rem; border-radius:.4rem; font-size:.85rem}
.hotspot{position:absolute; width:42px; height:42px; border-radius:50%; background:rgba(207,161,90,.95); color:#14181F; display:grid; place-items:center; border:2px solid rgba(20,24,31,.35); cursor:pointer; transition: transform .15s ease}
.hotspot:hover{transform:scale(1.06)}

/* SLAB VIEWER — قاب حرفه‌ای + ابزار + گرِید + هات‌اسپات شیشه‌ای */
.slab-viewer{position:relative}
.slab-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 10px 30px rgba(16,24,40,.15)}
.slab-toolbar{position:absolute; z-index:5; top:.75rem; right:.75rem; display:flex; gap:.4rem; align-items:center; padding:.35rem; border-radius:.6rem;
  background:rgba(17,24,39,.5); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15)}
.slab-toolbar .sep{width:1px; height:22px; background:rgba(255,255,255,.2)}
.slab-toolbar .btn{--bs-btn-padding-y:.25rem; --bs-btn-padding-x:.45rem; --bs-btn-font-size:.85rem; background:rgba(255,255,255,.85); border:none}
.slab-toolbar .btn[aria-pressed="true"], .slab-toolbar .btn.active{background:#fff}
.slab-grid{position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 1px, transparent 1px, transparent 50px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 1px, transparent 1px, transparent 50px);
}

/* هات‌اسپات کارت شیشه‌ای */
.hotspot-card{position:absolute; z-index:6; min-width:200px; max-width:280px; color:#fff; padding:.6rem .75rem; border-radius:.75rem;
  background:rgba(15,23,42,.55); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease}
.hotspot-card.show{opacity:1; transform:translateY(0)}
.hotspot-card .title{font-weight:800; font-size:.95rem; margin-bottom:.25rem}
.hotspot-card .desc{font-size:.85rem; color:#e5e7eb}

.slab-thumbs{display:flex; gap:.6rem; justify-content:center; align-items:center; padding:.6rem 0}
.slab-thumbs img{width:72px; height:48px; object-fit:cover; border-radius:.4rem; opacity:.8; cursor:pointer; border:2px solid transparent; transition:opacity .2s ease, transform .2s ease, border-color .2s}
.slab-thumbs img:hover{opacity:1; transform:translateY(-2px)}
.slab-thumbs img.active{opacity:1; border-color:var(--accent)}

/* Tilt-ready utilities */
.tiltable{will-change:transform; transform-style:preserve-3d; transition:transform .15s ease}

/* PROCESS — موج + خط‌چین + نقاط شماره‌دار (RTL و کارت‌های یکی بالا/یکی پایین) */
.process-wave{position:relative; padding-block:clamp(4rem,6vw,6.5rem)}
.process-wave .wrap{position:relative; height:360px; overflow-x:visible;}
.process-wave .svg{position:absolute; inset:0; z-index:0}
.process-wave .wave{fill:#f7f5f2}
.process-wave .dash{
  fill:none; stroke:#93A1B2; stroke-width:2.5; stroke-dasharray:8 10; opacity:.75;
  animation:dashMove 12s linear infinite;
}
@keyframes dashMove{to{stroke-dashoffset:+180}}

.process-chip{
  position:absolute; right:1rem; top:-1.25rem; z-index:2;
  background:#ff7b1b; color:#fff; padding:.5rem 1rem; border-radius:999px;
  font-weight:700; box-shadow:0 8px 20px rgba(255,123,27,.2)
}

.step-dot{
  position:absolute; z-index:2; width:56px; height:56px; border-radius:50%;
  background:#5c6b79; color:#fff; display:grid; place-items:center;
  font-weight:800; box-shadow:0 10px 20px rgba(16,24,40,.15);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  left:auto; /* خنثی‌سازی تعریف‌های قبلی */
}
.step-dot:hover{transform:translateY(-6px) scale(1.03); background:#1f2a37; box-shadow:0 18px 36px rgba(16,24,40,.25)}

/* نقاط — راست به چپ (۱ از راست، ۶ از چپ) */
.step-dot[data-step="1"]{right:6%;  top:54%}
.step-dot[data-step="2"]{right:24%; top:32%}
.step-dot[data-step="3"]{right:42%; top:56%}
.step-dot[data-step="4"]{right:60%; top:34%}
.step-dot[data-step="5"]{right:78%; top:56%}
.step-dot[data-step="6"]{right:92%; top:36%}

.step-card{
  position:absolute; z-index:2; width:220px; background:#fff; border:1px solid #ece8e1;
  border-radius:.9rem; padding:.75rem .9rem; box-shadow:0 12px 28px rgba(16,24,40,.08);
  transition:transform .35s, box-shadow .35s; pointer-events:none;
  left:auto; /* خنثی‌سازی تعریف‌های قبلی */
}
.step-card h4{font-size:1rem; margin:0 0 .25rem; font-weight:800}
.step-card p{font-size:.85rem; color:#6b7280; margin:0}
.step-card::before{
  content:""; position:absolute; right:1rem; width:28px; height:3px;
  background:linear-gradient(90deg,var(--accent),#e9c880); border-radius:999px;
  transform-origin:left; transition:transform .35s ease;
}
.step:hover .step-card{transform:translateY(-6px); box-shadow:0 22px 40px rgba(16,24,40,.16)}
.step:hover .step-card::before{transform:scaleX(1)}

/* کارت‌های فرد بالا، زوج پایین + جای‌گیری افقی RTL */
.step[data-step="1"] .step-card{right:0%;  top:6%}
.step[data-step="2"] .step-card{right:16%; bottom:6%}
.step[data-step="3"] .step-card{right:34%; top:6%}
.step[data-step="4"] .step-card{right:52%; bottom:6%}
.step[data-step="5"] .step-card{right:70%; top:6%}
.step[data-step="6"] .step-card{right:86%; bottom:6%}

/* نوار طلاییِ کارت اگر پایین است، به لبهٔ پایین منتقل شود */
.step[data-step="2"] .step-card::before,
.step[data-step="4"] .step-card::before,
.step[data-step="6"] .step-card::before{top:auto; bottom:-10px; transform:scaleX(.3)}
/* کارت‌های بالا (فرد) نوار در لبهٔ بالا باشد */
.step[data-step="1"] .step-card::before,
.step[data-step="3"] .step-card::before,
.step[data-step="5"] .step-card::before{top:-10px; transform:scaleX(.3)}

@media (max-width: 992px){
  .process-wave{padding-block:3rem}
  .process-wave .wrap{height:auto}
  .process-wave .svg{display:none}
  .process-chip{position:static; margin-bottom:1rem}
  .step, .step-dot, .step-card{position:static}
  .step + .step{margin-top:1rem}
  .step-dot{width:44px;height:44px}
  .step-card{width:100%}
}

/* CLIENT LOGOS — محلی + وسط‌چین + اسکرول‌اسنپ/اسلاید خودکار */
.clients{background:#0c1322; color:#cfd6e3}
.logos{display:grid; grid-auto-flow:column; grid-auto-columns:max-content; gap:2.25rem; overflow-x:auto; padding-block:.75rem; max-width:100%;
  scroll-snap-type:x mandatory; scrollbar-width:none}
.logos::-webkit-scrollbar{display:none}
.logos img{height:clamp(48px, 6.5vw, 80px); width:auto; opacity:1; scroll-snap-align:center; transition:transform .25s, filter .25s; image-rendering:-webkit-optimize-contrast}
.logos img:hover{transform:translateY(-2px); filter:brightness(1.03)}

/* PACKAGES */
.plan{border:1.5px solid #e8e4de; border-radius:1rem; background:#fff; position:relative}
.plan.pop{border-color:var(--accent); box-shadow:0 14px 36px rgba(207,161,90,.18)}
.plan .price{font-weight:800}
.plan .meta{font-size:.875rem; color:#6b7280}
.plan .cap{position:absolute; top:-10px; right:16px; height:4px; width:64px; background:linear-gradient(90deg,var(--accent),#e9c880); border-radius:999px}
.plan:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(16,24,40,.14); transition:.35s}

/* FOOTER */
footer{background:#0b1220; color:#E5E7EB}
footer a{color:#F3F4F6}
.footer-badge{display:inline-flex;align-items:center;gap:.5rem; padding:.4rem .6rem; background:#111827; border-radius:.5rem; font-size:.85rem}
.footer-hr{border-color:#22293a}
.footer-logo{height:22px; width:auto; margin-inline-end:.4rem; vertical-align:-4px}

@media (max-width: 992px){
  .navbar-brand img{height:48px}
  .hero .carousel{--h: 85vh}
  .hero .frame{height:56vh}
}