body {
      background: linear-gradient(135deg, #171c22 0%, #1e2228 100%);
      color: #e9fbe9;
      min-height: 100vh;
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    }
    .hero {
      padding: 90px 0 40px 0;
      text-align: center;
      background: linear-gradient(135deg, #21292f 70%, #222e27 100%);
      border-bottom: 1px solid #24a65525;
    }
    .hero h1 {
      font-size: 2.8rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 1px;
    }
    .hero .tagline {
      color: #6fe287;
      font-size: 1.25rem;
      margin-bottom: 20px;
      letter-spacing: .02em;
    }
    .hero .cta-btn {
      background: #6fe287;
      color: #14291a;
      border: none;
      font-weight: 600;
      border-radius: 999px;
      padding: 0.7em 2.2em;
      font-size: 1.1em;
      transition: background 0.2s, color 0.2s;
      box-shadow: 0 2px 10px rgba(30,233,138,0.06);
    }
    .hero .cta-btn:hover {
      background: #22bb5c;
      color: #fff;
    }
    .projects-section {
      padding: 60px 0 40px 0;
    }
    .projects-section h2 {
      color: #b7e0b7;
      font-size: 2.1rem;
      font-weight: 600;
      margin-bottom: 2.3rem;
      letter-spacing: .04em;
      text-align: center;
    }
    .project-card {
      background: #21292f;
      color: #e9fbe9;
      border: 1px solid #24a65512;
      border-radius: 1.3rem;
      box-shadow: 0 2px 18px 0 rgba(24,44,50,0.08);
      transition: transform 0.12s, box-shadow 0.12s;
      padding: 1.6rem 1.2rem 1.2rem 1.2rem;
      min-height: 220px;
    }
    .project-card:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 6px 26px 0 rgba(41,217,122,0.10);
      border-color: #24a65542;
    }
    .project-card .project-title {
      font-size: 1.16rem;
      font-weight: 600;
      margin-bottom: 0.35em;
      color: #6fe287;
    }
    .project-card .project-desc {
      font-size: 1em;
      color: #d8ffe3;
      margin-bottom: 0.85em;
      opacity: .93;
    }
    .project-card .project-link {
      color: #6fe287;
      font-size: 1.05em;
      text-decoration: none;
      transition: color 0.18s;
    }
    .project-card .project-link:hover {
      color: #22bb5c;
      text-decoration: underline;
    }
    .social-links a {
      color: #b7e0b7;
      font-size: 1.5rem;
      margin: 0 0.55em;
      transition: color 0.18s;
    }
    .social-links a:hover {
      color: #6fe287;
    }
    footer {
      text-align: center;
      font-size: .98rem;
      color: #9bbca9;
      padding: 25px 0 14px 0;
      letter-spacing: .02em;
      border-top: 1px solid #24a65525;
      background: transparent;
      margin-top: 30px;
    }
    @media (max-width: 575px) {
      .hero h1 {
        font-size: 2rem;
      }
      .projects-section h2 {
        font-size: 1.3rem;
      }
    }