/* ===== CUSTOM PROPERTIES ===== */
:root {
  --primary-color: #ff7b00;
  --primary-light: #ffaa33;
  --primary-dark: #e65c00;
  --secondary-color: #ffbb00;
  --accent-color: #00c8ff;
  --success-color: #00ff88;
  --error-color: #ff3366;
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --dark-surface-2: #2a2a2a;
  --light-bg: #f4f4f4;
  --light-surface: #ffffff;
  --dark-text: #333333;
  --light-text: #ffffff;
  --gray-text: #888888;
  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --font-family: 'Poppins', sans-serif;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --z-index-nav: 100;
  --z-index-modal: 1000;
  --z-index-cursor: 9999;
}

/* ===== CUSTOM PROPERTIES FOR LIGHT/DARK MODE ===== */
@property --color-1 {
  syntax: "";
  inherits: false;
  initial-value: #ff7b00;
}

@property --color-2 {
  syntax: "";
  inherits: false;
  initial-value: #ffbb00;
}

@property --gradient-angle {
  syntax: "";
  initial-value: 0deg;
  inherits: false;
}

/* ===== RESET & BASE STYLES ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--dark-bg);
  color: var(--light-text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img, video {
  max-width: 100%;
  height: auto;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 6rem 0;
  position: relative;
  view-transition-name: section-transition;
}

.section.dark-section {
  background-color: var(--dark-surface);
  color: var(--light-text);
}

/* ===== CUSTOM CURSOR ===== */
.custom-cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: var(--z-index-cursor);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
  opacity: 0;
}

.custom-cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: calc(var(--z-index-cursor) + 1);
  transition: transform 0.1s;
  opacity: 0;
}

body:hover .custom-cursor,
body:hover .custom-cursor-dot {
  opacity: 1;
}

/* ===== STARS BACKGROUND ===== */
.stars-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1744px 122px #fff, 134px 1321px #fff, 92px 859px #fff, 235px 1045px #fff, 366px 912px #fff, 491px 942px #fff, 14px 1831px #fff, 582px 476px #fff, 588px 1230px #fff, 1520px 1343px #fff, 1671px 203px #fff, 550px 341px #fff, 1491px 549px #fff, 558px 161px #fff, 896px 1823px #fff, 999px 1463px #fff, 1557px 636px #fff, 1754px 1307px #fff, 1682px 1494px #fff, 703px 1707px #fff, 1945px 1847px #fff, 1151px 1320px #fff, 980px 144px #fff, 478px 948px #fff, 109px 1228px #fff, 38px 1987px #fff, 468px 901px #fff, 1760px 1546px #fff, 1675px 818px #fff, 1308px 1512px #fff, 1121px 1186px #fff, 92px 1470px #fff, 1396px 1359px #fff, 1408px 391px #fff, 1767px 1994px #fff, 1234px 1505px #fff, 1223px 1641px #fff, 1149px 1377px #fff, 572px 1139px #fff, 1763px 1562px #fff, 1197px 1196px #fff, 1078px 1710px #fff, 251px 1446px #fff, 665px 698px #fff, 1766px 1521px #fff, 1853px 1624px #fff, 1736px 1780px #fff, 460px 1159px #fff, 1555px 1123px #fff, 1506px 1741px #fff, 1540px 649px #fff, 1208px 1763px #fff, 917px 1591px #fff, 1865px 1125px #fff, 1180px 1256px #fff, 1273px 1155px #fff, 1464px 311px #fff, 1944px 1878px #fff, 340px 1025px #fff, 467px 1825px #fff, 1034px 1441px #fff, 159px 1838px #fff, 1074px 1335px #fff;
  animation: animateStars 50s linear infinite;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1448px 173px #fff, 1468px 711px #fff, 1010px 1340px #fff, 1733px 353px #fff, 1518px 800px #fff, 1507px 1939px #fff, 1186px 1791px #fff, 933px 1578px #fff, 1428px 729px #fff, 1285px 1053px #fff, 1172px 331px #fff, 1367px 1856px #fff, 1338px 128px #fff, 1419px 1277px #fff, 1369px 664px #fff, 1125px 360px #fff, 1036px 825px #fff, 1936px 1453px #fff, 1903px 35px #fff, 1039px 1082px #fff, 1051px 230px #fff, 1373px 852px #fff, 1502px 28px #fff, 1854px 1044px #fff, 1687px 1071px #fff, 1157px 1896px #fff, 1479px 1360px #fff, 900px 1773px #fff, 1559px 1099px #fff, 1285px 1902px #fff, 958px 1100px #fff, 1933px 1380px #fff, 1306px 1945px #fff, 1481px 1593px #fff, 1330px 1000px #fff, 1065px 1071px #fff, 1132px 1907px #fff, 1879px 1895px #fff, 238px 1625px #fff, 1070px 1197px #fff, 1610px 117px #fff, 1234px 1278px #fff, 1139px 1401px #fff, 622px 482px #fff, 1179px 1912px #fff, 1256px 1431px #fff, 1202px 1801px #fff, 1656px 442px #fff, 1350px 144px #fff;
  animation: animateStars 100s linear infinite;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 387px 1878px #fff, 760px 1564px #fff, 1487px 999px #fff, 948px 1828px #fff, 1977px 1001px #fff, 1284px 1963px #fff, 656px 284px #fff, 1268px 1635px #fff, 1820px 598px #fff, 642px 1900px #fff, 296px 57px #fff, 921px 1620px #fff, 476px 1858px #fff, 1290px 1664px #fff, 1426px 1469px #fff, 839px 607px #fff, 167px 436px #fff, 399px 1893px #fff, 551px 1779px #fff, 1468px 1458px #fff, 1628px 1829px #fff, 1562px 67px #fff, 1533px 1900px #fff, 1705px 1912px #fff, 1323px 1696px #fff, 1391px 1015px #fff, 841px 1882px #fff, 1444px 1824px #fff, 1439px 1615px #fff, 879px 1129px #fff, 1473px 1133px #fff, 1336px 1197px #fff, 1324px 684px #fff, 23px 1576px #fff, 1370px 1491px #fff, 1686px 1087px #fff, 1304px 1007px #fff, 1121px 1085px #fff, 270px 1764px #fff, 1590px 141px #fff, 1427px 1687px #fff, 1848px 1003px #fff, 1603px 1780px #fff, 774px 654px #fff, 1064px 1648px #fff, 1240px 1788px #fff, 1186px 902px #fff, 1974px 762px #fff, 1590px 1756px #fff, 194px 538px #fff, 1193px 484px #fff;
  animation: animateStars 150s linear infinite;
}

@keyframes animateStars {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* ===== AI ASSISTANT ===== */
.ai-assistant-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-index-modal);
}

.ai-assistant-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 123, 0, 0.3);
  transition: transform var(--transition-bounce);
}

.ai-assistant-toggle:hover {
  transform: scale(1.1);
}

.ai-assistant-toggle i {
  color: var(--light-text);
  font-size: 1.5rem;
}

.ai-assistant-chat {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 350px;
  height: 450px;
  background-color: var(--light-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform var(--transition-bounce);
}

.ai-assistant-chat {
  background-color: var(--dark-surface);
}

.ai-assistant-container.active .ai-assistant-chat {
  transform: scale(1);
}

.chat-header {
  padding: 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--light-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

.close-chat {
  background: none;
  border: none;
  color: var(--light-text);
  cursor: pointer;
  font-size: 1.2rem;
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message {
  max-width: 80%;
  padding: 0.8rem 1rem;
  border-radius: var(--border-radius-md);
  animation: message-fade-in 0.3s ease-out;
}

.message.bot {
  align-self: flex-start;
  background-color: #f0f0f0;
  color: var(--dark-text);
  border-bottom-left-radius: 0;
}

.message.bot {
  background-color: var(--dark-surface-2);
  color: var(--light-text);
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--light-text);
  border-bottom-right-radius: 0;
}

@keyframes message-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-input {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-input {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: var(--border-radius-md);
  background-color: #f0f0f0;
  transition: background-color var(--transition-normal);
}

.chat-input input {
  background-color: var(--dark-surface-2);
  color: var(--light-text);
}

.chat-input input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-light);
}

.chat-input button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--light-text);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.chat-input button:hover {
  transform: scale(1.1);
}

/* ===== NAVIGATION ===== */
.immersive-header {
  position: relative;
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden;
}

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: var(--z-index-nav);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(18, 18, 18, 0.8);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: padding var(--transition-normal), background-color var(--transition-normal);
}

.glass-nav.scrolled {
  padding: 0.8rem 2rem;
  background-color: rgba(18, 18, 18, 0.95);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--light-text);
  font-size: 1.5rem;
}

.logo-text {
  --_color-1-from: #ff7b00;
  --_color-1-to: #ffbb00;
  --_color-2-from: #ff5500;
  --_color-2-to: #ff9900;
  animation: color-change 3s linear infinite alternate;
  background: linear-gradient(to right, var(--color-1), var(--color-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 1.5rem;
  font-weight: 700;
}

@keyframes color-change {
  to {
    --color-1: var(--_color-1-to);
    --color-2: var(--_color-2-to);
  }
}

.logo-text .accent {
  color: var(--secondary-color);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--light-text);
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-normal);
  view-transition-name: nav-link;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  transition: width var(--transition-normal);
}

.nav-link:hover {
  color: var(--primary-light);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.mobile-menu-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--light-text);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* ===== HERO SECTION ===== */
.hero {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 0 2rem;
  position: relative;
}

.hero-content {
  grid-column: 2 / span 5;
  z-index: 1;
  transform: translateY(0);
  transition: transform 1s linear(
    0, 0.009, 0.035 2.1%, 0.141,
    0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
    1.017, 1.077, 1.121, 1.149 24.3%,
    1.159, 1.163, 1.161, 1.154 29.9%,
    1.129 32.8%, 1.051 39.6%, 1.017 43.1%,
    0.991, 0.977 51%, 0.974 53.8%,
    0.975 57.1%, 0.997 69.8%, 1.003 76.9%,
    1.004 83.8%, 1
  );
}

.hero-visual {
  grid-column: 7 / span 5;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.glitch-text {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
  color: var(--light-text);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 #00ffff;
  animation: glitch-animation 2s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: 2px 0 #ff00ff;
  animation: glitch-animation 3s infinite linear alternate-reverse;
}

@keyframes glitch-animation {
  0% {
    clip-path: inset(0% 0% 98% 0%);
  }
  5% {
    clip-path: inset(15% 0% 49% 0%);
  }
  10% {
    clip-path: inset(25% 0% 49% 0%);
  }
  15% {
    clip-path: inset(75% 0% 9% 0%);
  }
  20% {
    clip-path: inset(48% 0% 42% 0%);
  }
  25% {
    clip-path: inset(23% 0% 68% 0%);
  }
  30% {
    clip-path: inset(63% 0% 17% 0%);
  }
  35% {
    clip-path: inset(100% 0% 1% 0%);
  }
  40% {
    clip-path: inset(76% 0% 13% 0%);
  }
  45% {
    clip-path: inset(46% 0% 42% 0%);
  }
  50% {
    clip-path: inset(67% 0% 11% 0%);
  }
  55% {
    clip-path: inset(14% 0% 79% 0%);
  }
  60% {
    clip-path: inset(1% 0% 99% 0%);
  }
  65% {
    clip-path: inset(96% 0% 3% 0%);
  }
  70% {
    clip-path: inset(41% 0% 53% 0%);
  }
  75% {
    clip-path: inset(24% 0% 72% 0%);
  }
  80% {
    clip-path: inset(80% 0% 5% 0%);
  }
  85% {
    clip-path: inset(72% 0% 27% 0%);
  }
  90% {
    clip-path: inset(60% 0% 19% 0%);
  }
  95% {
    clip-path: inset(58% 0% 39% 0%);
  }
  100% {
    clip-path: inset(2% 0% 96% 0%);
  }
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.8);
}

.live-price-tracker {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.price-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.coin-address-display {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-md);
  padding: 1rem;
  margin: 0.5rem 0;
  overflow-wrap: break-word;
}

#static-coin-address {
  font-family: monospace;
  font-size: 1rem;
  color: var(--light-text);
}

.copy-icon {
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.copy-icon:hover {
  transform: scale(1.2);
  color: var(--primary-light);
}

#copy-message {
  font-size: 0.9rem;
  height: 1.2rem;
  color: var(--success-color);
  text-align: right;
  padding: 0 0.5rem;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.primary-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--light-text);
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 123, 0, 0.3);
}

.secondary-btn {
  padding: 0.8rem 1.5rem;
  background: transparent;
  color: var(--light-text);
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.secondary-btn:hover {
  background-color: var(--primary-color);
  color: var(--light-text);
}

.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 123, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 123, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 123, 0, 0);
  }
}

.hero-stats {
  display: flex;
  gap: 2rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.interactive-3d-model {
  width: 400px;
  height: 400px;
  position: relative;
}

.particle-network {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ===== ABOUT SECTION ===== */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--gray-text);
}

.about-content {
  display: block;
  margin-bottom: 3rem;
}

.highlight-text {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--primary-light);
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.feature-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-md);
  padding: 2.5rem 2rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-card {
  background-color: var(--dark-surface-2);
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
}

.feature-icon i {
  font-size: 2rem;
  color: var(--light-text);
}

.feature-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--primary-light);
}

.feature-card p {
  font-size: 1.1rem;
}

/* ===== TOKENOMICS SECTION ===== */
.tokenomics-content {
  margin-bottom: 3rem;
}

.tokenomics-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

.tokenomics-card {
  background-color: var(--light-surface);
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-normal);
  height: 100%;
}

.tokenomics-card:hover {
  transform: translateY(-5px);
}

.tokenomics-card {
  background-color: var(--dark-surface-2);
}

.tokenomics-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.token-value {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.token-label {
  font-size: 1rem;
  color: var(--gray-text);
}

.distribution-list, .fee-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.distribution-list li, .fee-distribution li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.percent, .fee-percent {
  font-weight: 700;
  color: var(--primary-color);
}

/* ===== ROADMAP SECTION ===== */
.interactive-roadmap {
  max-width: 900px;
  margin: 0 auto;
}

.roadmap-timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  transform: translateX(-50%);
}

.roadmap-item {
  position: relative;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
}

.roadmap-item:last-child {
  margin-bottom: 0;
}

.roadmap-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.marker-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-color);
}

.marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 123, 0, 0.3);
  animation: pulse 2s infinite;
}

.roadmap-item:nth-child(odd) .roadmap-content {
  margin-right: 50%;
  padding-right: 3rem;
  text-align: right;
}

.roadmap-item:nth-child(even) .roadmap-content {
  margin-left: 50%;
  padding-left: 3rem;
}

.roadmap-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-light);
}

.roadmap-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-complete {
  position: relative;
  padding-left: 1.5rem;
}

.roadmap-item:nth-child(odd) .task-complete {
  padding-left: 0;
  padding-right: 1.5rem;
}

.task-complete::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--success-color);
  position: absolute;
}

.roadmap-item:nth-child(odd) .task-complete::before {
  right: 0;
}

.roadmap-item:nth-child(even) .task-complete::before {
  left: 0;
}

.task-in-progress {
  position: relative;
  padding-left: 1.5rem;
  color: var(--primary-color);
}

.roadmap-item:nth-child(odd) .task-in-progress {
  padding-left: 0;
  padding-right: 1.5rem;
}

.task-in-progress::before {
  content: '\f110';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--primary-color);
  position: absolute;
  animation: spin 2s linear infinite;
}

.roadmap-item:nth-child(odd) .task-in-progress::before {
  right: 0;
}

.roadmap-item:nth-child(even) .task-in-progress::before {
  left: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== COMMUNITY SECTION ===== */
.community-content {
  display: block;
  margin-bottom: 4rem;
}

.social-platforms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.social-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--light-surface);
  border-radius: var(--border-radius-md);
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.social-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.social-card {
  background-color: var(--dark-surface-2);
}

.social-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.social-card[data-platform="twitter"] .social-icon {
  background-color: #1DA1F2;
  color: white;
}

.social-card[data-platform="telegram"] .social-icon {
  background-color: #0088cc;
  color: white;
}

.social-info {
  flex: 1;
}

.social-info h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.follower-count {
  font-size: 1.1rem;
  color: var(--gray-text);
}

.social-arrow {
  color: var(--gray-text);
  transition: transform var(--transition-fast);
}

.social-card:hover .social-arrow {
  transform: translateX(5px);
  color: var(--primary-color);
}

.newsletter-section {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: var(--border-radius-lg);
  padding: 3rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.newsletter-content {
  flex: 1;
  min-width: 300px;
}

.newsletter-content h3 {
  font-size: 1.8rem;
  color: var(--light-text);
  margin-bottom: 0.5rem;
}

.newsletter-content p {
  color: rgba(255, 255, 255, 0.8);
}

.newsletter-form {
  flex: 1;
  min-width: 300px;
}

.form-group {
  display: flex;
  gap: 0.5rem;
}

.form-group input {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: var(--border-radius-md);
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--light-text);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-group input:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
}

.submit-btn {
  padding: 1rem 2rem;
  background-color: var(--light-text);
  color: var(--primary-color);
  border: none;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.submit-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.form-message {
  margin-top: 1rem;
  color: var(--light-text);
  font-size: 0.9rem;
}

/* ===== FOOTER ===== */
.site-footer {
  background-color: var(--dark-surface);
  color: var(--light-text);
  padding: 4rem 0 2rem;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-logo {
  max-width: 300px;
}

.footer-logo .logo {
  margin-bottom: 1rem;
}

.footer-logo p {
  color: var(--gray-text);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.footer-column a {
  color: var(--gray-text);
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  color: var(--gray-text);
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.social-icons a:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

.social-icons i {
  color: var(--light-text);
  font-size: 1.2rem;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1200px) {
  .hero-content {
    grid-column: 2 / span 6;
  }
  .hero-visual {
    grid-column: 8 / span 4;
  }
  .glitch-text {
    font-size: 3.5rem;
  }
}

@media (max-width: 992px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 3rem;
  }
  .hero-content {
    grid-column: 1 / -1;
    text-align: center;
  }
  .hero-visual {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hero-stats {
    justify-content: center;
  }
  .tokenomics-details {
    grid-template-columns: 1fr;
  }
  .roadmap-item:nth-child(odd) .roadmap-content,
  .roadmap-item:nth-child(even) .roadmap-content {
    margin: 0;
    padding: 0 0 0 3rem;
    text-align: left;
  }
  .roadmap-marker {
    left: 0;
    transform: none;
  }
  .timeline-track {
    left: 10px;
    transform: none;
  }
  .roadmap-item:nth-child(odd) .task-complete,
  .roadmap-item:nth-child(even) .task-complete,
  .roadmap-item:nth-child(odd) .task-in-progress,
  .roadmap-item:nth-child(even) .task-in-progress {
    padding-left: 1.5rem;
    padding-right: 0;
  }
  .roadmap-item:nth-child(odd) .task-complete::before,
  .roadmap-item:nth-child(even) .task-complete::before,
  .roadmap-item:nth-child(odd) .task-in-progress::before,
  .roadmap-item:nth-child(even) .task-in-progress::before {
    left: 0;
    right: auto;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .glass-nav {
    padding: 1rem;
  }
  .glass-nav.scrolled {
    padding: 0.8rem 1rem;
  }
  .hero-cta {
    flex-direction: column;
  }
  .glitch-text {
    font-size: 3rem;
  }
  .section-title {
    font-size: 2rem;
  }
  .feature-cards {
    grid-template-columns: 1fr;
  }
  .social-platforms {
    grid-template-columns: 1fr;
  }
  .footer-content {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .hero-content {
    padding: 0 1rem;
  }
  .glitch-text {
    font-size: 2.5rem;
  }
  .hero-subtitle {
    font-size: 1.2rem;
  }
  .hero-stats {
    flex-direction: column;
    gap: 1rem;
  }
  .section {
    padding: 4rem 0;
  }
  .section-header {
    margin-bottom: 2rem;
  }
  .newsletter-section {
    padding: 2rem 1.5rem;
  }
  .form-group {
    flex-direction: column;
  }
  .burn-stats {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(0) translateX(20px);
  }
  75% {
    transform: translateY(20px) translateX(10px);
  }
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@view-transition {
  navigation: auto;
}