:root{
  --color-primary: #3AB6F0;
  --color-secondary: #22D3C3;
  --color-accent: #FFB648;
  --color-coral: #FF7E79;
  --color-dark: #123A56;
  --color-dark-2: #0A2740;
  --color-light: #EAF6FD;
  --color-lighter: #F6FBFE;
  --color-muted: #5D7C90;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-soft: 0 22px 55px -20px rgba(58, 182, 240, .38);
  --shadow-warm: 0 18px 45px -18px rgba(255, 182, 72, .45);
  --font-main: "Vazirmatn", Tahoma, sans-serif;
}
@font-face {
  font-family: Bt;
  src: url(B\ Titr\ Bold_0.woff);
}
@font-face {
  font-family: Ns;
  src: url(Mj_Nasr_0.woff);
}
@font-face {
  font-family: Vm;
  src: url(Vazir-Medium.woff);
}
@font-face {
  font-family: Yb;
  src: url(Yekan\ Bakh\ Regular.woff);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width:100%; }
body{
  margin:0;
  font-family: var(--font-main);
  background: var(--color-lighter);
  color: var(--color-dark);
  overflow-x: hidden;
  width:100%;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

/* ===================== دکمه درخشان ===================== */
.btn-glow{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 36px; border:none; border-radius:100px; cursor:pointer;
  font-family: var(--font-main); font-weight:700; font-size:16px; color:#fff;
  background: linear-gradient(95deg, var(--color-primary), var(--color-secondary));
  box-shadow: var(--shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease;
}
.btn-glow:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 26px 65px -16px rgba(34,211,195,.5); color:#fff; }

/* ===================== نویگیشن ===================== */
.site-nav{
  position: fixed; top:0; right:0; left:0; z-index:1000;
  padding:18px 0; transition: all .35s ease;
}
.site-nav.scrolled{
  padding:10px 0; background: rgba(10,39,64,.72); backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -10px rgba(10,39,64,.25);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.nav-backdrop{
  position:fixed; inset:0; z-index:1;
  background: rgba(6,20,32,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s ease, visibility .35s ease;
}
.nav-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
.nav-close{ display:none; }
.nav-brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:18px; }
.nav-brand img{ height:38px; width:38px; object-fit:contain; border-radius:10px; background:#fff; padding:3px; }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#eaf8ff; font-size:15px; font-weight:600; position:relative; padding:6px 0; }
.nav-links a::after{
  content:""; position:absolute; bottom:0; right:0; width:0; height:2px;
  background: var(--color-accent); transition: width .3s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links .nav-cta{
  background: linear-gradient(95deg, var(--color-primary), var(--color-secondary));
  padding:10px 24px; border-radius:100px; color:#fff !important; font-weight:700;
  box-shadow: 0 10px 25px -10px rgba(34,211,195,.6);
}
.nav-links .nav-cta::after{ display:none; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:#fff; display:block; border-radius:2px; }

/* ===================== هیرو ===================== */
.hero-section{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(155deg, #1CA6E8 0%, #0F7FC4 45%, #0A5A93 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,39,64,.12) 0%, rgba(9,32,52,.68) 88%);
}
.bubble{
  position:absolute; border-radius:50%; cursor:pointer;
}
.bubble-inner{
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.5), rgba(255,255,255,.06) 70%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 20px rgba(255,255,255,.15), 0 10px 30px -12px rgba(0,0,0,.25);
  backdrop-filter: blur(1px);
  transform-origin:center;
}
.bubble-label{
  font-weight:800; color:#9ed6cf; letter-spacing:.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-family: "Vazirmatn", Arial, sans-serif;
}
/* اندازه و موقعیت حباب‌ها به صورت نسبی (clamp) تا در همه سایزها به هم نریزند */
.b1{ width:clamp(64px,18vw,170px); height:clamp(64px,18vw,170px); top:12%; left:4%; animation: float 9s ease-in-out infinite; }
.b1 .bubble-label{ font-size:clamp(18px,4vw,30px); }
.b2{ width:clamp(42px,10vw,100px); height:clamp(42px,10vw,100px); top:66%; left:12%; animation: float 7s ease-in-out infinite 1s; }
.b2 .bubble-label{ font-size:clamp(13px,2.4vw,20px); }
.b3{ width:clamp(84px,22vw,230px); height:clamp(84px,22vw,230px); top:24%; right:3%; animation: float 11s ease-in-out infinite .5s; }
.b3 .bubble-label{ font-size:clamp(20px,4.6vw,36px); }
.b4{ width:clamp(46px,11.5vw,110px); height:clamp(46px,11.5vw,110px); top:78%; right:14%; animation: float 6.5s ease-in-out infinite 2s; }
.b4 .bubble-label{ font-size:clamp(12px,2.2vw,19px); }
.b5{ width:clamp(50px,12.5vw,120px); height:clamp(50px,12.5vw,120px); top:6%; right:26%; animation: float 8s ease-in-out infinite 1.5s; }
.b5 .bubble-label{ font-size:clamp(14px,2.6vw,22px); }
.b6{ width:clamp(36px,9vw,80px); height:clamp(36px,9vw,80px); top:18%; left:40%; animation: float 7.5s ease-in-out infinite .8s; }
.b6 .bubble-label{ font-size:clamp(11px,2vw,17px); }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-30px);} }

/* ترکیدن حباب با کلیک و بازگشت دوباره بعد از چند ثانیه */
.bubble.popped .bubble-inner{ animation: bubblePop .2s ease forwards; }
.bubble.popping-in .bubble-inner{ animation: bubbleAppear .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes bubblePop{
  0%{ transform: scale(1); opacity:1; }
  55%{ transform: scale(1.10); opacity:.55; }
  100%{ transform: scale(1.55); opacity:0; }
}
@keyframes bubbleAppear{
  0%{ transform: scale(0); opacity:0; }
  100%{ transform: scale(1); opacity:1; }
}

/* در صفحات کوچک، حباب کوچک‌تر و کم‌تراکم‌تر باشند تا روی هم نیفتند */
@media (max-width: 560px){
  .b5{ display:none; }
  .b6{ top:auto; bottom:10%; left:8%; }
  .b2{ left:8%; }
  .b4{ right:8%; }
}

/* ===================== حباب‌های محیطی سراسر سایت (شبیه گاز نوشابه) ===================== */
.ambient-bubbles{
  position:fixed; inset:0; z-index:3; overflow:hidden; pointer-events:none;
}
.ambient-bubble{
  position:absolute; bottom:-10vh; border-radius:50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.9), rgba(150,220,245,.35) 55%, rgba(150,220,245,0) 75%);
  border:1px solid rgba(255, 255, 255, 0.466);
  opacity:0;
  animation-name: ambientRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ambientRise{
  0%{ transform: translate(0,0); opacity:0 ;    }
  8%{ opacity:.3; }
  85%{ opacity:.2;   }
  100%{ transform: translate(var(--drift,18px), -115vh) ; opacity:0; }
}


@keyframes breathe {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
    letter-spacing: 0px;
    

  }
  40% {
    opacity: 1;
    transform: scale(1.02);
    letter-spacing: 3px;
    
  }
  70% {
    opacity: 0.9;
    transform: scale(0.98);
    letter-spacing: 1px;
  }
  100% {
    opacity: 0.8;
    transform: scale(0.95);
    letter-spacing: 0px;
    
  }
}@keyframes oxygenWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.breath-title {
  animation: breathe 4s ease-in-out infinite;
  font-weight: 700;
}
.hero-inner{ position:relative; z-index:2; text-align:center;
}
.hero-eyebrow{
  display:inline-block; color:#fff; font-weight:700; letter-spacing:1px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  padding:8px 20px; border-radius:100px; margin-bottom:24px; font-size:14px;
}
.hero-title{
  font-size: clamp(34px, 6vw, 68px); font-weight:800; color:#fff; margin:0 0 20px; line-height:1.25;
  animation: float 1s ease-in infinite 100ms x;
  animation: breathe 10s ease-in-out infinite; 
  font-family: Vm;
}
.start-btn{
  background: linear-gradient(95deg, var(--color-primary), var(--color-secondary));
  border-color: #fff;
  border-width: 1px;
  border-style: solid;
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: oxygenWave 4s linear infinite;
  

  
  
  
}


.hero-tagline{ color:var(--color-accent); max-width:680px; margin:0 auto 18px; font-size:19px; font-weight:700; line-height:1.8; }
.hero-subtitle{ color:#eaf8ff; max-width:680px; margin:0 auto 36px; font-size:18px; line-height:1.9; font-family: Yb; }
.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  text-align:center; color:#dff2fb; font-size:13px;
}
.scroll-cue span{
  display:block; width:2px; height:44px; margin:0 auto 10px;
  background: linear-gradient(#fff, transparent);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown{ 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }

/* ===================== ساختار کلی سکشن‌ها ===================== */
.section{ padding: 100px 0; position:relative; }
.section-tag{
  display:inline-block; color:#0a7ea8; background: rgba(58,182,240,.12);
  border:1px solid rgba(58,182,240,.3); padding:6px 18px; border-radius:100px;
  font-size:13px; font-weight:700; margin-bottom:18px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head h2{ font-size: clamp(28px,4vw,42px); font-weight:800; margin:0 0 14px; color: var(--color-dark); }
.section-head p{ color: var(--color-muted); font-size:16px; line-height:1.9; margin:0; }

/* ===================== درباره ما ===================== */
.about-section{ background: var(--color-lighter); position:relative; overflow:hidden; }
.about-section::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(58,182,240,.14), transparent 70%);
  top:-140px; left:-140px; z-index:0;
}
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.about-image img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.about-text h2{ font-size: clamp(26px,4vw,38px); font-weight:800; margin:6px 0 20px; }
.about-text p{ color: var(--color-muted); line-height:2; font-size:16px; margin-bottom:30px; }
.about-stats{ display:flex; gap:20px; flex-wrap:wrap; }
.stat-item{
  background:#fff; border-radius:var(--radius-md); padding:18px 24px; flex:1; min-width:120px;
  box-shadow: 0 16px 34px -22px rgba(18,58,86,.25); text-align:center;
}
.stat-item strong{ display:block; font-size:30px; font-weight:800; color: var(--color-primary); }
.stat-item span{ color: var(--color-muted); font-size:13.5px; }

/* ===================== خدمات ===================== */
.services-section{ background: linear-gradient(180deg, #fff, var(--color-light)); }
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:26px; }
.service-card{
  background:#fff; padding:34px 26px; border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -28px rgba(18,58,86,.3); transition: transform .35s ease, box-shadow .35s ease;
  border: 1px solid rgba(58,182,240,.1);
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.service-icon{
  width:62px; height:62px; border-radius:18px; margin-bottom:20px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.services-grid .service-card:nth-child(3n+2) .service-icon{ background: linear-gradient(135deg, var(--color-accent), #ff9a56); }
.services-grid .service-card:nth-child(3n+3) .service-icon{ background: linear-gradient(135deg, var(--color-coral), #ff5f9e); }
.service-icon img{ width:100%; height:100%; object-fit:cover; }
.service-icon span{ color:#fff; font-size:26px; }
.service-card h3{ font-size:19px; font-weight:700; margin:0 0 10px; }
.service-card p{ color: var(--color-muted); font-size:15px; line-height:1.85; margin:0; }

/* ===================== محصولات (اسلایدر افقی مثل بخش همکاران) ===================== */
.products-section{ background:#fff; overflow:hidden; }
.products-pin{ padding:0; }
.products-section .section-head{ padding-top:0; }
.products-track-wrapper{ padding:20px 0 40px; }
.products-track{ display:flex; gap:24px; width:max-content; padding:0 24px; }
.product-card{
  flex:0 0 auto; width:260px; border-radius: var(--radius-md); overflow:hidden; background: var(--color-lighter);
  border:1px solid rgba(58,182,240,.12); transition: transform .35s ease, box-shadow .35s ease;
}
.product-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.product-image{
  width:100px; height:100px; margin:24px auto 0; border-radius:18px; overflow:hidden;
  background: linear-gradient(135deg, #d9f3ee, #d3edfb); display:flex; align-items:center; justify-content:center;
}
.product-image img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.product-body{ padding:18px 22px 24px; text-align:center; }
.product-body h3{ font-size:18px; font-weight:700; margin:0 0 8px; }
.product-body p{ color: var(--color-muted); font-size:14px; line-height:1.8; margin:0; }

/* ===================== فرآیند توزیع ===================== */
.process-section{ background: linear-gradient(180deg, #EAF6FD, #DCF1FA); }
.process-section .section-head h2{ color: var(--color-dark); }
.process-section .section-head p{ color: var(--color-muted); }
.process-timeline{ position:relative; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:34px; padding-top:10px; }
.timeline-line{ position:absolute; top:34px; right:0; left:0; height:3px; background: rgba(18,58,86,.1); border-radius:10px; }
.timeline-progress{ position:absolute; inset:0; width:0; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius:10px; }
.process-step{ position:relative; text-align:center; }
.process-icon{
  width:66px; height:66px; border-radius:50%; margin:0 auto 20px; overflow:hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px;
  box-shadow: 0 0 0 8px rgba(58,182,240,.12);
}
.process-timeline .process-step:nth-child(3n+2) .process-icon{ background: linear-gradient(135deg, var(--color-accent), #ff9a56); box-shadow: 0 0 0 8px rgba(255,182,72,.14); }
.process-timeline .process-step:nth-child(3n+3) .process-icon{ background: linear-gradient(135deg, var(--color-coral), #ff5f9e); box-shadow: 0 0 0 8px rgba(255,126,121,.14); }
.process-icon img{ width:100%; height:100%; object-fit:cover; }
.process-body h4{ color: var(--color-dark); font-size:17px; font-weight:700; margin:0 0 10px; }
.process-body p{ color: var(--color-muted); font-size:14px; line-height:1.8; margin:0; }

/* ===================== مجوزها (اسلایدر افقی مثل بخش همکاران) ===================== */
.licenses-section{ background: linear-gradient(180deg,#fff,var(--color-light)); overflow:hidden; }
.licenses-pin{ padding:0; }
.licenses-section .section-head{ padding-top:0; }
.licenses-track-wrapper{ padding:20px 0 40px; }
.licenses-track{ display:flex; gap:22px; width:max-content; padding:0 24px; }
.license-card{
  flex:0 0 auto; width:200px; background:#fff; border-radius: var(--radius-md); padding:22px 18px; text-align:center;
  border:1px solid rgba(58,182,240,.12); transition: transform .3s ease;
}
.license-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px -26px rgba(18,58,86,.3); }
.license-card a{ display:block; width:90px; height:90px; margin:0 auto 14px; border-radius:14px; overflow:hidden;
  background: linear-gradient(135deg,#d9f3ee,#d3edfb); display:flex; align-items:center; justify-content:center; }
.license-card img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.license-file-icon{
  width:100%; height:100%; border-radius:10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.license-card h4{ font-size:15px; font-weight:700; margin:0 0 6px; }
.license-card p{ font-size:13px; color: var(--color-muted); margin:0; }

/* ===================== رزومه و همکاران (اسلایدر افقی) ===================== */
.team-section{ background:#fff; overflow:hidden; }
.team-pin{ padding: 0; }
.team-section .section-head{ padding-top:100px; }
.team-track-wrapper{ padding: 20px 0 120px; }
.team-track{ display:flex; gap:24px; width:max-content; padding: 0 24px; }
.team-card{
  flex: 0 0 auto; width:260px; background: var(--color-lighter); border-radius: var(--radius-md);
  padding:30px 24px; text-align:center; border:1px solid rgba(58,182,240,.12);
  box-shadow: 0 18px 40px -28px rgba(18,58,86,.22);
}
.team-logo{
  width:86px; height:86px; margin:0 auto 20px; border-radius:18px; overflow:hidden;
  background: linear-gradient(135deg,#d9f3ee,#d3edfb); display:flex; align-items:center; justify-content:center;
}
.team-logo img{ width:100%; height:100%; object-fit:cover; }
.team-card h4{ font-size:16px; font-weight:700; margin:0 0 8px; }
.team-card p{ font-size:13.5px; color: var(--color-muted); line-height:1.8; margin:0; }

/* ===================== آموزش‌ها ===================== */
.tutorials-section{ background: linear-gradient(180deg, var(--color-light), #fff); overflow:hidden; }
.tutorials-list-section{ background:#fff; padding-top:60px; }
/* گرید معمولی همچنان برای صفحه‌ی «همه آموزش‌ها» استفاده می‌شود */
.tutorials-list-section .tutorials-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap:26px; }
.tutorials-list-section .tutorial-image{ aspect-ratio:16/10; }
.tutorials-list-section .tutorial-image img{ width:100%; height:100%; object-fit:cover; }

/* پیش‌نمایش آموزش‌ها در صفحه اصلی: اسلایدر افقی مثل بخش همکاران */
.tutorials-teaser-pin{ padding:0; }
#tutorials-teaser .section-head{ padding-top:0; }
.tutorials-track-wrapper{ padding:20px 0 40px; }
.tutorials-track{ display:flex; gap:24px; width:max-content; padding:0 24px; }
.tutorials-track .tutorial-card{ flex:0 0 auto; width:260px; }
.tutorials-track .tutorial-image{
  width:88px; height:88px; margin:22px auto 0; border-radius:16px;
  background: linear-gradient(135deg, #d3edfb, #ffe9d1); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tutorials-track .tutorial-image img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.tutorials-track .tutorial-body{ text-align:center; }

.tutorial-card{
  display:block; border-radius: var(--radius-md); overflow:hidden; background:#fff;
  border:1px solid rgba(58,182,240,.12); box-shadow: 0 18px 40px -28px rgba(18,58,86,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tutorial-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.tutorial-image span{ font-size:40px; }
.tutorial-body{ padding:22px; }
.tutorial-body h3{ font-size:18px; font-weight:700; margin:0 0 8px; color: var(--color-dark); }
.tutorial-body p{ color: var(--color-muted); font-size:14px; line-height:1.8; margin:0 0 14px; }

/* ===================== اسلایدر عمومی (محصولات/مجوزها/همکاران/آموزش‌ها) =====================
   یک ردیف قابل پیمایش با دو دکمه‌ی جهت‌نما؛ این اسلایدر کاملاً مستقل از اسکرول عمودی صفحه است
   و به هیچ وجه در روند اسکرول کاربر دخالت نمی‌کند. */
.carousel{ position:relative; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(58,182,240,.25);
  background:#fff; color: var(--color-dark); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: 0 10px 24px -12px rgba(18,58,86,.28);
  transition: background .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.carousel-btn:hover{ background: linear-gradient(95deg, var(--color-primary), var(--color-secondary)); color:#fff; box-shadow: var(--shadow-soft); }
.carousel-btn:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.carousel-btn:disabled:hover{ background:#fff; color: var(--color-dark); }
.carousel-btn-prev{ right:2px; }
.carousel-btn-next{ left:2px; }
/* اسکرول افقی بومی مرورگر: جهت درست RTL را خود مرورگر تضمین می‌کند
   و با اسکرول عمودی صفحه هیچ تداخلی ندارد. */
.products-track-wrapper, .licenses-track-wrapper, .team-track-wrapper, .tutorials-track-wrapper{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x: contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.products-track-wrapper::-webkit-scrollbar, .licenses-track-wrapper::-webkit-scrollbar,
.team-track-wrapper::-webkit-scrollbar, .tutorials-track-wrapper::-webkit-scrollbar{ display:none; }
.products-track, .licenses-track, .team-track, .tutorials-track{ cursor:grab; }
.products-track:active, .licenses-track:active, .team-track:active, .tutorials-track:active{ cursor:grabbing; }
@media (max-width: 640px){
  .carousel-btn{ width:36px; height:36px; font-size:17px; }
  .carousel-btn-prev{ right:-4px; }
  .carousel-btn-next{ left:-4px; }
}
.tutorial-more{ color:#0a7ea8; font-weight:700; font-size:13.5px; }
.empty-state{ text-align:center; color: var(--color-muted); padding:60px 0; font-size:15px; }

/* صفحه داخلی هدر (لیست/جزئیات آموزش) */
.page-hero{
  position:relative; padding:190px 0 90px; overflow:hidden; text-align:center;
  background: linear-gradient(155deg, #1CA6E8 0%, #0F7FC4 45%, #0A5A93 100%);
}
.page-hero-sm{ padding:170px 0 70px; }
.page-hero .bubble{ opacity:.9; }
.page-hero h1{ color:#fff; font-size: clamp(28px,4vw,44px); font-weight:800; margin:10px 0; position:relative; z-index:2; }
.page-hero .hero-eyebrow{ position:relative; z-index:2; }
.page-hero-sub{ color:#eaf8ff; max-width:620px; margin:0 auto; font-size:16px; line-height:1.9; position:relative; z-index:2; }
.breadcrumb-link{ color:#fff; }

/* محتوای آموزش (متن غنی) */
.tutorial-detail-section{ background:#fff; padding-top:70px; }
.tutorial-detail-container{ display:grid; grid-template-columns: 2.2fr 1fr; gap:50px; align-items:start; }
.tutorial-article{
  background: var(--color-lighter); border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid rgba(58,182,240,.12);
}
.tutorial-cover img{ width:100%; max-height:420px; object-fit:cover; }
.tutorial-prose{ padding:36px 40px; color: var(--color-dark); font-size:16px; line-height:2; }
.tutorial-prose h1, .tutorial-prose h2, .tutorial-prose h3{ color: var(--color-dark); font-weight:800; margin:28px 0 14px; }
.tutorial-prose p{ margin:0 0 18px; color:#2b4a5e; }
.tutorial-prose img{ border-radius: var(--radius-md); margin:20px 0; box-shadow: var(--shadow-soft); }
.tutorial-prose ul, .tutorial-prose ol{ padding-inline-start:26px; margin:0 0 18px; color:#2b4a5e; }
.tutorial-prose li{ margin-bottom:8px; }
.tutorial-prose a{ color:#0a7ea8; font-weight:700; text-decoration:underline; }
.tutorial-prose blockquote{
  margin:20px 0; padding:16px 22px; border-inline-start:4px solid var(--color-primary);
  background: rgba(58,182,240,.08); border-radius:0 var(--radius-md) var(--radius-md) 0; color: var(--color-muted);
}
.tutorial-sidebar{ background: var(--color-lighter); border-radius: var(--radius-md); padding:26px; border:1px solid rgba(58,182,240,.12); }
.tutorial-sidebar h4{ font-weight:800; margin:0 0 16px; font-size:16px; }
.tutorial-sidebar-list{ list-style:none; margin:0; padding:0; }
.tutorial-sidebar-list li{ margin-bottom:12px; }
.tutorial-sidebar-list a{ color: var(--color-dark); font-size:14.5px; font-weight:600; }
.tutorial-sidebar-list a:hover{ color: var(--color-primary); }

/* ===================== تماس با ما ===================== */
.contact-section{ background: linear-gradient(180deg, #EAF6FD, #D9EEFA); }
.contact-section .section-head h2{ color: var(--color-dark); }
.contact-section .section-head p{ color: var(--color-muted); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap:44px; }
.contact-info{ color: var(--color-dark); }
.info-block{ margin-bottom:24px; }
.info-block h5{ color:#0a7ea8; font-size:14px; font-weight:700; margin:0 0 12px; }
.info-block ul{ list-style:none; margin:0; padding:0; }
.info-block li{ margin-bottom:8px; font-size:15px; }
.info-block a:hover{ color: var(--color-primary); }

.social-row{ display:flex; flex-wrap:wrap; gap:10px; }
.social-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  background:#fff; color: var(--color-dark); font-size:13.5px; font-weight:700;
  border:1px solid rgba(18,58,86,.1); box-shadow: 0 10px 24px -16px rgba(18,58,86,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.social-chip:hover{ transform: translateY(-3px); }
.social-chip i{ font-size:16px; }
.social-instagram i{ color:#E1306C; }
.social-telegram i{ color:#27A7E7; }
.social-whatsapp i{ color:#25D366; }
.social-eitaa{ color:#c0392b; }
.social-bale{ color:#f39c12; }
.social-rubika{ color:#6a1b9a; }

.contact-form-wrap{
  background:#fff; border:1px solid rgba(58,182,240,.14);
  border-radius: var(--radius-lg); padding:34px; box-shadow: 0 20px 50px -30px rgba(18,58,86,.25);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field{ margin-bottom:16px; }
.contact-form-wrap .form-control{
  background: var(--color-lighter); border:1px solid rgba(18,58,86,.12); color: var(--color-dark);
  border-radius:12px; padding:13px 16px; font-family: var(--font-main);
}
.contact-form-wrap .form-control::placeholder{ color: var(--color-muted); }
.contact-form-wrap .form-control:focus{
  background:#fff; border-color: var(--color-primary); box-shadow:0 0 0 4px rgba(58,182,240,.12); color: var(--color-dark);
}
.field-error{ color:#e0554f; font-size:12.5px; margin-top:6px; }
.alert-toast{
  margin-top:16px; padding:12px 16px; border-radius:12px; font-size:14px;
  background: rgba(34,211,195,.14); color:#0a7a6c; border:1px solid rgba(34,211,195,.35);
}
.alert-toast.error{ background: rgba(255,110,110,.12); color:#c0392b; border-color: rgba(255,110,110,.35); }

/* ===================== فوتر ===================== */
.site-footer{ background: var(--color-dark-2); padding:44px 0; border-top:1px solid rgba(255,255,255,.06); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; }
.footer-brand img{ height:32px; width:32px; object-fit:contain; border-radius:8px; background:#fff; padding:3px; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social .social-chip{
  background: rgba(255,255,255,.08); color:#eaf8ff; border-color: rgba(255,255,255,.14); box-shadow:none;
  width:38px; height:38px; padding:0; justify-content:center;
}
.footer-social .social-chip span{ display:none; }
.footer-social .social-chip:hover{ background: rgba(255,255,255,.16); }
.footer-copy{ width:100%; text-align:center; color:#6f95ad; font-size:13px; margin:20px 0 0; }

/* ===================== انیمیشن‌های ورود (GSAP hooks) ===================== */
.reveal-up, .reveal-left, .reveal-right{ opacity:0; }

/* ===================== ریسپانسیو ===================== */
@media (max-width: 992px){
  .about-grid, .contact-grid, .tutorial-detail-container{ grid-template-columns: 1fr; }
  .about-image{ order:2; }

  /* منوی اسلایدی برای موبایل و تبلت */
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; left:auto; height:100vh; width:78%; max-width:320px;
    background: rgba(10,39,64,.97); flex-direction:column; justify-content:center;
    transform: translateX(100%); transition: transform .4s ease; padding:0 40px;
    visibility:hidden;
  }
  .nav-links.open{ transform: translateX(0); visibility:visible; }
  .nav-toggle{ display:flex; }
  .nav-close-item{ position:absolute; top:18px; left:18px; list-style:none; }
  .nav-close{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1;
    cursor:pointer;
  }
  .nav-close:hover{ background: rgba(255,255,255,.18); }
}
@media (max-width: 768px){
  .form-row{ grid-template-columns:1fr; }
  .section{ padding:70px 0; }
  .page-hero{ padding:150px 0 70px; }
}