/*
  Style sheet for Alpha DeepFi landing page.

  This CSS is written from scratch to mirror the look and feel of the
  original Framer-based design without relying on any external
  frameworks. It defines global variables for colours and sizes,
  implements responsive layout using flexbox and CSS grid, and
  styles the navigation, hero, feature cards, benefit highlights,
  process steps, call‑to‑action, and footer.

  Colours:
    --color-primary: Dark primary colour used for buttons and accents.
    --color-secondary: Soft accent colour used for link text and icons.
    --color-bg: Base page background colour.
    --color-section-bg: Light section backgrounds for contrast.
    --color-text: Primary text colour.
    --color-muted: Muted text colour for secondary information.
*/

:root {
  --color-primary: #000; /* black for buttons/text */
  --color-secondary: #0099ff; /* blue accent for links and highlights */
  --color-bg: #ffffff; /* page background */
  --color-section-bg: #f5f5f5; /* light grey for section backgrounds */
  --color-text: #111; /* main text */
  --color-muted: #666; /* secondary text */
  --max-width: 1200px; /* maximum width for container */
  --border-radius: 20px; /* consistent rounding for cards */
  --transition: 0.3s ease; /* unified transition */
}

/* Reset some default margins and paddings */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

/* Container to centre content and constrain width */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigation bar */
header {
  background-color: var(--color-bg);
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 18px;
}

.logo img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.brand-name {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  gap: 30px;
  font-size: 16px;
}

/* Navigation links: emphasise page names with bold weight */
.nav-links a {
  color: var(--color-muted);
  font-weight: 700;
  transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
}

.btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: #333;
}

.btn-link {
  background-color: transparent;
  color: var(--color-secondary);
}

.btn-link:hover {
  text-decoration: underline;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 100px 20px;
  background: var(--color-bg);
}

.hero h1 {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: 700;
}

.hero h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: 30px;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Features section */
.features {
  background: var(--color-section-bg);
  padding: 80px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.feature {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition);
}

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

.feature h3 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}

.feature p {
  font-size: 14px;
  color: var(--color-muted);
}

/* Benefits section */
.benefits {
  background: var(--color-bg);
  padding: 60px 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}

.benefit {
  padding: 30px;
  background: transparent;
  border-radius: var(--border-radius);
  transition: none;
}

/* Remove hover lift for benefits */
.benefit:hover {
  transform: none;
}

.benefit h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}

/* Icon for each benefit */
.benefit-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}

/* Ensure nested images within benefit icons fill the container */
.benefit-icon img {
  width: 100%;
  height: 100%;
}

/* Tokenomics allocation section styles */
/* Each tokenomics row is a large square (max 1024px) that splits the space
   into two equal halves: a grey panel for the image and a white panel
   for the text. Odd rows show the image on the right; even rows show
   the image on the left by reversing the flex direction. */
.tokenomics-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  max-width: 1000px;
  max-height: 480px;
  width: 100%;
  /* Maintain a square aspect ratio */
  aspect-ratio: 1;
  margin: 10px auto;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.tokenomics-row:nth-child(even) {
  /* For even rows (2nd, 4th, ...), flip the order so the image appears on the right */
  flex-direction: row-reverse;
}
.tokenomics-image {
  flex: 1;
  background: var(--color-section-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}
.tokenomics-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tokenomics-content {
  flex: 1;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 20px;
}
.tokenomics-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.tokenomics-content p {
  font-size: 16px;
  color: var(--color-muted);
  max-width: 500px;
}

/* Process table section styles for index page */
/* Grid layout for index process section. Each cell is square due to aspect-ratio. */
/* Process section */
.process {
  background: var(--color-bg);
  padding: 80px 0;
}

/*
  Redesigned process section: instead of a grid of small cards, we
  present three large rows similar to the tokenomics allocation rows.
  Each row is a square (max 1024px) that splits into two halves: an image
  with a grey background and text on a white background. Odd rows have
  the image on the right, even rows have the image on the left.
*/
.process-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  max-width: 1000px;
  max-height: 480px;
  width: 100%;
  aspect-ratio: 1;
  margin: 4px auto;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.process-row:nth-child(odd) {
  flex-direction: row-reverse;
}
.process-image {
  flex: 1;
  background: var(--color-section-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.process-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.process-content {
  flex: 1;
  background: var(--color-bg);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.process-content p {
  font-size: 16px;
  color: var(--color-muted);
}

/* Remove old process row styles (used in previous layout). The new layout uses .process-grid and .process-cell defined above. */

/* CTA section */
.cta {
  text-align: center;
  background: var(--color-bg);
  padding: 80px 20px;
}

.cta h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.cta p {
  font-size: 18px;
  color: var(--color-muted);
  margin-bottom: 30px;
}

/* Footer */
footer {
  background: var(--color-section-bg);
  padding: 40px 20px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.footer-section {
  flex: 1 1 200px;
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-section ul {
  list-style: none;
  padding-left: 0;
}

.footer-section li {
  margin-bottom: 8px;
}

.footer-section a {
  color: var(--color-muted);
  transition: color var(--transition);
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* hide nav links on small screens */
  }
  .nav {
    justify-content: space-between;
  }
  .feature-grid,
  .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .process-item {
    flex-direction: column;
    text-align: center;
  }
  .process-item.reverse {
    flex-direction: column;
  }
  .process-img {
    flex: none;
    width: 100%;
  }
  .cta h2 {
    font-size: 24px;
  }
  .cta p {
    font-size: 16px;
  }
}

/* Contact form styles */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
}

.contact-info {
  max-width: 600px;
  margin: 40px auto 0 auto;
}

.contact-info h3 {
  margin-bottom: 10px;
}

.contact-info p {
  margin-bottom: 8px;
}

.contact-info a {
  color: var(--color-secondary);
}

.contact-info a:hover {
  text-decoration: underline;
}