/* General Body & Typography */
:root {
  /* Color Palette */
  --primary-color: #007bff; /* Bright Blue - Example for main actions/highlights */
  --secondary-color: #6c757d; /* Muted Grey - Example for secondary actions */
  --accent-color-1: #FFD700; /* Gold/Yellow - For highlights, maybe NFT related */
  --accent-color-2: #17a2b8; /* Teal - For specific elements */
  --background-dark: #1a1a2e; /* Deep Dark Blue/Purple - Main background */
  --background-light: #2c2c47; /* Slightly lighter for sections */
  --text-light: #ffffff; /* White text on dark backgrounds */
  --text-muted: #cccccc; /* Lighter grey for less important text */
  --border-color: rgba(255, 255, 255, 0.1); /* Subtle borders */

  /* Fonts */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-secondary);
  color: var(--text-light);
  background-color: var(--background-dark);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* **NEU: Globale Anpassung für den Inhalt unter dem Header** */
.content-wrapper {
  padding-top: 100px; /* Verschiebt den gesamten Inhalt nach unten */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* Default padding for desktop */
}

/* Sections & Headings */
.section-padding {
  padding: 80px 0; /* Default padding for desktop */
}
/* **KORREKTUR: Erhöhtes Padding, um Header-Überlappung zu verhindern** */
#home.section-padding, .section-padding {
  padding-top: 130px; /* Ein sicherer Wert, der die Headerhöhe + Abstand abdeckt */
  padding-bottom: 80px;
}

.section-title {
  font-family: var(--font-primary);
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: var(--accent-color-1); /* Highlight section titles */
  position: relative;
  padding-bottom: 10px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.2em;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 60px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  line-height: 1.2;
}

h1 { font-size: 3.5em; } /* Default for desktop, adjusted in media queries */
h2 { font-size: 2.5em; } /* Default for desktop, adjusted in media queries */
h3 { font-size: 1.8em; }

p {
  margin-bottom: 1em;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color-1);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-light);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

.btn-primary:hover {
  background-color: #0056b3; /* Darker shade */
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.6);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

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

/* Header & Navigation */
.main-header {
  background-color: rgba(26, 26, 46, 0.9); /* Semi-transparent dark background */
  padding: 20px 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px); /* Modern blur effect */
}

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

.main-header .logo img {
  height: 50px; /* Adjust logo size */
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

.main-nav ul li a {
  color: var(--text-light);
  font-weight: 600;
  font-size: 1.05em;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease;
}

.main-nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 3px;
  background-color: var(--accent-color-1);
  transition: width 0.3s ease;
}

.main-nav ul li a:hover::after,
.main-nav ul li a.active::after {
  width: 100%;
}

.main-nav ul li a:hover {
  color: var(--accent-color-1);
}

/* Mobile Menu Specifics (initially hidden, shown via media query) */
.mobile-menu-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.8em;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu {
  /* Default for desktop: completely hidden or not relevant */
  display: none;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh; /* Full viewport height for desktop */
  min-height: 550px; /* Fallback min-height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-light);
  overflow: hidden;
  padding-top: 80px; /* Space for fixed header */
  padding-left: 20px; /* Added for responsiveness */
  padding-right: 20px; /* Added for responsiveness */
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.hero-background video {
  position: absolute; /* Take up full space within parent */
  top: 50%; /* Center the video */
  left: 50%; /* Center the video */
  transform: translate(-50%, -50%); /* Adjust for centering */
  min-width: 100%;
  min-height: 100%;
  width: auto; /* Allow natural video ratio */
  height: auto; /* Allow natural video ratio */
  object-fit: cover; /* Cover the entire area without distortion */
  filter: brightness(0.4); /* Darken the video for text readability */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-content h1 {
  font-size: 4.5em; /* Desktop font size */
  margin-bottom: 20px;
  line-height: 1.1;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: var(--accent-color-1); /* Title color */
}

.hero-content .tagline {
  font-size: 1.5em; /* Desktop font size */
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-ctas .btn {
  margin: 10px;
  min-width: 200px;
}

/* About Section */
.about-section {
  background-color: var(--background-light);
}

.about-grid {
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-text {
  flex: 1;
  font-size: 1.1em;
  line-height: 1.8;
}

.about-text strong {
  color: var(--primary-color);
}

.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Ecosystem Section */
.ecosystem-section {
  background-color: var(--background-dark);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Default for desktop */
  gap: 30px;
}

.ecosystem-item {
  background-color: var(--background-light);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 5px solid var(--primary-color); /* Emphasize with a top border */
}

.ecosystem-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.ecosystem-item .icon {
  font-size: 3em;
  color: var(--accent-color-1);
  margin-bottom: 20px;
}

.ecosystem-item h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.ecosystem-item p {
  font-size: 0.95em;
  color: var(--text-muted);
}

.ecosystem-item.feature-highlight {
  background-color: var(--primary-color);
  color: var(--text-light);
  border-top: 5px solid var(--accent-color-1);
  transform: scale(1.02); /* Slightly larger to highlight */
}
.ecosystem-item.feature-highlight .icon,
.ecosystem-item.feature-highlight h3,
.ecosystem-item.feature-highlight p {
  color: var(--text-light); /* Ensure text is white on highlight */
}
.ecosystem-item.feature-highlight:hover {
  transform: translateY(-10px) scale(1.03); /* More pronounced hover for highlight */
}


/* Tokenomics Section */
.tokenomics-section {
  background-color: var(--background-light);
}

.tokenomics-content {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 40px;
  justify-content: center;
  align-items: center;
}

.token-info, .allocation-details {
  flex: 1;
  min-width: 300px; /* Minimum width before wrapping */
}

.total-supply-info, .chain-info {
  font-size: 1.3em;
  margin-bottom: 20px;
  color: var(--text-light);
}

.highlight-number {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--accent-color-1); /* Gold for numbers */
}

.highlight-text {
  font-weight: 700;
  color: var(--primary-color);
}

.pie-chart-container {
  flex: 1;
  min-width: 350px;
  max-width: 500px; /* Max size for the chart */
  height: 400px; /* Fixed height for consistency */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tokenomics-section canvas {
  max-width: 100%;
  max-height: 100%;
}

.allocation-list {
  list-style: none;
  font-size: 1.1em;
}

.allocation-list li {
  margin-bottom: 15px;
  padding-left: 35px;
  position: relative;
}

.allocation-list li span.color-box {
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-block;
}

/* Specific colors for tokenomics segments */
.lp-color { background-color: #4CAF50; } /* Green */
.dex-color { background-color: #2196F3; } /* Blue */
.airdrop-color { background-color: #FFC107; } /* Amber */
.team-color { background-color: #F44336; } /* Red */

.allocation-list li strong {
  color: var(--primary-color);
}

/* Roadmap Section */
.roadmap-section {
  background-color: var(--background-dark);
}

.roadmap-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

.roadmap-timeline::before {
  content: '';
  position: absolute;
  left: 50%; /* Centered line for desktop */
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--border-color);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  margin-bottom: 60px;
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
}

.timeline-item:nth-child(odd) {
  flex-direction: row-reverse; /* Alternating left/right layout */
}

.timeline-dot {
  position: absolute;
  left: 50%; /* Centered dot for desktop */
  top: 0;
  width: 20px;
  height: 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: 3px solid var(--background-dark); /* Outline with background color */
}

.timeline-item.completed .timeline-dot { background-color: #4CAF50; } /* Green for completed */
.timeline-item.current .timeline-dot { background-color: var(--accent-color-1); } /* Gold for current */
.timeline-item.future .timeline-dot { background-color: var(--secondary-color); } /* Grey for future */


.timeline-content {
  background-color: var(--background-light);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  flex: 0 0 45%; /* Take up 45% width for desktop */
  position: relative;
  border-left: 5px solid var(--primary-color); /* Default border for even items */
}

.timeline-item:nth-child(even) .timeline-content {
  margin-right: calc(50% + 20px); /* Push left for right side content */
  border-right: none;
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-left: calc(50% + 20px); /* Push right for left side content */
  border-left: none;
  border-right: 5px solid var(--primary-color);
}

.timeline-content h3 {
  color: var(--accent-color-1);
  margin-bottom: 15px;
  font-size: 1.6em;
}

.timeline-content ul {
  list-style: none;
}

.timeline-content ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.timeline-content ul li::before {
  content: '•'; /* Simple bullet point */
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.2em;
  line-height: 1;
}

/* Community Section */
.community-section {
  background-color: var(--background-light);
  text-align: center;
}

.social-links {
  margin-top: 30px;
  margin-bottom: 40px;
}

.social-links a {
  color: var(--text-light);
  font-size: 2.5em; /* Large icons for emphasis */
  margin: 0 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: var(--primary-color);
  transform: translateY(-5px);
}

.community-call {
  font-size: 1.3em;
  color: var(--accent-color-1);
  font-weight: 600;
}

/* Footer */
.main-footer {
  background-color: #111122; /* Even darker for footer */
  color: var(--text-muted);
  padding: 60px 0 20px;
  font-size: 0.95em;
  border-top: 1px solid var(--border-color);
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}

.footer-col {
  flex: 1;
  min-width: 250px; /* Minimum width for columns */
}

.footer-col .footer-logo {
  height: 60px; /* Adjust footer logo size */
  margin-bottom: 20px;
}

.footer-col h3 {
  color: var(--text-light);
  font-size: 1.3em;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: var(--text-muted);
}

.footer-col ul li a:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-bottom p {
  margin-bottom: 15px;
  font-size: 0.9em;
}

.footer-bottom .legal-links a {
  margin: 0 15px;
  color: var(--text-muted);
  font-size: 0.9em;
}

.footer-bottom .legal-links a:hover {
  color: var(--primary-color);
}


/* Scrollbar Styling (Optional, for modern browsers) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color-1);
}

/* Animations CSS for fade-in-on-scroll */
.fade-in-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up {
  opacity: 1;
  transform: translateY(0);
}




/* Games Section */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
  gap: 30px;
  padding-top: 20px; /* Some space below subtitle */
}

.game-item {
  background-color: var(--background-light);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Ensures image corners are rounded */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; /* For flexible content alignment */
  flex-direction: column;
}

.game-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.game-item img {
  width: 100%;
  height: 200px; /* Fixed height for image consistency */
  object-fit: cover; /* Cover the area, cropping if necessary */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin-bottom: 15px;
}

.game-item h3 {
  font-size: 1.6em;
  color: var(--primary-color);
  margin-bottom: 10px;
  padding: 0 20px; /* Add horizontal padding to text */
}

.game-item p {
  font-size: 0.95em;
  color: var(--text-muted);
  padding: 0 20px 20px; /* Add padding to description */
  flex-grow: 1; /* Make description take available space to push button down */
}

.game-item .btn {
  margin: 0 20px 20px; /* Center button and add bottom margin */
  width: calc(100% - 40px); /* Adjust button width within padding */
}

/* Responsive adjustments for Games Section */
@media (max-width: 767px) {
  .games-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 20px;
  }
  .game-item img {
    height: 180px; /* Slightly smaller image on mobile */
  }
  .game-item h3 {
    font-size: 1.4em;
  }
  .game-item p {
    font-size: 0.9em;
    padding-bottom: 15px;
  }
  .game-item .btn {
    margin-bottom: 15px;
  }
}

/* Leaderboard Styling (also goes into style.css, as it's on catch-the-meme-page.php which loads style.css) */
#leaderboard-container {
  margin-top: 30px;
  background-color: var(--background-light);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 25px;
}

#leaderboard-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#leaderboard-container th,
#leaderboard-container td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

#leaderboard-container th {
  background-color: var(--primary-color);
  color: var(--text-color-light); /* Or white */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#leaderboard-container tr:nth-child(even) {
  background-color: var(--background-dark); /* Slightly different background for even rows */
}

#leaderboard-container tr:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
}

#leaderboard-container td:first-child {
  font-weight: bold;
  color: var(--primary-color);
}

/* Responsive adjustments for table */
@media (max-width: 870px) {
  #leaderboard-container {
    padding: 15px;
  }
  #leaderboard-container th,
  #leaderboard-container td {
    padding: 8px 10px;
    font-size: 0.9em;
  }
}


/* ========================================= */
/* --- Responsive Adjustments (Start) --- */
/* ========================================= */

/* For Tablets and smaller desktops (max-width 1024px) */
@media (max-width: 1024px) {
  .container {
    padding: 0 20px; /* Consistent padding */
  }

  .section-padding {
    padding: 60px 0; /* Adjust vertical padding */
  }

  .section-title {
    font-size: 2.5em; /* Smaller title */
  }

  .section-subtitle {
    font-size: 1.1em;
    margin-bottom: 40px;
  }

  h1 { font-size: 3.5em; } /* Keep H1 large for hero on tablets */
  h2 { font-size: 2em; }
  h3 { font-size: 1.6em; }

  /* Hero Section */
  .hero-content h1 {
    font-size: 3.2em; /* Adjusted for tablets, slightly smaller than desktop */
  }
  .hero-content .tagline {
    font-size: 1.2em;
    margin-bottom: 30px;
  }
  .hero-ctas .btn {
    padding: 10px 20px;
    min-width: 180px;
    font-size: 0.95em;
  }

  /* About Section */
  .about-grid {
    flex-direction: column; /* Stack image and text */
    gap: 30px;
  }
  .about-text, .about-image {
    flex: none; /* Remove flex sizing */
    width: 100%; /* Take full width */
  }
  .about-image {
    margin-top: 30px; /* Add spacing when stacked */
  }

  /* Ecosystem Section */
  .ecosystem-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow smaller cards */
  }

  /* Tokenomics Section */
  .tokenomics-content {
    flex-direction: column; /* Stack chart and details */
    gap: 30px;
  }
  .token-info, .allocation-details, .pie-chart-container {
    min-width: unset; /* Remove min-width to allow full flexibility */
    width: 100%;
    max-width: 450px; /* Constrain max-width for better look */
    margin-left: auto; /* Center the blocks */
    margin-right: auto;
  }
  .pie-chart-container {
    height: 350px; /* Slightly smaller chart */
    margin-bottom: 30px; /* Spacing when stacked */
  }
  .allocation-list {
    padding: 0;
    text-align: left; /* Keep text aligned left within the list */
  }


  /* Roadmap Section */
  .roadmap-timeline::before {
    left: 20px; /* Move line to the left for mobile */
    transform: translateX(0);
  }
  .timeline-item {
    flex-direction: row !important; /* Force left-to-right on mobile */
    justify-content: flex-start; /* Align all items to start */
    margin-bottom: 40px; /* Reduce spacing */
  }
  .timeline-dot {
    left: 20px; /* Align dot with line */
    transform: translateX(-50%); /* Still center dot on line */
    top: 5px; /* Adjust top position */
  }
  .timeline-content {
    flex: 1; /* Take remaining space */
    margin-left: 60px !important; /* Space for line and dot */
    margin-right: 0 !important; /* Reset right margin */
    border-right: none !important; /* Reset right border */
    border-left: 5px solid var(--primary-color); /* Ensure left border */
    padding: 20px; /* Slightly smaller padding */
  }
  .timeline-item:nth-child(odd) .timeline-content {
    border-right: none !important; /* Ensure no right border for odd items on mobile */
    border-left: 5px solid var(--primary-color); /* Always left border */
  }
  .timeline-content h3 {
    font-size: 1.4em;
  }
  .timeline-content ul li {
    font-size: 0.9em;
  }

  /* Footer */
  .footer-columns {
    flex-direction: column; /* Stack footer columns */
    gap: 20px;
  }
  .footer-col {
    min-width: unset; /* Remove min-width */
    width: 100%;
    text-align: center; /* Center content in stacked columns */
  }
  .footer-col h3::after {
    left: 50%; /* Center the underline for centered text */
    transform: translateX(-50%);
  }
  .footer-col ul {
    padding: 0; /* Remove default padding for centered lists */
  }
}

/* For Mobile Phones (max-width 767px - common breakpoint for phones) */
@media (max-width: 767px) {
  .container {
    padding: 0 15px; /* Less padding on very small screens */
  }

  .section-padding {
    padding: 40px 0; /* Less vertical padding */
  }

  .section-title {
    font-size: 2em; /* Smaller titles on phones */
    margin-bottom: 15px;
  }
  .section-title::after {
    width: 60px; /* Smaller underline */
    height: 3px;
  }

  .section-subtitle {
    font-size: 0.9em;
    margin-bottom: 30px;
  }

  h1 { font-size: 2.8em; } /* Smaller H1 for hero on phones */
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.4em; }

  /* Header & Navigation Mobile */
  .main-nav {
    display: none; /* Hide desktop nav */
  }
  .mobile-menu-toggle {
    display: block; /* Show hamburger icon */
  }

  /* Mobile Menu Overlay Styles */
  .mobile-menu {
    display: block; /* Make it block-level to be positioned */
    position: fixed;
    top: 0;
    left: -100%; /* Hidden off-screen to the left */
    width: 100%; /* Full width */
    height: 100%;
    background-color: rgba(26, 26, 46, 0.98); /* Darker, almost opaque overlay */
    box-shadow: none; /* No shadow needed as it's full screen */
    padding-top: 80px; /* Space for the header */
    z-index: 999;
    transition: left 0.3s ease-in-out; /* Slide in from left */
    overflow-y: auto; /* Enable scrolling for long menus */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .mobile-menu.active {
    left: 0; /* Slide in */
  }

  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margin */
    display: flex; /* Flexbox for vertical centering/alignment */
    flex-direction: column;
    align-items: center; /* Center items horizontally */
  }

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

  .mobile-menu ul li a {
    color: var(--text-light);
    font-size: 1.4em; /* Slightly larger for mobile tap targets */
    padding: 15px 0; /* More padding for easier tapping */
    display: block;
    width: 100%; /* Make links full width for tapping */
    text-align: center;
    transition: color 0.3s ease;
  }

  .mobile-menu ul li a:hover {
    color: var(--primary-color);
  }
 
  .btn-mobile-primary {
    margin-top: 20px;
    /* Ensure it inherits btn styles and looks good on mobile */
    padding: 12px 25px;
    font-size: 1.1em;
    width: auto; /* Let content define width, or set to 80% */
    display: inline-block; /* To allow auto width if needed */
  }
  /* If you want it full width, add: */
  /* .mobile-menu ul li .btn-mobile-primary {
    width: 80%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  } */

  /* Hero Section Mobile */
  .hero-section {
    height: auto; /* Allow height to adapt */
    min-height: 450px; /* Keep a minimum height */
    padding: 60px 15px; /* Adjust padding */
  }
  .hero-content h1 {
    font-size: 2.2em; /* Even smaller font for phones */
    line-height: 1.2;
  }
  .hero-content .tagline {
    font-size: 0.95em;
    margin-bottom: 25px;
  }
  .hero-ctas {
    display: flex;
    flex-direction: column; /* Stack buttons */
    gap: 10px; /* Space between buttons */
  }
  .hero-ctas .btn {
    width: 100%; /* Full width buttons */
    margin: 0; /* Reset margins */
  }

  /* About Section */
  .about-text {
    font-size: 1em;
  }

  /* Ecosystem Section */
  .ecosystem-grid {
    grid-template-columns: 1fr; /* Single column layout on small phones */
  }
  .ecosystem-item {
    padding: 25px;
  }

  /* Tokenomics Section */
  .pie-chart-container {
    height: 300px; /* Even smaller chart */
  }
  .total-supply-info, .chain-info {
    font-size: 1.1em;
  }
  .highlight-number {
    font-size: 1.5em;
  }
  .allocation-list {
    font-size: 1em;
  }

  /* Roadmap Section */
  .roadmap-timeline::before {
    left: 15px; /* Adjust line position for smaller padding */
  }
  .timeline-dot {
    left: 15px; /* Adjust dot position */
  }
  .timeline-content {
    margin-left: 50px !important; /* Adjust content margin */
    padding: 15px;
  }
  .timeline-content h3 {
    font-size: 1.2em;
  }

  /* Community Section */
  .social-links a {
    font-size: 2em; /* Slightly smaller icons */
    margin: 0 10px;
  }
  .community-call {
    font-size: 1.1em;
  }

  /* Footer */
  .footer-bottom .legal-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-bottom .legal-links a {
    margin: 0; /* Remove horizontal margin */
  }
}

/* For very small phones (max-width 480px) - from your original responsive.css */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2.2em; /* This will override the 767px version if it's smaller */
  }
  .hero-content .tagline {
    font-size: 0.9em;
  }
  .social-links a {
    font-size: 2em;
    margin: 0 10px;
  }
  /* Add any other specific small phone adjustments here */
}


/* ========================================= */
/* --- Responsive Adjustments (End) --- */
/* ========================================= */

/* Whitepaper Specific Styles (from previous step, ensuring responsive too) */
.whitepaper-section {
  background-color: var(--background-dark); /* Darker background for contrast */
  color: var(--text-light);
  line-height: 1.8;
}

.whitepaper-section .section-title {
  color: var(--accent-color-1); /* Accent color */
  text-align: center;
  margin-bottom: 10px;
}
.whitepaper-section .section-title::after { /* Adjust for whitepaper titles */
  background-color: var(--accent-color-1);
}

.whitepaper-section .section-subtitle,
.whitepaper-section .whitepaper-date {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.whitepaper-content-toc {
  background-color: var(--background-light);
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 40px;
  border-left: 5px solid var(--primary-color);
}

.whitepaper-content-toc h2 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 15px;
}

.whitepaper-content-toc ol,
.whitepaper-content-toc ul {
  list-style-type: decimal;
  padding-left: 20px;
}

.whitepaper-content-toc ul {
  list-style-type: lower-alpha;
}

.whitepaper-content-toc a {
  color: var(--text-light);
  text-decoration: none;
}

.whitepaper-content-toc a:hover {
  color: var(--primary-color);
}

.whitepaper-article h2 {
  color: var(--primary-color);
  margin-top: 40px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 123, 255, 0.3);
}

.whitepaper-article h3 {
  color: var(--accent-color-1); /* Another accent color */
  margin-top: 30px;
  margin-bottom: 10px;
}

.whitepaper-article p {
  margin-bottom: 15px;
}

.whitepaper-article ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}

.whitepaper-article li {
  margin-bottom: 8px;
}

.legal-content-block { /* Re-used for whitepaper legal disclaimer and contact */
  background-color: #333;
  color: #ffcc00; /* Warning color */
  padding: 20px;
  border-radius: 8px;
  border-left: 5px solid #ffcc00;
  margin-bottom: 40px;
  font-size: 0.9em;
}

/* Adjustments for whitepaper specific elements within responsive views */
@media (max-width: 767px) {
  .whitepaper-content-toc {
    padding: 15px;
  }
  .whitepaper-article h2 {
    font-size: 1.8em; /* Match general H2 on mobile */
  }
  .whitepaper-article h3 {
    font-size: 1.4em; /* Match general H3 on mobile */
  }
  .whitepaper-article p, .whitepaper-article ul li {
    font-size: 0.9em;
  }
  .legal-content-block {
    padding: 15px;
    font-size: 0.8em;
  }
}