:root {
--bg-main: #0b3d2e;
--bg-secondary: #06281e;
--text-main: #f5f7f6;
--text-muted: #cbd5d1;
--accent: #4ade80;
--border: rgba(255,255,255,0.12);
}


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


body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
background: #f8fafc;
color: #0f172a;
line-height: 1.6;
}

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(180deg, var(--bg-main), var(--bg-secondary));
      border-bottom: 1px solid var(--border);
    }

    .header-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-block {
      display: flex;
      flex-direction: column;
    }

    .logo {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-main);
      text-decoration: none;
      letter-spacing: 0.4px;
    }

    .tagline {
      font-size: 12px;
      color: var(--text-muted);
    }

    nav {
      display: flex;
      gap: 32px;
    }

    nav a {
      color: var(--text-main);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding-bottom: 2px;
      border-bottom: 2px solid transparent;
      transition: border-color 0.25s ease;
    }

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

    .burger {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
    }

    .burger span {
      width: 26px;
      height: 3px;
      background: var(--text-main);
    }

    @media (max-width: 860px) {
      nav {
        position: fixed;
        top: 72px;
        right: -100%;
        width: 100%;
        max-width: 320px;
        height: calc(100vh - 72px);
        background: var(--bg-secondary);
        flex-direction: column;
        padding: 32px 24px;
        gap: 18px;
        transition: right 0.3s ease;
        z-index: 999;
      }

      nav.active {
        right: 0;
        z-index: 999;
      }

      .burger {
        display: flex;
      }
    }

/* ==========================
   Footer Styles – AerifyDev
   ========================== */

footer {
  background: linear-gradient(180deg, #06281e, #041f17);
  color: #e5e7eb;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 40px;
}

.footer-column h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #f8fafc;
}

.footer-column h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cbd5d1;
}

.footer-text {
  font-size: 14px;
  line-height: 1.7;
  color: #d1d5db;
  max-width: 360px;
}

.footer-column p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #d1d5db;
}

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

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

.footer-column ul li a {
  font-size: 14px;
  color: #e5e7eb;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-column ul li a:hover {
  color: #4ade80;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 13px;
  color: #9ca3af;
}

/* ==========================
   Responsive
   ========================== */

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .footer-container {
    grid-template-columns: 1fr;
    padding: 48px 20px 40px;
  }

  .footer-column h3 {
    font-size: 18px;
  }
}