/* Complete CarbonCore Design - Based on Figma Export */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Variables */
:root {
  --primary-green: #4CAF50;
  --dark-green: #2E7D32;
  --forest-green: #3B8018;
  --text-dark: #1E450A;
  --text-primary: #061001;
  --light-green: #A5D6A7;
  --text-color: #333333;
  --text-light: #666666;
  --white: #FFFFFF;
  --gray-light: #F5F5F5;
  --gray-medium: #E0E0E0;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* GLOBAL SCALE FACTOR */
  --global-scale: clamp(0.7, 0.7 + (100vw - 768px) * 0.0004, 1);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 32px;
  color: var(--text-color);
  background: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 62px; /* Высота хедера: 15px + 32px + 15px = 62px */
}

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

.hidden {
  display: none !important;
}

/* Typography Styles */
h1 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 64px;
  line-height: 72px;
  color: var(--text-primary);
}

h2 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 44px;
  line-height: 44px;
  color: var(--text-primary);
  text-align: center;
}

h3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-dark);
}

h4 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-dark);
}

.section-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 32px;
  color: var(--text-primary);
  text-align: center;
  max-width: 550px;
  margin: 0 auto 57px;
}

/* Header */
.header-minimal {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  z-index: 1000;
  padding: 15px 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 0 */
.logo {
  margin-left: 0;
}

.logo img {
  height: 32px;
}

.btn,
.connect-wallet-btn,
.disconnect-btn,
.dashboard-link,
.cta-button,
.feature-btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(238, 244, 237, 0.6); 
  color: #061001;
  border: none;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.btn:hover,
.connect-wallet-btn:hover,
.disconnect-btn:hover,
.dashboard-link:hover,
.cta-button:hover,
.feature-btn:hover,
button:hover {
  background: rgba(238, 244, 237, 0.8);
  transform: translateY(-1px);
}

.btn-primary,
.connect-wallet-btn {
  background: #4CAF50;
  color: white;
}

.btn-primary:hover,
.connect-wallet-btn:hover {
  background: #45a049;
}

.cta-button {
  background: rgba(238, 244, 237, 0.6);
  color: #061001;
  padding: 16px 24px;
  font-size: 20px;
  gap: 12px;
}

.cta-button:hover {
  background: rgba(238, 244, 237, 0.8);
}

.connect-wallet-btn img {
  width: 18px;
  height: 18px;
}

/* Wallet Info Styles */
.wallet-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.wallet-info.hidden {
  display: none !important;
}

#walletAddress {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: rgba(76, 175, 80, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: var(--text-color);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero Section with Scaling */
.hero-3d {
  position: relative;
  height: 683px; /* Точная высота вместо 100vh */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(181.15deg, #EEF4ED 66.07%, #E7EFE4 99.1%);
  padding: 0; 
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 683px;
  padding: 0;
  transform: scale(var(--global-scale));
  transform-origin: top center;
}

.hero-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 417px;
  z-index: 4; 
}

.forest-sphere {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 830px;
  height: 683px;
  background-image: url('../img/forest-sphere.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1; /* Под геометрическим фоном */
}

.geometric-overlay {
   position: absolute;
   right: 300px; /* Сдвигаем на 300px влево от правого края */
   top: 50%; /* Как у .forest-sphere */
   transform: translateY(-50%); /* Как у .forest-sphere */
   width: 830px; /* Как у .forest-sphere */
   height: 683px; /* Как у .forest-sphere */
   background-image: url('../img/geometric-overlay.svg');
   background-size: 590px 509px; /* Размер самого SVG */
   background-repeat: no-repeat;
   background-position: center; /* Центрируем SVG внутри области сферы */
   opacity: 0.8;
   z-index: 3; /* Поверх сферы (z-index: 1), но под текстом (z-index: 4) */
}

.background-dots {
   position: absolute;
   left: 0; /* Позиционируем слева */
   top: 50%;
   transform: translateY(-50%);
   width: 500px; /* Ограничиваем ширину областью текста */
   height: 683px; /* Высота как у контейнера */
   background-image: url('../img/geometric-bg.svg');
   background-size: 380px 629px;
   background-repeat: repeat;
   background-position: center; /* Центрируем паттерн */
   opacity: 1; /* Максимальная непрозрачность */
   filter: brightness(2.0) contrast(1.8) saturate(1.5); /* Еще ярче и контрастнее */
   z-index: 2; /* Под текстом, но поверх фона */
   animation: dotsMove 20s linear infinite;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 56px);
  font-weight: 500;
  font-family: var(--font-primary);
  line-height: 1.125;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 20px);
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.cta-button:hover .arrow-icon {
  transform: translateX(4px);
}

.cta-button.large {
  padding: 16px 24px;
  font-size: 20px;
}

/* Animations */
@keyframes sphereFloat {
  0%, 100% { 
      transform: translateY(0px); 
  }
  50% { 
      transform: translateY(-15px); 
  }
}

@keyframes geometricPulse {
  0%, 100% { 
      opacity: 0.8; 
      transform: translate(-50%, -50%) scale(1); 
  }
  50% { 
      opacity: 0.4; 
      transform: translate(-50%, -50%) scale(1.05); 
  }
}

@keyframes dotsMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Hero Section - мобильная адаптация */
@media (max-width: 768px) {
   .hero-3d {
       height: auto;
       min-height: auto;
       padding: 40px 0;
       display: block;
       background: linear-gradient(181.15deg, #EEF4ED 66.07%, #E7EFE4 99.1%);
   }

   .hero-content {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
       padding: 0 20px;
       text-align: center;
       transform: scale(1); /* Отключаем масштабирование на мобильных */
   }

   /* Убираем все геометрические элементы */
   .background-dots,
   .geometric-overlay {
       display: none !important;
   }

   .hero-text {
       position: relative !important;
       left: auto !important;
       top: auto !important;
       transform: none !important;
       width: 100% !important;
       max-width: 350px !important;
       margin: 0 auto 30px auto !important; /* Уменьшаем отступ снизу */
       z-index: 10 !important;
       padding: 0 !important;
       display: block !important;
   }

   .hero-title {
       font-size: 32px !important;
       line-height: 1.2 !important;
       margin-bottom: 1rem !important;
       text-align: center !important;
       display: block !important;
       color: #061001 !important;
   }

   .hero-subtitle {
       font-size: 16px !important;
       line-height: 1.5 !important;
       margin-bottom: 0 !important;
       text-align: center !important;
       display: block !important;
       color: #061001 !important;
   }

   .forest-sphere {
       position: relative !important;
       right: auto !important;
       top: auto !important;
       transform: none !important;
       width: 100% !important;
       max-width: 400px !important;
       height: 300px !important;
       margin: 0 auto !important;
       z-index: 1 !important;
       display: block !important;
       background-size: contain !important; /* Изменяем с cover на contain */
       background-position: center !important;
       background-repeat: no-repeat !important;
   }

   /* Скрываем кнопку на мобильных */
   .cta-button {
       display: none !important;
   }
}

@media (max-width: 480px) {
   .hero-text {
       margin-bottom: 20px !important; /* Меньше отступ */
   }

   .forest-sphere {
       height: 250px !important;
   }
}


/* Content Sections */
.content-section {
  padding: var(--spacing-xxl) 0;
}

.content-section.bg-light {
  background: #F9F9F9;
}

/* Platform Features Section with Scaling */
.content-section:nth-of-type(2) {
   background: linear-gradient(180deg, #FFFFFF 0%, #F8FAF7 100%);
   padding: 80px 0;
   margin-top: 0; /* Убираем отступ сверху */
}

.content-section:nth-of-type(2) .container {
   max-width: 1200px; /* Как у hero-content */
   padding: 0 var(--spacing-lg);
}

.content-section:nth-of-type(2) h2 {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 500;
   font-size: 44px;
   line-height: 44px;
   color: #061001;
   text-align: center;
   margin-bottom: 16px;
}

.content-section:nth-of-type(2) .text-center {
   text-align: center;
}

/* Feature Cards with Scaling */
.feature-cards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin: 0 auto;
   max-width: 1200px;
   transform: scale(var(--global-scale));
   transform-origin: top center;
}

.feature-card-large {
   background: rgba(238, 244, 237, 0.01); /* Возвращаем прозрачный фон */
   backdrop-filter: blur(4px);
   border-radius: 4px;
   padding: 24px;
   box-shadow: none;
   border: 1px solid #E7EFE4; /* Ободок #E7EFE4 */
   transition: all 0.3s ease;
   text-align: left;
   min-height: 320px;
   display: flex;
   flex-direction: column;
}

.feature-card-large:hover {
   transform: translateY(-2px);
   background: rgba(238, 244, 237, 0.05);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feature-card-icon {
   width: 53px; /* Уменьшаем в 1.5 раза: 80px / 1.5 = 53px */
   height: 53px; /* Уменьшаем в 1.5 раза: 80px / 1.5 = 53px */
   background: #E7EFE4; /* Фон #E7EFE4 для иконок */
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 0 24px 0; /* Позиционирование по верхнему левому краю не меняем */
}

.feature-card-icon img {
   width: 27px; /* Уменьшаем в 1.5 раза: 40px / 1.5 = 27px */
   height: 27px; /* Уменьшаем в 1.5 раза: 40px / 1.5 = 27px */
   opacity: 0.8;
}

.feature-card-large h3 {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 500;
   font-size: 24px;
   line-height: 32px;
   color: #1E450A;
   margin-bottom: 16px;
}

.feature-card-large p {
   font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 300;
   font-size: 18px;
   line-height: 28px;
   color: #000000;
   margin-bottom: 0;
   flex-grow: 1;
}

.feature-btn {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 55px;
   padding: 16px 24px;
   background: transparent;
   color: #061001;
   border: none;
   border-radius: 0;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 300;
   font-size: 20px;
   line-height: 20px;
   text-decoration: none;
   transition: all 0.3s ease;
   cursor: pointer;
   margin-top: auto;
   width: 100%;
   position: relative;
}

.feature-btn::after {
   content: '→';
   font-size: 24px;
   transition: transform 0.3s ease;
}

.feature-btn:hover {
   background: rgba(238, 244, 237, 0.5);
}

.feature-btn:hover::after {
   transform: translateX(5px);
}

.feature-btn-green {
   background: #4CAF50;
   color: white;
   border-radius: 4px;
   padding: 8px 20px;
   width: auto;
   gap: 10px;
   justify-content: center;
}

.feature-btn-green:hover {
   background: #2E7D32;
}

.feature-btn-green::after {
   content: none;
}

/* Responsive для мобильных Features Section */
@media (max-width: 768px) {
   .content-section:nth-of-type(2) .container {
       padding-left: var(--spacing-md);
       padding-right: var(--spacing-md);
   }
   
   .feature-cards-grid {
       transform: scale(1); /* Отключаем масштабирование на мобильных */
   }
}


/* Process Steps with Scaling */
.process-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--spacing-lg);
   margin: var(--spacing-xl) 0;
   transform: scale(var(--global-scale));
   transform-origin: top center;
}

.process-step {
   background: white;
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-lg);
   text-align: left;
   position: relative;
   box-shadow: var(--shadow-sm);
   display: flex;
   flex-direction: column;
   aspect-ratio: 282/273;
   min-height: 250px; /* Возвращаем исходную высоту */
}

/* Специфичные фоны для каждой карточки */
.process-step:nth-child(1) { background: #F7F9F6; }
.process-step:nth-child(2) { background: #EEF4ED; }
.process-step:nth-child(3) { background: #F0F7E5; }
.process-step:nth-child(4) { background: #E1FAD1; }

.process-step-number {
   width: 40px;
   height: 40px;
   background: white; /* Белый фон для цифр */
   color: #B9E29E;
   border-radius: 4px; /* Квадратный */
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 1.2rem;
   flex-shrink: 0;
   margin-bottom: var(--spacing-sm);
   align-self: flex-start;
}

.process-step-content {
   flex: 1;
   margin-left: 0;
}

.process-step-content h3 {
   margin-bottom: var(--spacing-sm);
   color: var(--text-dark);
   margin-left: 0;
   /* Возвращаем исходные размеры шрифта */
}

.process-step-content p {
   color: var(--text-color);
   font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-weight: 300;
   font-size: 18px;
   line-height: 28px;
   margin-left: 0;
}

/* Responsive */
@media (max-width: 1024px) {
   .process-steps {
       grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .process-steps {
       grid-template-columns: 1fr;
       transform: scale(1); /* Отключаем масштабирование на мобильных */
   }
   
   .process-step {
       aspect-ratio: auto;
       min-height: 200px;
   }
}

/* Mission Section with Scaling - полная переработка для десктопа */
.mission-section {
   padding: var(--spacing-xxl) 0;
   background: var(--white);
}

.mission-content {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0; /* Убираем padding контейнера */
   transform: scale(var(--global-scale));
   transform-origin: top center;
}

/* Десктопная версия */
@media (min-width: 769px) {
   .mission-title {
       font-family: var(--font-primary);
       font-weight: 500;
       font-size: 44px;
       line-height: 44px;
       color: var(--text-primary);
       margin-bottom: -20px; /* ОТРИЦАТЕЛЬНЫЙ ОТСТУП */
       text-align: left;
       margin-left: 0;
       padding-left: 0;
       position: relative;
       left: 0;
   }

   .mission-cards {
       display: grid;
       grid-template-columns: 282px 1fr 1fr 282px;
       gap: 40px;
       align-items: end;
       margin: 0;
       padding: 0;
   }

   .mission-card:nth-child(1) {
       height: 273px;
   }

   .mission-card:nth-child(1) .card-image {
       width: 282px;
       height: 273px;
       border-radius: var(--border-radius-xl);
       overflow: hidden;
   }

   .mission-card:nth-child(1) .card-content {
       display: none;
   }

   .mission-card:nth-child(2) {
       height: 356px;
       background: #E1FAD1;
       border-radius: var(--border-radius-xl);
       padding: 24px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .mission-card:nth-child(2) .card-image {
       display: none;
   }

   .mission-card:nth-child(3) {
       height: 440px;
       background: #EEF4ED;
       border-radius: var(--border-radius-xl);
       padding: 24px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .mission-card:nth-child(3) .card-image {
       display: none;
   }

   .mission-card:nth-child(4) {
       height: 356px;
   }

   .mission-card:nth-child(4) .card-image {
       width: 282px;
       height: 356px;
       border-radius: var(--border-radius-xl);
       overflow: hidden;
   }

   .mission-card:nth-child(4) .card-content {
       display: none;
   }
   
   .mission-card .card-content p {
       font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       font-weight: 300;
       font-size: 18px;
       line-height: 28px;
       color: #000000;
   }
}

/* Мобильная версия */
@media (max-width: 768px) {
   .mission-content {
       padding: 0 var(--spacing-lg);
       transform: scale(1); /* Отключаем масштабирование на мобильных */
   }
   
   .mission-title {
       font-family: var(--font-primary);
       font-weight: 500;
       font-size: 36px;
       line-height: 40px;
       color: var(--text-primary);
       margin-bottom: 16px; 
       text-align: center;
   }

   .mission-cards {
       display: grid;
       grid-template-columns: 1fr;
       gap: 40px;
       align-items: start;
   }

   .mission-card {
       display: flex;
       flex-direction: column;
       gap: 24px;
       height: auto;
       background: transparent !important;
       padding: 0;
   }

   .mission-card .card-image {
       display: block;
       width: 100%;
       height: 280px;
       border-radius: var(--border-radius-xl);
       overflow: hidden;
       background: transparent !important; /* Убираем серый фон */
   }

   .mission-card .card-image img {
       width: 100%;
       height: 100%;
       object-fit: cover; /* Добавляем для правильного отображения */
       border-radius: var(--border-radius-xl); /* Добавляем скругление к самому изображению */
   }

   .mission-card .card-content {
       display: block;
       flex: 1;
   }

   /* Скрываем контент у первой и четвертой карточек */
   .mission-card:nth-child(1) .card-content,
   .mission-card:nth-child(4) .card-content {
       display: none !important;
   }

   /* Убираем gap у карточек только с изображениями */
   .mission-card:nth-child(1),
   .mission-card:nth-child(4) {
       gap: 0;
   }
}

/* Token Explanation with Scaling - полная замена */
.token-explanation {
   position: relative;
   height: 724px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: linear-gradient(181.15deg, #EEF4ED 66.07%, #E7EFE4 99.1%); /* ВОЗВРАЩАЮ ИСХОДНЫЙ ГРАДИЕНТ */
   padding: 0;
   margin: 0;
}

.token-explanation .container {
   position: relative;
   width: 100%;
   max-width: 1200px; /* ВОЗВРАЩАЮ ИСХОДНОЕ ОГРАНИЧЕНИЕ */
   height: 724px;
   padding: 0;
   transform: scale(var(--global-scale));
   transform-origin: center center;
}

/* Центральное изображение - 1058x724 */
.token-visual {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 1058px;
   height: 724px;
   background-image: url('../img/token-trees.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 2;
}

/* Левый градиентный оверлей - ИСПРАВЛЕН ТОЛЬКО ГРАДИЕНТ */
.token-gradient-left {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw; /* НА ВЕСЬ ЭКРАН СЛЕВА */
   height: 100%;
   background: 
       linear-gradient(90deg, rgba(246, 251, 244, 0.9) 0%, rgba(246, 251, 244, 0.7) 60%, rgba(246, 251, 244, 0.3) 85%, transparent 100%),
       linear-gradient(180deg, #F8FDF6 0%, #D9E3DA 100%);
   z-index: 1;
}

/* Правый градиентный оверлей - ИСПРАВЛЕН ТОЛЬКО ГРАДИЕНТ */
.token-gradient-right {
   position: absolute;
   right: 0;
   top: 0;
   width: 100vw; /* НА ВЕСЬ ЭКРАН СПРАВА */
   height: 100%;
   background: 
        linear-gradient(90deg, rgba(246, 251, 244, 0.9) 0%, rgba(246, 251, 244, 0.7) 60%, rgba(246, 251, 244, 0.3) 85%, transparent 100%),
        linear-gradient(180deg, #F8FDF6 0%, #D9E3DA 100%);
   z-index: 1;
}

/* Левый текстовый блок - ВОЗВРАЩАЮ КАК БЫЛО - заползает на изображение */
.token-text {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 350px; /* ВОЗВРАЩАЮ ИСХОДНУЮ ШИРИНУ */
   z-index: 4;
   padding: 20px;
}

.token-text h2 {
   font-size: 44px;
   font-weight: 500;
   font-family: var(--font-primary);
   line-height: 1.125;
   margin-bottom: 1.5rem;
   color: var(--text-primary);
   text-align: left;
}

.token-text p {
   font-family: var(--font-body);
   font-weight: 300;
   font-size: 20px;
   line-height: 1.6;
   color: var(--text-primary);
   margin-bottom: 1.5rem;
}

/* Ажурная структура union.svg - ОСТАВЛЯЮ КАК ЕСТЬ */
.token-union-overlay {
   position: absolute;
   left: 1045px;
   top: calc(50% - 5px);
   transform: translate(-50%, -50%);
   width: 614px;
   height: 494px;
   background-image: url('../img/union.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   opacity: 0.8;
   z-index: 3;
}

.token-stats {
   position: absolute;
   right: -80px;
   top: 60px;
   z-index: 5;
   display: flex;
   flex-direction: column;
   gap: 0;
   text-align: left; /* МЕНЯЕМ НА LEFT ДЛЯ РАБОТЫ TRANSFORM */
   padding: 20px;
   width: 300px;
}

.token-stats .stat-line:first-child {
   font-family: 'DM Sans', var(--font-body);
   font-weight: 600;
   font-size: 32px;
   line-height: 1.2; /* УМЕНЬШАЕМ ДЛЯ ПЛОТНОСТИ */
   color: #D3E2C8;
   opacity: 1;
   transform: translateX(-5px);
}

.token-stats .stat-line:last-child {
   font-family: 'DM Sans', var(--font-body);
   font-weight: 600;
   font-size: 22px;
   line-height: 1.2; /* УМЕНЬШАЕМ ДЛЯ ПЛОТНОСТИ */
   color: #D3E2C8;
   opacity: 1;
   margin-top: -8px; /* ОТРИЦАТЕЛЬНЫЙ MARGIN ДЛЯ ПОДПИРАНИЯ */
}

/* Правый нижний текстовый блок - ВОЗВРАЩАЮ КАК БЫЛО */
.token-description {
   position: absolute;
   right: 0;
   bottom: 50px;
   width: 300px; /* ВОЗВРАЩАЮ ИСХОДНУЮ ШИРИНУ */
   z-index: 4;
   padding: 20px;
}

.token-description p {
   font-family: var(--font-body);
   font-weight: 300;
   font-size: 16px;
   line-height: 1.5;
   color: var(--text-primary);
}

/* Убираем старые элементы */
.token-sphere-container,
.token-sphere,
.stat-item,
.stat-value,
.stat-label {
   display: none;
}

/* Мобильная адаптация - Token Explanation */
@media (max-width: 768px) {
   .token-explanation {
       height: 100vh; /* Фиксированная высота на весь экран */
       padding: 0;
       display: flex;
       flex-direction: column;
       justify-content: space-between; /* Равномерное распределение */
       background: linear-gradient(181.15deg, #EEF4ED 66.07%, #E7EFE4 99.1%);
   }

   .token-explanation .container {
       height: 100vh; /* Полная высота */
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       justify-content: space-between; /* Равномерное распределение */
       padding: 40px 20px; /* Отступы сверху и снизу */
       transform: scale(1); /* Отключаем масштабирование на мобильных */
   }

   /* Скрываем все градиентные оверлеи и геометрию */
   .token-gradient-left,
   .token-gradient-right,
   .token-union-overlay,
   .token-stats {
       display: none;
   }

   .token-text {
       position: relative;
       left: auto;
       top: auto;
       transform: none;
       width: 100%;
       max-width: 350px;
       order: 1; /* Текст сверху */
       padding: 0;
       z-index: 4;
       flex-shrink: 0; /* Не сжимать */
   }

   .token-text h2 {
       font-size: 28px;
       line-height: 1.2;
       text-align: center;
       margin-bottom: 1rem;
   }

   .token-text p {
       font-size: 16px;
       line-height: 1.5;
       text-align: center;
       margin-bottom: 0;
   }

   .token-visual {
       position: relative;
       left: auto;
       top: auto;
       transform: none;
       width: 100%;
       max-width: 400px; /* Ограничиваем максимальную ширину */
       height: 300px; /* Фиксированная высота */
       order: 2; /* Изображение в центре */
       border-radius: 12px;
       overflow: hidden;
       z-index: 1;
       flex-shrink: 0; /* Не сжимать */
   }

   .token-description {
       position: relative;
       right: auto;
       bottom: auto;
       width: 100%;
       max-width: 350px;
       order: 3; /* Текст снизу */
       padding: 0;
       text-align: center;
       z-index: 4;
       flex-shrink: 0; /* Не сжимать */
   }

   .token-description p {
       font-size: 16px;
       line-height: 1.5;
       text-align: center;
       margin-bottom: 0;
   }
}

@media (max-width: 480px) {
   .token-explanation .container {
       padding: 30px 15px; /* Меньше отступы */
   }

   .token-text {
       max-width: 300px;
   }

   .token-text h2 {
       font-size: 24px;
       line-height: 1.1;
   }

   .token-text p {
       font-size: 14px;
   }

   .token-visual {
       height: 250px; /* Меньше высота */
   }

   .token-description {
       max-width: 300px;
   }

   .token-description p {
       font-size: 14px;
       line-height: 1.4;
   }
}

/* Token Lifecycle with Scaling - ПОЛНЫЙ БЛОК */
.token-lifecycle {
  background: url('../img/forest-background.jpg') center/cover;
  color: white;
  position: relative;
  padding: 0;
  margin: 0;
  margin-top: -80px;
  height: 1489px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.token-lifecycle::before {
  display: none;
}

.token-lifecycle .container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 160px 20px 0 20px;
  height: 100%;
  transform: scale(var(--global-scale));
  transform-origin: top center;
}

.token-lifecycle h2,
.token-lifecycle .section-subtitle {
  color: white;
  text-align: center;
  margin-bottom: 60px;
}

/* Контейнер для карточек с осью */
.lifecycle-steps {
  position: relative;
  width: 1028px;
  height: 966px;
  margin: 0 auto;
}

/* Вертикальная ось */
.lifecycle-steps::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 966px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* Карточки - прозрачная подложка без цвета */
.lifecycle-step {
  position: absolute;
  width: 466px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Первая карточка - слева, высота 292px */
.lifecycle-step:nth-child(1) {
  left: 0;
  top: 0;
  height: 292px;
}

/* Вторая карточка - справа, высота 264px, верх = низ первой */
.lifecycle-step:nth-child(2) {
  right: 0;
  top: 292px;
  height: 264px;
}

/* Третья карточка - слева, высота 264px, верх = низ второй */
.lifecycle-step:nth-child(3) {
  left: 0;
  top: 556px;
  height: 264px;
}

/* Четвертая карточка - справа, высота 264px, центр круга = центр карточки */
.lifecycle-step:nth-child(4) {
  right: 0;
  top: 834px;
  height: 264px;
}

/* Зеленые круги с белой каймой - НА ЦЕНТРАЛЬНОЙ ЛИНИИ */
.lifecycle-step::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #1a4d0a;
  border: 1px solid white;
  border-radius: 50%;
  z-index: 2;
}

/* Позиционирование кругов - на центральной оси */
.lifecycle-step:nth-child(1)::after {
  right: -57px;
  top: 138px;
}

.lifecycle-step:nth-child(2)::after {
  left: -57px;
  top: 122px;
}

.lifecycle-step:nth-child(3)::after {
  right: -57px;
  top: 134px;
}

.lifecycle-step:nth-child(4)::after {
  left: -57px;
  top: 132px;
}

/* Token Lifecycle - исправление заголовков в одну строку */

/* Заголовок и номер в одну строку */
.lifecycle-step-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  flex-wrap: nowrap !important; /* Запрещаем перенос */
}

/* Цифры в квадратных рамках */
.step-number {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0 !important; /* Не сжимаем */
}

/* ПРИНУДИТЕЛЬНО делаем заголовки inline */
.lifecycle-step-header h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: white !important;
  line-height: 1.2 !important;
  display: inline !important; /* INLINE вместо block */
  white-space: nowrap !important; /* Запрещаем перенос текста */
  flex-shrink: 0 !important; /* Не сжимаем */
}

/* Убираем все другие заголовки */
.step-content h3 {
  display: none !important;
}

/* Контент карточек */
.step-content {
  flex: 1;
}

.step-content p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* Мобильная версия - ВОССТАНОВЛЕННАЯ */
@media (max-width: 768px) {
  .token-lifecycle {
      height: auto !important;
      margin-top: 0 !important;
      padding: 40px 0 !important;
  }

  .token-lifecycle .container {
      padding: 40px 20px !important;
      transform: scale(1); /* Отключаем масштабирование на мобильных */
  }

  .lifecycle-steps {
      position: relative !important;
      width: 100% !important;
      height: auto !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      margin: 40px 0 !important;
  }

  /* Убираем ось на мобильных */
  .lifecycle-steps::before {
      display: none !important;
  }

  .lifecycle-step {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      display: flex !important;
      align-items: flex-start !important;
      gap: 16px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(10px) !important;
      border-radius: 16px !important;
      padding: 24px !important;
  }

  /* Убираем круги на мобильных */
  .lifecycle-step::after {
      display: none !important;
  }

  /* Убираем заголовки в строку на мобильных */
  .lifecycle-step-header {
      display: none !important;
  }

  .step-number {
      width: 40px !important;
      height: 40px !important;
      background: var(--primary-green) !important;
      color: white !important;
      border-radius: 4px !important; /* КВАДРАТНЫЕ на мобильных */
      border: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 600 !important;
      font-size: 18px !important;
      flex-shrink: 0 !important;
  }

  .step-content {
      flex: 1 !important;
  }

  .step-content h3 {
      color: white !important;
      font-size: 18px !important;
      margin-bottom: 12px !important;
  }

  .step-content p {
      color: rgba(255, 255, 255, 0.9) !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 8px !important;
  }
}

@media (max-width: 480px) {
  .token-lifecycle .container {
      padding: 30px 15px !important;
  }

  .lifecycle-steps {
      gap: 15px !important;
      margin: 30px 0 !important;
  }

  .lifecycle-step {
      padding: 20px !important;
  }

  .step-content h3 {
      font-size: 16px !important;
  }

  .step-content p {
      font-size: 13px !important;
  }
}

/* Comparison Table */
.comparison-table-container {
  margin: var(--spacing-xl) 0;
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.comparison-table th {
  background: var(--primary-green);
  color: white;
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
}

.comparison-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-medium);
}

.comparison-table tr:nth-child(even) {
  background: var(--gray-light);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

/* Comparison Table - мобильная версия */
@media (max-width: 768px) {
   .comparison-table-container {
       margin: var(--spacing-lg) 0;
       overflow-x: visible; /* Убираем горизонтальную прокрутку */
   }

   .comparison-table {
       font-size: 14px; /* Уменьшаем шрифт для компактности */
   }

   /* Скрываем второй столбец "Traditional Carbon Credits" */
   .comparison-table th:nth-child(2),
   .comparison-table td:nth-child(2) {
       display: none;
   }

   .comparison-table th,
   .comparison-table td {
       padding: var(--spacing-sm); /* Уменьшаем отступы */
   }

   .comparison-table th {
       font-size: 14px;
       font-weight: 600;
   }

   .comparison-table td {
       font-size: 13px;
       line-height: 1.4;
   }
}

@media (max-width: 480px) {
   .comparison-table {
       font-size: 13px;
   }

   .comparison-table th,
   .comparison-table td {
       padding: 8px; /* Еще меньше отступы */
   }

   .comparison-table th {
       font-size: 13px;
   }

   .comparison-table td {
       font-size: 12px;
   }
}

/* External Verification with Scaling */
.external-verification {
  background: var(--gray-light);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.verification-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  transform: scale(var(--global-scale));
  transform-origin: center center;
}

.verification-image {
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.verification-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.verification-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.verification-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.step-icon {
  width: 32px;
  height: 32px;
  background: var(--primary-green);
  color: white;
  border-radius: 4px; /* Было 50%, стало 4px для квадратной рамки с закругленными углами */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-description h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .verification-content {
      transform: scale(1); /* Отключаем масштабирование на мобильных */
  }
  
  .step-icon {
      width: 32px;
      height: 32px;
      background: var(--primary-green);
      color: white;
      border-radius: 4px; /* Квадратная рамка с закругленными углами */
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
  }
}

/* Actor Roles with Scaling - ИСПРАВЛЕННАЯ ВЕРСИЯ */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  transform: scale(var(--global-scale));
  transform-origin: top center;
}

.role-card {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  text-align: left; /* Изменено с center на left */
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.role-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Фоны карточек как в How CarbonCore Works */
.role-card:nth-child(1) { background: #F7F9F6; }
.role-card:nth-child(2) { background: #EEF4ED; }
.role-card:nth-child(3) { background: #F0F7E5; }
.role-card:nth-child(4) { background: #E1FAD1; }

/* Квадратные прозрачные фреймы для иконок - В ЛЕВОМ ВЕРХНЕМ УГЛУ */
.role-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--spacing-md) 0; /* Убираем auto для центрирования */
  flex-shrink: 0;
  align-self: flex-start; /* Прижимаем к левому краю */
}

.role-icon img {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

/* Заголовки карточек - ЗЕЛЕНЫЕ как в How CarbonCore Works */
.role-card h3 {
  color: #1E450A; /* Зеленый цвет как в How CarbonCore Works */
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  text-align: left; /* Выравнивание по левому краю */
}

.role-details {
  text-align: left;
  flex: 1;
}

.role-details h4 {
  margin: var(--spacing-md) 0 var(--spacing-sm);
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
}

.role-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.role-details li {
  padding: var(--spacing-xs) 0;
  position: relative;
  padding-left: var(--spacing-md);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-color);
}

.role-details li::before {
  content: '•';
  color: var(--primary-green);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Мобильная версия */
@media (max-width: 1024px) {
  .roles-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .roles-grid {
      grid-template-columns: 1fr;
      transform: scale(1); /* Отключаем масштабирование на мобильных */
  }

  .role-card {
      min-height: auto;
  }

  .role-card h3 {
      font-size: 16px;
  }

  .role-details h4 {
      font-size: 15px;
  }

  .role-details li {
      font-size: 13px;
  }
}

@media (max-width: 480px) {
  .roles-grid {
      gap: var(--spacing-md);
  }

  .role-card {
      padding: var(--spacing-md);
  }

  .role-card h3 {
      font-size: 15px;
  }

  .role-details h4 {
      font-size: 14px;
  }

  .role-details li {
      font-size: 12px;
  }
}

/* CTA Section */
.cta-section {
  background: var(--gray-light);
  text-align: center;
}

/* Footer */
.footer {
  background-color: var(--gray-light);
  padding: var(--spacing-xxl) 0 var(--spacing-md);
  margin-top: var(--spacing-xxl);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.footer-logo img {
  height: 40px;
}

.footer-logo p {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0;
  color: var(--text-color);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.footer-links-column h4 {
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.footer-links-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
}

.footer-links-column a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links-column a:hover {
  color: var(--primary-green);
}

.footer-contact h4 {
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.footer-contact p {
  color: var(--text-light);
  margin-bottom: 0;
}

.footer-bottom {
 border-top: 1px solid var(--gray-medium);
 padding-top: var(--spacing-md);
 text-align: center;
 color: var(--text-light);
}

/* Mobile Menu Styles */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: white;
  transition: right 0.3s ease;
  z-index: 1001;
  padding: 20px;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin-bottom: 15px;
}

.mobile-menu a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-light);
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--primary-green);
}

.mobile-connect-wallet {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-light);
}

.mobile-connect-wallet .connect-wallet-btn {
  width: 100%;
  justify-content: center;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--text-color);
  margin: 3px 0;
  transition: 0.3s;
}

/* Responsive Design */
@media (max-width: 1024px) {
 .hero-content {
     grid-template-columns: 1fr;
     gap: 40px;
     text-align: center;
 }

 .hero-text {
     padding-left: 0;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .sphere-container {
     order: -1;
     width: 350px;
     height: 350px;
 }

 .forest-sphere {
     width: 300px;
     height: 300px;
 }

 .mission-cards {
     grid-template-columns: 1fr;
 }

 .mission-title {
     font-size: 48px;
     line-height: 54px;
     text-align: center;
 }

 .token-explanation {
     grid-template-columns: 1fr;
     gap: var(--spacing-lg);
     text-align: center;
 }

 .token-text h2 {
     text-align: center;
 }

 .lifecycle-steps {
     grid-template-columns: 1fr;
 }

 .verification-content {
     grid-template-columns: 1fr;
 }

 .market-dynamics {
     grid-template-columns: 1fr;
 }

 .process-steps {
     grid-template-columns: repeat(2, 1fr);
 }

 .verification-steps {
     grid-template-columns: 1fr;
 }

 .determinants-grid {
     grid-template-columns: 1fr;
 }

 .feature-cards-grid {
     grid-template-columns: 1fr;
 }

 h1 {
     font-size: 48px;
     line-height: 54px;
 }

 h2 {
     font-size: 36px;
     line-height: 40px;
 }
}

@media (max-width: 768px) {
  body {
      padding-top: 70px; /* Скорректированный отступ для мобильного хедера */
  }

  .mobile-menu-toggle {
      display: flex;
  }
  
  .header-content nav {
      display: none;
  }

  .hero-3d {
      height: 500px; /* Меньшая высота для мобильных */
      padding: 0;
  }

 .sphere-container {
     width: 280px;
     height: 280px;
 }

 .forest-sphere {
     width: 250px;
     height: 250px;
 }

 .token-sphere {
     width: 200px;
     height: 200px;
 }

 .feature-cards-grid {
     grid-template-columns: 1fr;
 }

 .process-steps {
     grid-template-columns: 1fr;
 }

 .roles-grid {
     grid-template-columns: 1fr;
 }

 .comparison-table-container {
     font-size: 14px;
 }

 .footer-content {
     grid-template-columns: 1fr;
     gap: var(--spacing-lg);
     text-align: center;
 }

 .footer-logo {
     align-items: center;
 }

 .footer-links {
     grid-template-columns: 1fr 1fr;
     gap: var(--spacing-lg);
 }

 h1 {
     font-size: 36px;
     line-height: 42px;
 }

 h2 {
     font-size: 28px;
     line-height: 32px;
 }

 h3 {
     font-size: 20px;
     line-height: 28px;
 }

 body {
     font-size: 18px;
     line-height: 28px;
 }

 .container {
     padding: 0 var(--spacing-md);
 }
}

@media (max-width: 480px) {
  .hero-3d {
      height: 400px; /* Еще меньше для очень маленьких экранов */
  }

 .sphere-container {
     width: 240px;
     height: 240px;
 }

 .forest-sphere {
     width: 200px;
     height: 200px;
 }

 .token-sphere {
     width: 180px;
     height: 180px;
 }

 .footer-links {
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
 }

 h1 {
     font-size: 28px;
     line-height: 34px;
 }

 h2 {
     font-size: 24px;
     line-height: 28px;
 }

 .mission-title {
     font-size: 32px;
     line-height: 38px;
 }

 .cta-button {
     padding: 12px 24px;
     font-size: 14px;
 }

 .cta-button.large {
     padding: 16px 32px;
     font-size: 16px;
 }
}

/* ========================================
  УНИВЕРСАЛЬНЫЕ МОБИЛЬНЫЕ ЗАГОЛОВКИ И ТЕКСТ
  ======================================== */

/* Добавьте это в файл territory-details-mvp.css */

/* Исправление для кнопки в заголовке - зеленый цвет */
.cta-button-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #4CAF50 !important; /* ЗЕЛЕНЫЙ цвет как у других CTA кнопок */
  color: white !important;
  border: none;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-button-header:hover {
  background: #45a049 !important; /* ТЕМНО-ЗЕЛЕНЫЙ при наведении */
  transform: translateY(-1px);
}

/* Мобильная версия кнопки в меню */
#mobileBuyCreditsBtn {
  background: #4CAF50 !important;
  color: white !important;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

#mobileBuyCreditsBtn:hover {
  background: #45a049 !important;
}

/* Универсальные стили для всех заголовков секций в мобильной версии */
@media (max-width: 768px) {
   /* Унифицированные заголовки секций - ВСЕ ОДИНАКОВЫЕ */
   h2,
   .hero-title,
   .mission-title,
   .content-section h2,
   .token-explanation h2,
   .token-text h2 {
       font-family: var(--font-primary) !important;
       font-weight: 500 !important;
       font-size: 32px !important;
       line-height: 36px !important;
       color: var(--text-primary) !important;
       text-align: center !important;
       margin-top: 40px !important; /* Единый отступ сверху для ВСЕХ */
       margin-bottom: 16px !important;
   }

   /* ИСКЛЮЧЕНИЕ: Token Lifecycle секция - белый текст на темном фоне */
   .token-lifecycle h2,
   .token-lifecycle .section-subtitle {
       color: white !important; /* Белый цвет для темного фона */
   }

   /* Убираем padding-top у hero-3d, так как отступ теперь у заголовка */
   .hero-3d {
       padding-top: 0 !important;
       padding-bottom: 40px !important;
   }

   /* Все остальные секции имеют единый отступ */
   .content-section,
   .mission-section,
   .token-explanation {
       padding-top: 40px !important;
       padding-bottom: 40px !important;
   }

   /* Подзаголовки тоже унифицируем */
   .hero-subtitle,
   .section-subtitle,
   .token-text p {
       font-family: var(--font-body) !important;
       font-weight: 300 !important;
       font-size: 16px !important;
       line-height: 24px !important;
       color: var(--text-primary) !important;
       text-align: center !important;
       margin-bottom: 16px !important;
   }

   /* ИСКЛЮЧЕНИЕ: Token Lifecycle подзаголовок - белый текст */
   .token-lifecycle .section-subtitle {
       color: white !important;
   }

   /* УНИФИЦИРУЕМ ОСНОВНЫЕ АБЗАЦЫ */
   p,
   .content-section p,
   .mission-section p,
   .feature-card-large p,
   .process-step-content p,
   .mission-card .card-content p {
       font-family: var(--font-body) !important;
       font-weight: 300 !important;
       font-size: 16px !important;
       line-height: 24px !important;
       color: var(--text-color) !important;
       text-align: left !important;
   }

   /* ИСКЛЮЧЕНИЯ для абзацев, которые должны остаться белыми */
   .token-lifecycle p,
   .token-lifecycle .step-content p {
       color: rgba(255, 255, 255, 0.9) !important;
   }
}

@media (max-width: 480px) {
   /* Для очень маленьких экранов немного уменьшаем */
   h2,
   .hero-title,
   .mission-title,
   .content-section h2,
   .token-explanation h2,
   .token-text h2 {
       font-size: 28px !important;
       line-height: 32px !important;
       margin-top: 30px !important;
   }

   /* ИСКЛЮЧЕНИЕ: Token Lifecycle остается белым */
   .token-lifecycle h2,
   .token-lifecycle .section-subtitle {
       color: white !important;
   }

   .hero-3d {
       padding-top: 0 !important;
       padding-bottom: 30px !important;
   }

   .content-section,
   .mission-section,
   .token-explanation {
       padding-top: 30px !important;
       padding-bottom: 30px !important;
   }

   .hero-subtitle,
   .section-subtitle,
   .token-text p {
       font-size: 14px !important;
       line-height: 20px !important;
   }

   /* ИСКЛЮЧЕНИЕ: Token Lifecycle подзаголовок остается белым */
   .token-lifecycle .section-subtitle {
       color: white !important;
   }

   /* Основные абзацы для маленьких экранов */
   p,
   .content-section p,
   .mission-section p,
   .feature-card-large p,
   .process-step-content p,
   .mission-card .card-content p {
       font-size: 14px !important;
       line-height: 20px !important;
   }

   /* ИСКЛЮЧЕНИЯ для белых абзацев */
   .token-lifecycle p,
   .token-lifecycle .step-content p {
       color: rgba(255, 255, 255, 0.9) !important;
   }
}

/* ========================================
  УНИФИЦИРОВАННЫЕ МОБИЛЬНЫЕ ШРИФТЫ
  ======================================== */

@media (max-width: 768px) {
   /* СТАНДАРТ 1: ЗАГОЛОВКИ - уже определен в универсальных стилях */
   /* h2, .hero-title, .mission-title, etc. = 32px */

   /* СТАНДАРТ 2: ОБЫЧНЫЙ ТЕКСТ - везде одинаковый */
   p,
   .content-section p,
   .mission-section p,
   .feature-card-large p,
   .process-step-content p,
   .mission-card .card-content p,
   .role-details li,
   .step-content p,
   .lifecycle-step p,
   .verification-step p,
   .determinant p,
   .feature-content p,
   .market-content p,
   .market-header p,
   .market-feature p,
   .token-text p,
   .token-description p,
   .hero-subtitle,
   .section-subtitle,
   .model-content p,
   .role-details h4,
   .step-description h4,
   .feature-content h4,
   .determinant h4,
   .step-content h3,
   .role-card h3,
   .process-step-content h3 {
       font-family: var(--font-body) !important;
       font-size: 16px !important;
       line-height: 24px !important;
       /* Цвет, weight и другие свойства остаются как есть */
   }

   /* СТАНДАРТ 3: УМЕНЬШЕННЫЙ ТЕКСТ - только для таблиц */
   .comparison-table,
   .comparison-table th,
   .comparison-table td,
   .fee-table,
   .fee-table th,
   .fee-table td {
       font-family: var(--font-body) !important;
       font-size: 13px !important;
       line-height: 18px !important;
       /* Цвет, weight и другие свойства остаются как есть */
   }

   /* Исключения для элементов, которые должны быть меньше обычного текста */
   .token-stats .stat-line,
   .process-step-number,
   .step-number,
   .feature-number,
   .step-icon {
       /* Эти элементы сохраняют свои размеры */
   }
}

@media (max-width: 480px) {
   /* СТАНДАРТ 1: ЗАГОЛОВКИ - уже определен в универсальных стилях */
   /* h2, .hero-title, .mission-title, etc. = 28px */

   /* СТАНДАРТ 2: ОБЫЧНЫЙ ТЕКСТ - везде одинаковый */
   p,
   .content-section p,
   .mission-section p,
   .feature-card-large p,
   .process-step-content p,
   .mission-card .card-content p,
   .role-details li,
   .step-content p,
   .lifecycle-step p,
   .verification-step p,
   .determinant p,
   .feature-content p,
   .market-content p,
   .market-header p,
   .market-feature p,
   .token-text p,
   .token-description p,
   .hero-subtitle,
   .section-subtitle,
   .model-content p,
   .role-details h4,
   .step-description h4,
   .feature-content h4,
   .determinant h4,
   .step-content h3,
   .role-card h3,
   .process-step-content h3 {
       font-family: var(--font-body) !important;
       font-size: 14px !important;
       line-height: 20px !important;
       /* Цвет, weight и другие свойства остаются как есть */
   }

   /* СТАНДАРТ 3: УМЕНЬШЕННЫЙ ТЕКСТ - только для таблиц */
   .comparison-table,
   .comparison-table th,
   .comparison-table td,
   .fee-table,
   .fee-table th,
   .fee-table td {
       font-family: var(--font-body) !important;
       font-size: 12px !important;
       line-height: 16px !important;
       /* Цвет, weight и другие свойства остаются как есть */
   }
}