/* =============================================   VITALAYER — style.css   Theme: White / Light Green / Soft Turquoise   ============================================= *//* --- RESET & BASE --- */*, *::before, *::after {  box-sizing: border-box;  margin: 0;  padding: 0;}:root {  --primary:     #2abfbf;   /* فیروزه‌ای اصلی */  --primary-dk:  #1e9e9e;   /* فیروزه‌ای تیره‌تر */  --primary-lt:  #e0f7f7;   /* فیروزه‌ای خیلی روشن */  --green:       #6dbf8a;   /* سبز روشن */  --green-lt:    #eaf7ee;   /* سبز خیلی روشن */  --white:       #ffffff;  --bg:          #f7fafa;   /* پس‌زمینه کلی */  --text:        #1a2e2e;   /* متن اصلی */  --text-mid:    #4a6060;   /* متن ثانوی */  --text-light:  #8aabab;   /* متن کم‌رنگ */  --border:      #d4eeee;  --shadow:      0 4px 24px rgba(42,191,191,0.10);  --shadow-md:   0 8px 40px rgba(42,191,191,0.16);  --radius:      16px;  --radius-sm:   10px;  --font:        'Vazirmatn', sans-serif;}html { scroll-behavior: smooth; }body {  font-family: var(--font);  background: var(--bg);  color: var(--text);  line-height: 1.7;  font-size: 15px;  direction: rtl;}img { max-width: 100%; display: block; }a { text-decoration: none; color: inherit; }.container {  max-width: 1140px;  margin: 0 auto;  padding: 0 20px;}/* --- SECTION HEADER --- */.section-header {  text-align: center;  margin-bottom: 48px;}.section-header h2 {  font-size: 2rem;  font-weight: 800;  color: var(--text);  margin-bottom: 10px;}.section-header p {  color: var(--text-mid);  font-size: 1rem;}/* =============================================   HEADER   ============================================= */.header {  position: sticky;  top: 0;  z-index: 100;  background: rgba(255,255,255,0.95);  backdrop-filter: blur(12px);  border-bottom: 1px solid var(--border);  box-shadow: 0 2px 12px rgba(42,191,191,0.07);}.header-inner {  display: flex;  align-items: center;  justify-content: space-between;  height: 68px;  gap: 16px;}.logo {  display: flex;  align-items: center;  gap: 10px;}.logo img {  height: 44px;  width: auto;  object-fit: contain;}.logo span {  font-size: 1.2rem;  font-weight: 800;  color: var(--primary);  letter-spacing: -0.5px;}.nav {  display: flex;  align-items: center;  gap: 24px;}.nav a {  font-size: 0.9rem;  font-weight: 500;  color: var(--text-mid);  transition: color 0.2s;}.nav a:hover { color: var(--primary); }.btn-call {  background: var(--primary-lt);  color: var(--primary-dk) !important;  padding: 8px 18px;  border-radius: 50px;  font-weight: 700 !important;  font-size: 0.85rem !important;  transition: background 0.2s !important;}.btn-call:hover { background: var(--primary) !important; color: #fff !important; }/* =============================================   HERO   ============================================= */.hero {  position: relative;  overflow: hidden;  padding: 80px 0 60px;  background: linear-gradient(135deg, #f0fbfb 0%, #e8f7f0 60%, #f7fafa 100%);}.hero-bg {  position: absolute;  inset: 0;  background:    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(42,191,191,0.12) 0%, transparent 70%),    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(109,191,138,0.10) 0%, transparent 70%);  pointer-events: none;}.hero-content {  position: relative;  display: flex;  align-items: center;  gap: 48px;}.hero-text { flex: 1; }.hero-tag {  display: inline-block;  background: var(--primary-lt);  color: var(--primary-dk);  font-size: 0.82rem;  font-weight: 700;  padding: 6px 16px;  border-radius: 50px;  margin-bottom: 20px;  border: 1px solid var(--border);}.hero-text h1 {  font-size: 2.8rem;  font-weight: 800;  line-height: 1.3;  color: var(--text);  margin-bottom: 18px;}.hero-text h1 span {  color: var(--primary);}.hero-desc {  color: var(--text-mid);  font-size: 1rem;  max-width: 440px;  margin-bottom: 32px;}.hero-actions {  display: flex;  gap: 14px;  flex-wrap: wrap;}.btn-primary {  background: linear-gradient(135deg, var(--primary), var(--primary-dk));  color: #fff;  padding: 14px 32px;  border-radius: 50px;  font-weight: 700;  font-size: 0.95rem;  box-shadow: 0 4px 20px rgba(42,191,191,0.35);  transition: transform 0.2s, box-shadow 0.2s;  display: inline-block;}.btn-primary:hover {  transform: translateY(-2px);  box-shadow: 0 8px 28px rgba(42,191,191,0.45);}.btn-secondary {  background: var(--white);  color: var(--primary);  padding: 14px 32px;  border-radius: 50px;  font-weight: 700;  font-size: 0.95rem;  border: 2px solid var(--primary);  transition: background 0.2s, color 0.2s;  display: inline-block;}.btn-secondary:hover {  background: var(--primary);  color: #fff;}.hero-image {  flex: 0 0 380px;  display: flex;  justify-content: center;}.hero-image img {  max-height: 420px;  object-fit: contain;  filter: drop-shadow(0 16px 40px rgba(42,191,191,0.20));  animation: float 4s ease-in-out infinite;}@keyframes float {  0%, 100% { transform: translateY(0); }  50%       { transform: translateY(-12px); }}/* =============================================   BADGES   ============================================= */.badges {  background: var(--white);  border-top: 1px solid var(--border);  border-bottom: 1px solid var(--border);  padding: 28px 0;}.badges-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 16px;}.badge-item {  display: flex;  align-items: center;  gap: 12px;  padding: 16px 20px;  border-radius: var(--radius-sm);  background: var(--bg);  border: 1px solid var(--border);  transition: box-shadow 0.2s;}.badge-item:hover { box-shadow: var(--shadow); }.badge-icon { font-size: 1.6rem; }.badge-item p {  font-size: 0.88rem;  font-weight: 600;  color: var(--text);}/* =============================================   PRODUCTS   ============================================= */.products {  padding: 80px 0;  background: var(--bg);}.products-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 1.5rem;}.product-card {  background: #fff;  border-radius: 16px;  padding: 1.2rem;  text-align: center;  box-shadow: 0 2px 12px rgba(0,0,0,0.08);  display: flex;  flex-direction: column;  gap: 0.5rem;}.product-card img {  width: 100%;  max-height: 180px;  object-fit: contain;  border-radius: 10px;}.product-card:hover {  transform: translateY(-6px);  box-shadow: var(--shadow-md);}.product-card.featured {  border-color: var(--primary);  box-shadow: 0 0 0 2px rgba(42,191,191,0.15);}.product-price {  font-weight: 700;  color: #2a9d8f;  font-size: 1.1rem;}.product-sub {  font-size: 0.85rem;  color: #666;}.product-badge {  position: absolute;  top: 14px;  right: 14px;  background: var(--primary-lt);  color: var(--primary-dk);  font-size: 0.75rem;  font-weight: 700;  padding: 4px 12px;  border-radius: 50px;  border: 1px solid var(--border);  z-index: 2;}.product-badge.best {  background: linear-gradient(135deg, var(--primary), var(--green));  color: #fff;  border: none;}.product-img {  background: linear-gradient(135deg, var(--primary-lt), var(--green-lt));  padding: 32px 24px;  display: flex;  justify-content: center;  align-items: center;  min-height: 220px;}.product-img img {  max-height: 180px;  object-fit: contain;  transition: transform 0.3s;}.product-card:hover .product-img img { transform: scale(1.05); }.product-info {  padding: 22px;  flex: 1;  display: flex;  flex-direction: column;  gap: 8px;}.product-info h3 {  font-size: 1.05rem;  font-weight: 700;  color: var(--text);}.product-skin {  font-size: 0.8rem;  color: var(--primary-dk);  font-weight: 600;  background: var(--primary-lt);  display: inline-block;  padding: 3px 10px;  border-radius: 50px;}.product-desc {  font-size: 0.85rem;  color: var(--text-mid);  flex: 1;}.product-footer {  display: flex;  align-items: center;  justify-content: space-between;  margin-top: 12px;  padding-top: 14px;  border-top: 1px solid var(--border);}.price {  font-size: 1.05rem;  font-weight: 800;  color: var(--text);}.btn-buy {  background: linear-gradient(135deg, var(--primary), var(--primary-dk));  color: #fff;  padding: 9px 22px;  border-radius: 50px;  font-size: 0.85rem;  font-weight: 700;  transition: opacity 0.2s, transform 0.2s;}.btn-buy:hover { opacity: 0.88; transform: scale(1.04); }/* =============================================   QUIZ   ============================================= */.quiz-section {  padding: 80px 0;  background: linear-gradient(135deg, var(--primary-lt) 0%, var(--green-lt) 100%);  border-top: 1px solid var(--border);  border-bottom: 1px solid var(--border);}.quiz-box {  max-width: 680px;  margin: 0 auto;  background: var(--white);  border-radius: var(--radius);  padding: 40px;  box-shadow: var(--shadow-md);  border: 1px solid var(--border);  min-height: 260px;}/* Quiz progress */.quiz-progress {  display: flex;  gap: 6px;  margin-bottom: 28px;}.quiz-progress-dot {  flex: 1;  height: 5px;  border-radius: 50px;  background: var(--border);  transition: background 0.3s;}.quiz-progress-dot.active { background: var(--primary); }.quiz-progress-dot.done   { background: var(--green); }.quiz-question {  font-size: 1.15rem;  font-weight: 700;  color: var(--text);  margin-bottom: 24px;  line-height: 1.5;}.quiz-options {  display: flex;  flex-direction: column;  gap: 12px;}.quiz-option {  background: var(--bg);  border: 2px solid var(--border);  border-radius: var(--radius-sm);  padding: 14px 20px;  font-size: 0.95rem;  font-weight: 500;  color: var(--text);  cursor: pointer;  text-align: right;  transition: border-color 0.2s, background 0.2s, transform 0.15s;  font-family: var(--font);  width: 100%;}.quiz-option:hover {  border-color: var(--primary);  background: var(--primary-lt);  transform: translateX(-4px);}.quiz-option.selected {  border-color: var(--primary);  background: var(--primary-lt);  color: var(--primary-dk);  font-weight: 700;}/* Quiz result */.quiz-result {  text-align: center;  padding: 10px 0;}.quiz-result-icon { font-size: 3rem; margin-bottom: 12px; }.quiz-result h3 {  font-size: 1.3rem;  font-weight: 800;  color: var(--text);  margin-bottom: 8px;}.quiz-result p {  color: var(--text-mid);  margin-bottom: 24px;  font-size: 0.95rem;}.quiz-result .btn-primary { margin: 0 auto; }.quiz-restart {  background: none;  border: none;  color: var(--text-light);  font-size: 0.85rem;  cursor: pointer;  margin-top: 14px;  font-family: var(--font);  display: block;  margin-left: auto;  margin-right: auto;  text-decoration: underline;}.quiz-restart:hover { color: var(--primary); }/* =============================================   COMPARE TABLE   ============================================= */.compare {  padding: 80px 0;  background: var(--white);}.table-wrap {  overflow-x: auto;  border-radius: var(--radius);  border: 1px solid var(--border);  box-shadow: var(--shadow);}.compare-table {  width: 100%;  border-collapse: collapse;  text-align: center;  font-size: 0.9rem;}.compare-table th {  background: #2a9d8f;  color: #fff;  padding: 0.7rem 1rem;}.compare-table td {  padding: 0.6rem 1rem;  border-bottom: 1px solid #e0f2f1;}.compare-table tr:nth-child(even) td {  background: #f0faf9;}.btn-small {  background: #2a9d8f;  color: #fff;  padding: 0.3rem 0.8rem;  border-radius: 8px;  text-decoration: none;  font-size: 0.85rem;}.btn-small:hover {  background: #21867a;}.compare-table th:first-child,.compare-table td:first-child {  text-align: right;  font-weight: 600;  color: var(--text-mid);  background: var(--bg);}.compare-table thead th {  background: linear-gradient(135deg, var(--primary-lt), var(--green-lt));  font-weight: 800;  color: var(--text);  font-size: 0.95rem;}.compare-table thead th:first-child { background: var(--bg); }.compare-table tbody tr:last-child td { border-bottom: none; }.compare-table tbody tr:hover td { background: var(--bg); }/* =============================================   GUIDE   ============================================= */.guide {  padding: 80px 0;  background: var(--bg);}.guide-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 24px;}.guide-card {  background: var(--white);  border-radius: var(--radius);  padding: 28px 22px;  border: 1px solid var(--border);  text-align: center;  transition: box-shadow 0.2s, transform 0.2s;}.guide-card:hover {  box-shadow: var(--shadow);  transform: translateY(-4px);}.guide-num {  display: inline-flex;  align-items: center;  justify-content: center;  width: 48px;  height: 48px;  border-radius: 50%;  background: linear-gradient(135deg, var(--primary), var(--green));  color: #fff;  font-size: 1.2rem;  font-weight: 800;  margin-bottom: 16px;}.guide-card h4 {  font-size: 0.95rem;  font-weight: 700;  color: var(--text);  margin-bottom: 8px;}.guide-card p {  font-size: 0.85rem;  color: var(--text-mid);  line-height: 1.6;}/* =============================================   FAQ   ============================================= */.faq {  padding: 80px 0;  background: var(--white);}.faq-list {  max-width: 760px;  margin: 0 auto;  display: flex;  flex-direction: column;  gap: 12px;}.faq-item {  border: 1px solid var(--border);  border-radius: var(--radius-sm);  overflow: hidden;  background: var(--bg);  transition: box-shadow 0.2s;}.faq-item.open { box-shadow: var(--shadow); }.faq-q {  width: 100%;  background: none;  border: none;  padding: 18px 22px;  font-size: 0.95rem;  font-weight: 600;  color: var(--text);  cursor: pointer;  text-align: right;  display: flex;  justify-content: space-between;  align-items: center;  font-family: var(--font);  gap: 12px;  transition: color 0.2s;}.faq-q:hover { color: var(--primary); }.faq-q span {  font-size: 1.3rem;  font-weight: 400;  color: var(--primary);  flex-shrink: 0;}.faq-a {  display: none;  padding: 0 22px 18px;}.faq-item.open .faq-a { display: block; }.faq-a p {  font-size: 0.9rem;  color: var(--text-mid);  line-height: 1.8;  border-top: 1px solid var(--border);  padding-top: 14px;}/* =============================================   FOOTER   ============================================= */.footer {  background: var(--text);  color: rgba(255,255,255,0.85);  padding: 48px 0 32px;}.footer-inner {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 40px;  align-items: start;}.footer-brand {  display: flex;  flex-direction: column;  gap: 10px;}.footer-brand img {  height: 50px;  width: auto;  object-fit: contain;  filter: brightness(0) invert(1);  opacity: 0.9;}.footer-brand p {  font-size: 0.9rem;  font-weight: 600;  color: #fff;}.footer-brand a {  font-size: 0.95rem;  font-weight: 700;  color: var(--primary);  direction: ltr;  display: inline-block;}.footer-links {  display: flex;  flex-direction: column;  gap: 10px;}.footer-links a {  font-size: 0.88rem;  color: rgba(255,255,255,0.65);  transition: color 0.2s;}.footer-links a:hover { color: var(--primary); }.footer-pay {  display: flex;  flex-direction: column;  gap: 8px;}.footer-pay p {  font-size: 0.85rem;  color: rgba(255,255,255,0.55);}/* =============================================   RESPONSIVE   ============================================= */@media (max-width: 1024px) {  .products-grid { grid-template-columns: repeat(2, 1fr); }  .guide-grid    { grid-template-columns: repeat(2, 1fr); }  .badges-grid   { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 768px) {  .header-inner { height: 60px; }  .nav { display: none; }  .hero { padding: 48px 0 40px; }  .hero-content {    flex-direction: column-reverse;    gap: 28px;    text-align: center;  }  .hero-text h1 { font-size: 2rem; }  .hero-desc { margin: 0 auto 28px; }  .hero-actions { justify-content: center; }  .hero-image { flex: none; }  .hero-image img { max-height: 260px; }  .products-grid { grid-template-columns: 1fr; }  .guide-grid    { grid-template-columns: 1fr 1fr; }  .badges-grid   { grid-template-columns: 1fr 1fr; }  .quiz-box { padding: 24px 18px; }  .footer-inner {    grid-template-columns: 1fr;    gap: 28px;    text-align: center;  }  .footer-brand { align-items: center; }  .footer-links { align-items: center; }  .footer-pay   { align-items: center; }  .section-header h2 { font-size: 1.5rem; }}@media (max-width: 480px) {  .guide-grid  { grid-template-columns: 1fr; }  .badges-grid { grid-template-columns: 1fr; }  .hero-text h1 { font-size: 1.7rem; }  .btn-primary, .btn-secondary { padding: 12px 22px; font-size: 0.88rem; }}.hero-image-box {  width: 100%;  max-width: 460px;  aspect-ratio: 1 / 1;  background: linear-gradient(180deg, #ffffff 0%, #ecfdfc 100%);  border-radius: 32px;  display: flex;  align-items: center;  justify-content: center;  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);  overflow: hidden;  border: 1px solid rgba(0, 0, 0, 0.04);}.hero-product-image {  width: 85%;  height: 85%;  object-fit: contain;  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));}