* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Poppins', sans-serif;

}

body {

  background: #0b0f14;

  color: #eaeaea;

  line-height: 1.6;

}

/* NAV */

.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1.2rem 2rem;

  background: rgba(13, 27, 42, 0.9);

  position: sticky;

  top: 0;

  z-index: 100;

}

.nav a {

  color: #eaeaea;

  margin-left: 1rem;

  text-decoration: none;

  transition: color 0.3s;

}

.nav a:hover {

  color: #ff9f1c;

}

/* HERO */

.hero {

  min-height: 90vh;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 4rem 2rem;

  position: relative;

  overflow: hidden;

}

.hero-content {

  max-width: 600px;

}

.hero h2 {

  font-size: 2.4rem;

  margin-bottom: 1rem;

}

.hero button {

  margin-top: 1.5rem;

  padding: 0.8rem 1.6rem;

  background: #ff9f1c;

  border: none;

  cursor: pointer;

  font-weight: 600;

  transition: transform 0.3s;

}

.hero button:hover {

  transform: translateY(-3px);

}

/* FLOATING CARD */

.floating-card {

  background: rgba(255, 159, 28, 0.1);

  border: 1px solid rgba(255, 159, 28, 0.4);

  padding: 1.2rem 1.6rem;

  border-radius: 12px;

  animation: float 6s ease-in-out infinite;

}

@keyframes float {

  0% { transform: translateY(0); }

  50% { transform: translateY(-20px); }

  100% { transform: translateY(0); }

}

/* SECTIONS */

.section {

  max-width: 1100px;

  margin: auto;

  padding: 4rem 2rem;

}

.section.alt {

  background: #10161d;

}

.section h3 {

  font-size: 1.8rem;

  margin-bottom: 1.5rem;

}

/* CARDS */

.skills-grid,

.projects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 1.5rem;

}

.card,

.project-card {

  background: #141b24;

  padding: 1.8rem;

  border-radius: 14px;

  transition: transform 0.3s, box-shadow 0.3s;

}

.card:hover,

.project-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);

}

/* PROJECT LINK */

.project-link {

  display: inline-block;

  margin-top: 1rem;

  color: #ff9f1c;

  text-decoration: none;

}

/* VALUE */

.value-list {

  list-style: none;

}

.value-list li {

  margin-bottom: 0.8rem;

  padding-left: 1.2rem;

  position: relative;

}

.value-list li::before {

  content: "✔";

  position: absolute;

  left: 0;

  color: #ff9f1c;

}

/* FOOTER */

footer {

  text-align: center;

  padding: 1.5rem;

  background: #0d1b2a;

}

/* =========================
  RESPONSIVE DESIGN
  ========================= */
/* Tablets & below */
@media (max-width: 1024px) {
 .hero {
   flex-direction: column;
   text-align: center;
   padding: 3rem 1.5rem;
 }
 .floating-card {
   margin-top: 2rem;
 }
}
/* Phones */
@media (max-width: 768px) {
 /* NAV */
 .nav {
   flex-direction: column;
   gap: 1rem;
   text-align: center;
 }
 .nav-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.8rem;
 }
 /* HERO */
 .hero {
   min-height: auto;
 }
 .hero h2 {
   font-size: 1.8rem;
 }
 .hero p {
   font-size: 0.95rem;
 }
 .hero button {
   width: 100%;
   max-width: 280px;
 }
 /* SECTIONS */
 .section {
   padding: 3rem 1.5rem;
 }
 .section h3 {
   font-size: 1.5rem;
 }
 /* CARDS */
 .card,
 .project-card {
   padding: 1.4rem;
 }
 /* PROJECT GRID */
 .projects-grid,
 .skills-grid {
   grid-template-columns: 1fr;
 }
 /* FLOATING CARD */
 .floating-card {
   width: 100%;
   text-align: center;
 }
}
/* Small phones */
@media (max-width: 480px) {
 .hero h2 {
   font-size: 1.6rem;
 }
 .hero p {
   font-size: 0.9rem;
 }
 footer {
   font-size: 0.8rem;
 }
}