/* ───────── THEME VARIABLES ───────── */
:root{
  /* dark navy panels & cards */
  --primary:#0a192f;
  /* page background */
  --bg:#112240;

  /* neon-teal accent (section titles, links, buttons) */
  --accent:#64ffda;

  /* light text shades on dark bg */
  --text-main:#ccd6f6;
  --text-sub:#8892b0;
  --text-light:#ffffff;

  --radius:8px;
}

/* ───────── GLOBAL RESET ───────── */
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text-main);
  font-family:'Poppins',sans-serif;
  line-height:1.6;
}
.section{padding:5rem 1rem;max-width:900px;margin:auto;}
.section.alt{background:var(--primary);}
h2{font-size:2rem;margin-bottom:1.5rem;text-align:center;color:var(--accent);}
p,li{font-size:1.05rem;color:var(--text-sub);}
li{margin-left:1.2rem;}
a{color:var(--accent);text-decoration:none;}

/* ───────── BUTTONS ───────── */
.btn{
  display:inline-block;padding:.75rem 1.25rem;
  border:1px solid var(--accent);border-radius:var(--radius);
  transition:.3s;color:var(--accent);
}
.btn:hover{background:var(--accent);color:var(--primary);}
.btn-ghost{background:transparent;}

/* ───────── NAVBAR ───────── */
.navbar{
  position:fixed;top:0;left:0;width:100%;
  background:rgba(10,25,47,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1.2rem;z-index:100;
}
.logo a{font-weight:700;font-size:1.5rem;color:var(--accent);}
.nav-links{display:flex;gap:1rem;list-style:none;}
.nav-links li a{padding:.5rem;color:var(--text-main);}
.nav-links li a:hover{color:var(--accent);}

.burger{
  display:none;background:none;border:none;cursor:pointer;
  width:30px;height:24px;flex-direction:column;justify-content:space-between;
}
.burger span{
  display:block;width:100%;height:4px;background:var(--accent);border-radius:2px;
}

/* ───────── HERO ───────── */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:0 1rem;text-align:center;
}
.hero-text h2{font-size:2.8rem;font-weight:600;margin-bottom:.75rem;}
.hero-text h2 span{color:var(--accent);}
.summary{max-width:700px;margin:0 auto 2rem;color:var(--text-main);}

/* ───────── STAT TILES ───────── */
.tiles{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
  margin-bottom:2.5rem;list-style:none;
}
.tiles li{
  background:var(--primary);color:var(--text-light);
  padding:1.25rem 1.75rem;border-radius:var(--radius);
  min-width:150px;display:flex;flex-direction:column;align-items:center;
}
.tile-number{font-size:1.8rem;font-weight:600;}
.tile-label{margin-top:.35rem;font-size:1rem;}

/* ───────── EXPERIENCE & CARDS ───────── */
.card{
  background:var(--primary);
  padding:1.5rem;border-radius:var(--radius);
  margin-bottom:1.25rem;
}
.card h3{color:var(--accent);font-size:1.25rem;margin-bottom:.5rem;}
.date{display:block;font-size:.9rem;margin-bottom:1rem;color:var(--text-main);}
/* ───────── JOB TITLE + LOGO ───────── */
.title-with-logo{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.company-logo{
  width:70px;                 /* size you already chose */
  height:auto;

  /* 🔆 make any dark/coloured PNG turn bright-teal on navy */
  filter:brightness(0) invert(1) sepia(1) hue-rotate(135deg) saturate(6);

  /* optional soft glow to lift it a bit more */
  filter:brightness(0) invert(1) sepia(1) hue-rotate(135deg) saturate(6)
           drop-shadow(0 0 4px rgba(100,255,218,.6)); */
}

/* ───────── TIMELINE & SKILLS ───────── */
.timeline li{margin-bottom:1.25rem;}
.skills{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;list-style:none;
}
.skills li{
  background:var(--primary);
  padding:.5rem 1rem;border-radius:var(--radius);
}

/* ───────── FOOTER ───────── */
footer{
  padding:1.5rem 0;text-align:center;font-size:.9rem;
  color:rgba(204,214,246,.7);
}

/* ───────── MOBILE NAV ───────── */
@media (max-width:768px){
  .nav-links{
    position:absolute;top:100%;right:0;background:var(--primary);
    flex-direction:column;align-items:flex-start;padding:1rem;width:200px;
    transform:translateX(100%);transition:.3s;
  }
  .nav-links.open{transform:translateX(0);}
  .burger{display:flex;}
}
/* style.css */
.nav-link.active{color:var(--accent);font-weight:600;}