/* ===========================
   Design Tokens
=========================== */
:root {
  --bg: #0e1116;
  --surface: #111827;
  --text: #e6edf3;
  --primary: #4cc9f0;

  --light-bg: #f7f9fc;
  --light-text: #0e1116;
  --light-surface: #ffffff;

  /* focus ring */
  --ring: #7dd3fc;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: var(--light-bg);
  color: var(--light-text);
  transition: background .25s ease, color .25s ease;
}

/* ===========================
   Skip link (a11y)
=========================== */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  background: #000;
  color: #fff;
  border-radius: 8px;
  z-index: 1000;
}

/* ===========================
   Header
=========================== */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
  background: linear-gradient(180deg, rgba(76,201,240,0.12), rgba(76,201,240,0) 60%), #111;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}

/* nav */
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}
header nav a {
  color: #e6edf3;
  text-decoration: none;
  opacity: .9;
  padding: .25rem .125rem;
  border-radius: 6px;
}
header nav a:hover,
header nav a:focus-visible {
  opacity: 1;
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ring);
}
header nav a[aria-current="page"],
header nav a.active {
  border-bottom: 2px solid var(--primary);
}

.actions .btn {
  background: rgba(255,255,255,.08);
  color: #e6edf3;
  border: 1px solid rgba(255,255,255,.15);
  padding: .5rem .75rem;
  border-radius: 10px;
  cursor: pointer;
}

/* menu toggle (hidden desktop) */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #e6edf3;
  padding: .45rem .6rem;
  border-radius: 10px;
  font-size: 1.05rem;
}

/* ===========================
   Sections / Typography
=========================== */
section { padding: 3rem 2rem; max-width: 1100px; margin: auto; scroll-margin-top: 84px; }
h1,h2,h3 { margin: 0 0 1rem; }
a { color: var(--primary); }

/* ===========================
   Hero
=========================== */

/* Prevent horizontal push from long content */
#home { overflow-x: clip; }

.hero-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr; /* mobile: single column */
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid {
    /* minmax(0, …) prevents long content from expanding the track */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: 24px;
    align-items: center;
  }
}

/* Allow children to actually shrink in CSS Grid */
.hero-text, .hero-media { min-width: 0; }

.hero-text p { max-width: 60ch; }
.tagline {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 1rem;
}
.cta { margin-top: 1.25rem; }

/* Gradient headline */
.hero-text h1 {
  background: linear-gradient(90deg, #4cc9f0, #38bdf8 45%, #4cc9f0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Attention bar (green gradient) */
.attention-bar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  margin: .75rem 0 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  background: linear-gradient(90deg, #10b981, #22c55e);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16,185,129,.35);
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Capabilities marquee (blue gradient) */
.capabilities-marquee {
  --speed: 26s;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin: 1rem 0 1.5rem;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #2563eb);
  color: #fff;

  /* Keep it within its column */
  inline-size: 100%;
  max-inline-size: 100%;
  contain: content;
}
.capabilities-marquee .capabilities-track {
  display: inline-flex;           /* don’t expose max-content width */
  gap: 2rem;
  list-style: none;
  padding: .8rem 1rem;
  margin: 0;
  width: auto;
  white-space: nowrap;
  animation: marquee var(--speed) linear infinite;
}
.capabilities-marquee li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
}
.capabilities-marquee i { opacity: .9; }

/* Loop animation */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .capabilities-marquee .capabilities-track { animation: none; }
  .pulse-dot { animation: none; }
}

/* Hero media (responsive avatar) */
.hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.profile-photo-wrapper {
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  width: 180px;   /* phones */
  height: 180px;
}
.profile-photo-wrapper img,
#heroImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
@media (min-width: 600px) {
  .profile-photo-wrapper { width: 240px; height: 240px; }
}
@media (min-width: 860px) {
  .profile-photo-wrapper { width: 300px; height: 300px; }
  .hero-media { justify-self: center; }
}
@media (min-width: 1200px) {
  .profile-photo-wrapper { width: 360px; height: 360px; }
}

/* ===========================
   About
=========================== */
.about-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.about-card { padding: 1.25rem; }
.about-card .lead {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: .5rem;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: .75rem 0 1rem;
}
.about-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0;
}
.about-list i { color: #0078ff; }
.about-cta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.about-aside h3 { margin: 0 0 .5rem; }
.facts { margin: 0; padding-left: 1.1rem; }
.facts li { margin: .25rem 0; }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.35fr .65fr; align-items: start; }
}

/* ===========================
   Cards / Grids
=========================== */
/* Skills Section */
/* Skills Section */
.skills {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* Default: 1 column for smaller screens */
}

@media (min-width: 600px) {
  .skills {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
  }
}

@media (min-width: 860px) {
  .skills {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for larger screens */
  }
}

@media (min-width: 1200px) {
  .skills {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for extra large screens */
  }
}

/* Card Styling */
/* Card Styling */
.card {
  background: var(--light-surface);
  color: inherit;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
  min-width: 150px; /* Ensure minimum width for each card */
  word-wrap: break-word; /* Ensure long words break to fit */
  overflow: hidden; /* Hide any overflowed text */
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}


/* ===========================
   Buttons
=========================== */
.btn { display: inline-block; text-decoration: none; }
.btn.primary {
  background: #4cc9f0; color: #0b0d10; border: 1px solid transparent; padding: .6rem .9rem; border-radius: 12px;
}
.btn.primary:hover,
.btn.primary:focus-visible { filter: brightness(0.95); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }

.btn.outline {
  background: transparent; color: #4cc9f0; border: 1px solid #4cc9f0; padding: .6rem .9rem; border-radius: 12px; margin-left: .5rem;
}
.btn.outline:hover,
.btn.outline:focus-visible { background: rgba(76,201,240,.08); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }

/* Resume button */
.btn-resume {
  background: #10b981;
  color: #fff;
  border: 1px solid transparent;
  padding: .6rem .9rem;
  border-radius: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 600;
}
.btn-resume:hover,
.btn-resume:focus-visible { background: #0e9f6e; transform: translateY(-2px); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }
.btn-resume img { width: 18px; height: 18px; object-fit: contain; }

/* ===========================
   Social pills
=========================== */
.social-mini { display: flex; gap: 14px; margin-top: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid #cfd7e3; background: #f4f7fb; color: #0e1116;
  text-decoration: none; font-size: 12px;
}
.pill:hover,
.pill:focus-visible { background: #e9eef5; outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }
.pill img { width: 20px; height: 20px; object-fit: contain; }

/* ===========================
   Contact
=========================== */
.contact-grid {
  display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; justify-content: center;
}
.contact-card {
  flex: 1 1 220px;
  background: var(--light-surface);
  padding: 1.2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}
.contact-card h3 { margin-bottom: 0.5rem; color: var(--primary); }
.contact-card a { color: var(--light-text); text-decoration: none; font-weight: 500; }
.contact-card a:hover,
.contact-card a:focus-visible { text-decoration: underline; outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }

.contact-buttons {
  display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px;
}
.contact-buttons a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: background 0.25s ease, transform 0.15s ease;
}
.contact-buttons a:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--ring); }
.contact-buttons img { width: 20px; height: 20px; object-fit: contain; }

/* LinkedIn */
.btn-linkedin { background: #0077b5; color: #fff; }
.btn-linkedin:hover { background: #006097; transform: translateY(-2px); }

/* Indeed */
.btn-indeed { background: #2164f3; color: #fff; }
.btn-indeed:hover { background: #1b4fd1; transform: translateY(-2px); }

/* ===========================
   Footer
=========================== */
footer { background: #111; color: #e6edf3; text-align: center; padding: 2rem; }

/* ===========================
   Dark mode
=========================== */
body.dark { background: var(--bg); color: var(--text); }
body.dark header { background: linear-gradient(180deg, rgba(76,201,240,0.14), rgba(76,201,240,0) 60%), #0b0f17; }
body.dark .card { background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.25); border-color: rgba(255,255,255,.06); }
body.dark footer { background: #0b0f17; }
body.dark .pill { background: #121a27; border-color: #2a3445; color: #e6edf3; }
body.dark .pill svg { color: #4cc9f0; }
body.dark .contact-card { background: var(--surface); border-color: rgba(255,255,255,0.06); color: var(--text); }
body.dark .contact-card a { color: var(--text); }

/* ===========================
   Motion
=========================== */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.reveal-visible { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-visible { transition: none; transform: none; opacity: 1; }
}

/* ===========================
   Responsive (layout & nav)
=========================== */
@media (min-width: 600px) {
  /* extra space tweaks already above for avatar */
}

@media (max-width: 600px) {
  header { padding: 0.75rem 1rem; }
  section { padding: 2rem 1rem; }
  .btn.primary, .btn.outline, .contact-buttons a {
    padding: 14px 18px;
    border-radius: 12px;
  }
  .social-mini { gap: 12px; }
  .contact-buttons { flex-direction: column; gap: 12px; }
}

@media (max-width: 860px) {
  .menu-toggle { 
    display: inline-block; 
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #111;
    border-top: 1px solid rgba(255,255,255,.15);
    display: block;
    width: 100%;  /* Ensure it spans the entire width */
    max-height: 50vh;  /* Reduce the maximum height */
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .25s ease, opacity .2s ease, transform .2s ease, visibility 0s .25s;
    z-index: 999;
  }

  .nav.open {
    max-height: 50vh;  /* Adjust the open state max-height to be smaller */
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: max-height .25s ease, opacity .25s ease, transform .25s ease;
  }

  .nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block; /* Stack the items vertically */
  }

  .nav a {
    display: block;  /* Ensures each item takes full width */
    padding: 0.8rem 1rem;  /* Reduced padding for smaller size */
    text-align: center;
    color: #e6edf3;
    text-decoration: none;
    font-size: 0.9rem; /* Reduced font size for a more compact look */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav a:hover,
  .nav a:focus-visible {
    background: rgba(255,255,255,.08);
  }
}
/* Mobile-specific resume button width */
@media (max-width: 600px) {
  .btn-resume { width: 100%; max-width: 360px; justify-content: center; padding: 14px 18px; border-radius: 12px; }
}

/* --- Ensure the hero image wrapper never adds its own background/shadow --- */
.hero-media,
body.dark .hero-media {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ===========================
   HERO - visual polish (no HTML changes)
=========================== */

/* Soft background glow + subtle pattern only in hero */
#home {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(76,201,240,.18), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(34,197,94,.14), transparent 65%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.02) 0 2px,
      rgba(255,255,255,0) 2px 12px
    );
  border-radius: 18px;
  padding-top: 2.5rem; /* a little breathing room */
}

#home .hero-text h1 {
  line-height: 1.15; /* a little more breathing room */
  letter-spacing: .2px;
  background: linear-gradient(90deg, #4cc9f0 0%, #8ab4ff 50%, #4cc9f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* ensures descenders render */
  color: transparent;
  background-size: 220% 100%;
  animation: heroInk 1.8s ease forwards;
  position: relative;
  display: inline-block;
}

@keyframes hero-ink {
  0% { background-position: 100% 0; filter: brightness(1); }
  100% { background-position: 0 0; filter: brightness(1); }
}

/* Subhead (the bold line) with accent underline */
#home .hero-text p:first-of-type strong {
  position: relative;
  font-weight: 700;
}
#home .hero-text p:first-of-type strong::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 56%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4cc9f0);
  opacity: .9;
}

/* Tagline: slightly larger & softer color */
#home .tagline {
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--primary) 42%, #0ea5e9 22%);
}

/* CTA buttons: lift + glow */
#home .cta .btn {
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
#home .cta .btn:hover,
#home .cta .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(76,201,240,.22);
  filter: saturate(1.05);
}

/* Profile photo: elegant conic ring + soft glow */
.profile-photo-wrapper {
  position: relative;
  background: none; /* keep transparent */
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.profile-photo-wrapper::before {
  content: "";
  position: absolute;
  inset: -3px;               /* ring thickness */
  border-radius: 50%;
  background:
    conic-gradient(from 210deg,
      #22c55e, #4cc9f0, #8ab4ff, #22c55e);
  z-index: -1;
  filter: blur(.3px);
  opacity: .9;
}
.profile-photo-wrapper::after {
  /* subtle exterior glow */
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(76,201,240,.15), transparent 70%);
  z-index: -2;
}

/* Gentle entrance animation (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  #home .hero-text {
    opacity: 0; transform: translateY(10px);
    animation: hero-in .6s ease-out .05s forwards;
  }
  #home .hero-media {
    opacity: 0; transform: translateY(12px) scale(.98);
    animation: media-in .7s ease-out .1s forwards;
  }
  @keyframes hero-in {
    to { opacity: 1; transform: none; }
  }
  @keyframes media-in {
    40% { transform: translateY(6px) scale(1.005); }
    to { opacity: 1; transform: none; }
  }
}

/* Responsive fine-tuning */
@media (max-width: 600px) {
  #home { border-radius: 0; }
  #home .hero-text h1 { font-size: clamp(1.75rem, 6.5vw, 2.2rem); }
  #home .tagline { font-size: 1.05rem; }
}
@media (min-width: 860px) {
  #home .hero-text h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
}

/* ===== Scroll-hide header ===== */
header {
  transition: transform 0.35s ease;
}

header.hide {
  transform: translateY(-100%);
}

/* ===========================
   HERO – Premium polish (drop-in)
=========================== */

/* Layered glow + subtle texture */
#home{
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding-top: 2.6rem;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(76,201,240,.18), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(34,197,94,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
#home::after{
  /* ultra-subtle vertical grain */
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px);
  mix-blend-mode: soft-light;
  opacity:.25;
}

/* Headline: animated gradient + shine sweep */
#home .hero-text h1{
  line-height: 1.05;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #4cc9f0 0%, #8ab4ff 50%, #4cc9f0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroInk 1.8s ease forwards;
  position: relative;
  display: inline-block;
}
#home .hero-text h1::after{
  /* soft gloss sweep */
  content:"";
  position:absolute; inset:0; border-radius:.15em;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  will-change: transform;
  mix-blend-mode: screen;
  animation: heroShine 1.6s .2s ease both;
}
@keyframes heroInk{ from{ background-position: 100% 0; } to{ background-position: 0 0; } }
@keyframes heroShine{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }

/* Subhead (bold line) with animated accent underline */
#home .hero-text p:first-of-type strong{
  position: relative; font-weight: 800;
}
#home .hero-text p:first-of-type strong::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4cc9f0);
  box-shadow: 0 6px 18px rgba(76,201,240,.35);
  animation: lineGrow .8s .2s ease forwards;
}
@keyframes lineGrow{ to{ width: 58%; } }

/* Tagline: friendlier color + slight size bump */
#home .tagline{
  font-size: clamp(1.05rem, 1.2rem, 1.25rem);
  color: color-mix(in srgb, var(--primary) 46%, #0ea5e9 26%);
}

/* CTA buttons: gradient, glow, and a classy focus */
#home .cta .btn{
  position: relative; transform: translateZ(0);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
#home .cta .btn:hover,
#home .cta .btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(76,201,240,.22);
  filter: saturate(1.06);
}
#home .cta .btn.primary{
  background: linear-gradient(90deg, #8ab4ff, #4cc9f0);
  border: 1px solid rgba(138,180,255,.5);
  font-weight: 800;
}
#home .cta .btn.outline{
  border: 1px solid rgba(138,180,255,.55);
  color: #8ab4ff;
}
#home .cta .btn.outline:hover,
#home .cta .btn.outline:focus-visible{
  background: rgba(138,180,255,.12);
}

/* Avatar: conic ring with slow, subtle motion + soft halo */
.profile-photo-wrapper{
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.24);
  isolation: isolate;
}
.profile-photo-wrapper::before{
  content:"";
  position:absolute; inset:-3px; border-radius:50%;
  background: conic-gradient(from 210deg, #22c55e, #4cc9f0, #8ab4ff, #22c55e);
  z-index:-1; filter: blur(.35px); opacity:.95;
  animation: slowSpin 18s linear infinite;
}
.profile-photo-wrapper::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(76,201,240,.16), transparent 70%);
  z-index:-2;
}
@keyframes slowSpin{
  from{ transform: rotate(0deg); }
  to{   transform: rotate(360deg); }
}

/* Gentle entrance for text + media (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  #home .hero-text{ opacity:0; transform: translateY(10px); animation: heroIn .55s ease-out .05s forwards; }
  #home .hero-media{ opacity:0; transform: translateY(12px) scale(.985); animation: mediaIn .6s ease-out .1s forwards; }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }
  @keyframes mediaIn{ 40%{ transform: translateY(6px) scale(1.005); } to{ opacity:1; transform:none; } }
}

/* Mobile/desktop sizing polish */
@media (max-width: 600px){
  #home{ border-radius: 0; }
  #home .hero-text h1{ font-size: clamp(1.8rem, 7vw, 2.3rem); }
  #home .tagline{ font-size: 1.06rem; }
}
@media (min-width: 860px){
  #home .hero-text h1{ font-size: clamp(2.2rem, 3.4vw, 3rem); }
}

/* ===========================
   HERO – Premium polish (with descender fix)
=========================== */

/* Layered glow + subtle texture */
#home {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding-top: 2.6rem;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(76,201,240,.18), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(34,197,94,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
#home::after {
  /* ultra-subtle vertical grain */
  content: "";
  position: absolute; inset: 0; pointer-events: none; border-radius: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 10px);
  mix-blend-mode: soft-light;
  opacity: .25;
}

/* Headline: animated gradient + shine sweep */
#home .hero-text h1 {
  line-height: 1.15; /* fix for descenders like g, j, p, y */
  letter-spacing: .2px;
  background: linear-gradient(90deg, #4cc9f0 0%, #8ab4ff 50%, #4cc9f0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* descender fix */
  color: transparent;
  animation: heroInk 1.8s ease forwards;
  position: relative;
  display: inline-block;
}
#home .hero-text h1::after {
  /* soft gloss sweep */
  content: "";
  position: absolute; inset: 0; border-radius: .15em;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  will-change: transform;
  mix-blend-mode: screen;
  animation: heroShine 1.6s .2s ease both;
}
@keyframes heroInk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes heroShine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Subhead (the bold line) with animated accent underline */
#home .hero-text p:first-of-type strong {
  position: relative; font-weight: 800;
}
#home .hero-text p:first-of-type strong::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4cc9f0);
  box-shadow: 0 6px 18px rgba(76,201,240,.35);
  animation: lineGrow .8s .2s ease forwards;
}
@keyframes lineGrow { to { width: 58%; } }

/* Tagline */
#home .tagline {
  font-size: clamp(1.05rem, 1.2rem, 1.25rem);
  color: color-mix(in srgb, var(--primary) 46%, #0ea5e9 26%);
}

/* CTA buttons */
#home .cta .btn {
  position: relative; transform: translateZ(0);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
#home .cta .btn:hover,
#home .cta .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(76,201,240,.22);
  filter: saturate(1.06);
}
#home .cta .btn.primary {
  background: linear-gradient(90deg, #8ab4ff, #4cc9f0);
  border: 1px solid rgba(138,180,255,.5);
  font-weight: 800;
}
#home .cta .btn.outline {
  border: 1px solid rgba(138,180,255,.55);
  color: #8ab4ff;
}
#home .cta .btn.outline:hover,
#home .cta .btn.outline:focus-visible {
  background: rgba(138,180,255,.12);
}

/* Avatar with conic ring */
.profile-photo-wrapper {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,.24);
  isolation: isolate;
}
.profile-photo-wrapper::before {
  content: "";
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 210deg, #22c55e, #4cc9f0, #8ab4ff, #22c55e);
  z-index: -1; filter: blur(.35px); opacity: .95;
  animation: slowSpin 18s linear infinite;
}
.profile-photo-wrapper::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(76,201,240,.16), transparent 70%);
  z-index: -2;
}
@keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.profile-photo-wrapper img, #heroImage {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}

/* Entrance animations */
@media (prefers-reduced-motion: no-preference) {
  #home .hero-text { opacity: 0; transform: translateY(10px); animation: heroIn .55s ease-out .05s forwards; }
  #home .hero-media { opacity: 0; transform: translateY(12px) scale(.985); animation: mediaIn .6s ease-out .1s forwards; }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
  @keyframes mediaIn { 40% { transform: translateY(6px) scale(1.005); } to { opacity: 1; transform: none; } }
}

/* Responsive fine-tuning */
@media (max-width: 600px) {
  #home { border-radius: 0; }
  #home .hero-text h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
  #home .tagline { font-size: 1.06rem; }
}
@media (min-width: 860px) {
  #home .hero-text h1 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
}

/* === Fix desktop clipping of descenders (g, j, p, y) === */
#home,
.hero-grid,
.hero-text {
  overflow: visible; /* make sure no ancestor clips the h1 */
}

#home .hero-text h1 {
  -webkit-text-fill-color: transparent; /* required with background-clip:text */
  line-height: 1.2;                     /* a bit more room for descenders */
  display: inline-block;                /* isolates the line box */
  padding-bottom: 0.2em;                /* extra safety space at bottom */
}

/* Give a little more room at larger sizes */
@media (min-width: 1024px) {
  #home .hero-text h1 {
    padding-bottom: 0.28em;
  }
}

/* If your browser still clips, this transparent stroke helps WebKit */
@supports (-webkit-text-stroke: 0.02em transparent) {
  #home .hero-text h1 {
    -webkit-text-stroke: 0.02em transparent;
  }
}
/* Hero CTA group with three buttons */
#home .cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

#home .cta .btn-resume {
  background: #22c55e;
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  padding: .65rem 1rem;
  border: none;
}
#home .cta .btn-resume:hover,
#home .cta .btn-resume:focus-visible {
  background: #1aa34a;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(34,197,94,.3);
}

.about-photo {
  margin-top: 1rem;
  text-align: center;
}

.about-photo img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-photo img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Prevent unwanted horizontal scrolling on mobile */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make sure grid children shrink correctly */
.hero-text,
.hero-media,
.about-grid,
.about-card,
.about-aside {
  min-width: 0;
}

/* Ensure images never overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   Projects – Clean Portfolio Style
=========================== */

#projects .projects {
  display: grid;
  gap: 1.5rem;
}

#projects .card {
  border: none !important;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#projects .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
}

#projects .card h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
}

#projects .card p {
  margin: 0;
  line-height: 1.65;
  font-size: 1rem;
  color: #374151;
}

/* Dark mode variant */
body.dark #projects .card {
  background: rgba(17,24,39,0.85);
  color: var(--text);
}
body.dark #projects .card h3 {
  color: #e6edf3;
}
body.dark #projects .card p {
  color: #cfd6e4;
}

/* ===========================
   Project Tech Pills – Glow Style
=========================== */
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .5rem;
}

.project-tech .pill {
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  transition: transform .25s ease, box-shadow .35s ease, filter .35s ease;
  position: relative;
}

/* Colored pills with glow */
.project-tech .pill:nth-child(1) {
  background: #3b82f6; /* Blue */
  box-shadow: 0 0 12px rgba(59,130,246,.6);
}
.project-tech .pill:nth-child(2) {
  background: #10b981; /* Green */
  box-shadow: 0 0 12px rgba(16,185,129,.6);
}
.project-tech .pill:nth-child(3) {
  background: #f59e0b; /* Amber */
  box-shadow: 0 0 12px rgba(245,158,11,.6);
}
.project-tech .pill:nth-child(4) {
  background: #8b5cf6; /* Purple */
  box-shadow: 0 0 12px rgba(139,92,246,.6);
}
.project-tech .pill:nth-child(5) {
  background: #ef4444; /* Red */
  box-shadow: 0 0 12px rgba(239,68,68,.6);
}

/* Hover intensifies glow */
.project-tech .pill:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 0 18px currentColor;
}

/* ===========================
   Experience – Clean Cards
=========================== */
#experience .experience {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

#experience .card {
  border: none;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .25s ease;
}

#experience .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

#experience .card h3 {
  margin-top: 0;
  margin-bottom: .4rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #111827;
}

#experience .card p em {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  background: rgba(76,201,240,.12);
  color: #0b3a49;
  font-style: normal;
}

#experience .card ul {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.55;
}

#experience .card ul li {
  margin-bottom: .4rem;
}

/* Dark mode */
body.dark #experience .card {
  background: rgba(17,24,39,0.9);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

body.dark #experience .card h3 {
  color: #e6edf3;
}

body.dark #experience .card p em {
  background: rgba(76,201,240,.18);
  color: #d9ebf7;
}

/* ===========================
   Certifications – Glow Pills
=========================== */
.certs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center; /* Center the pills horizontally */
  margin-top: 1rem;
  padding: 0 1rem; /* Optional: add padding for spacing */
}

.cert-pill {
  display: inline-flex;   /* Align the pill as an inline flex item */
  justify-content: center; /* Ensure the text is centered inside */
  align-items: center;     /* Vertically center the text */
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;  /* Dark text color for visibility */
  background-color: #fff;  /* Set background to white */
  transition: transform 0.25s ease, box-shadow 0.35s ease, filter 0.35s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.cert-pill:hover {
  transform: scale(1.05);  /* Slightly scale up the card on hover */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  cursor: pointer; /* Add a pointer cursor for better interactivity */
}

/* Certs container for larger screens (PC) */
@media (min-width: 860px) {
  .certs {
    display: flex;
    flex-wrap: wrap; /* Allow the items to wrap into rows */
    gap: 1rem; /* Space between the cards */
  }

  /* First row (POS Systems and Network & System Support) */
  .cert-pill.pos-systems,
  .cert-pill.network-system-support {
    flex: 1 1 48%; /* Each takes 48% of the row width */
  }

  /* Second row (Bilingual and Ongoing Professional Development) */
  .cert-pill.bilingual,
  .cert-pill.ongoing {
    flex: 1 1 48%; /* Each takes 48% of the row width */
  }

  /* Third row (CompTIA IT Fundamentals and Verifone Certified Technician) */
  .cert-pill.comtia,
  .cert-pill.verifone {
    flex: 1 1 48%; /* Each takes 48% of the row width */
  }
}

/* Certs container for smaller screens (Mobile) */
@media (max-width: 859px) {
  .certs {
    display: block; /* Stack items vertically on mobile */
    padding: 0 1rem; /* Add padding to the container */
  }

  .cert-pill {
    width: 100%; /* Full width for each item on mobile */
    margin-bottom: 1rem; /* Space between pills */
    color: #333;  /* Ensure dark text color */
    background-color: #fff;  /* White background for better contrast */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Slight shadow to make pills stand out */
    text-align: center; /* Center the text inside the pill */
  }
}


/* For mobile screens (to ensure paragraphs stack properly without breaking issues) */
@media (max-width: 859px) {
  .certs {
    display: block; /* Stack the content on smaller screens */
    gap: 1rem; /* Space between the cards */
  }

  .card {
    margin-bottom: 1rem; /* Add spacing between cards */
    padding: 1rem; /* Padding inside the cards */
    border-radius: 8px; /* Rounded corners for cards */
    background-color: #fff; /* White background for cards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for better visibility */
  }

  .card p {
    margin-bottom: 0.75rem; /* Space between the paragraphs */
  }
}




/* Colors */
.cert-pill.blue   { background: #3b82f6; box-shadow: 0 0 12px rgba(59,130,246,.6); }
.cert-pill.green  { background: #10b981; box-shadow: 0 0 12px rgba(16,185,129,.6); }
.cert-pill.orange { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.6); }
.cert-pill.purple { background: #8b5cf6; box-shadow: 0 0 12px rgba(139,92,246,.6); }
.cert-pill.teal   { background: #06b6d4; box-shadow: 0 0 12px rgba(6,182,212,.6); }
.cert-pill.gray   { background: #6b7280; box-shadow: 0 0 12px rgba(107,114,128,.6); }

/* Hover effects */
.cert-pill:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 0 18px currentColor;
}

/* ===========================
   Light theme — ensure shadows on desktop
=========================== */

/* Elevate cards in LIGHT theme on wider screens */
@media (min-width: 861px){
  body:not(.dark) .card,
  body:not(.dark) .contact-card,
  body:not(.dark) #experience .card,
  body:not(.dark) .timeline-content.card {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 8px 24px rgba(15,23,42,0.10), 0 1px 0 rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
  }
}



/* Optional: light theme surface tint so it’s not “pure white” on big monitors */
@media (min-width: 861px){
  body:not(.dark) section .card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  }
}

/* ===========================
   Light theme — stronger card shadows on desktop
=========================== */
@media (min-width: 861px){
  body:not(.dark) .card,
  body:not(.dark) .contact-card,
  body:not(.dark) #experience .card,
  body:not(.dark) .timeline-content.card {
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);

    /* Darker, deeper shadow */
    box-shadow: 
      0 6px 20px rgba(0,0,0,0.15),
      0 2px 6px rgba(0,0,0,0.08);
  }
}

/* ===========================
   Light mode header + mobile nav overrides
   (fixes header staying dark after switching to light)
=========================== */

/* Header (desktop + tablet) */
body:not(.dark) header{
  /* light frosted look */
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--light-text);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Brand + nav links */
body:not(.dark) .brand{ color: var(--light-text); }
body:not(.dark) header .nav a{
  color: var(--light-text);
  opacity: .9;
}
body:not(.dark) header .nav a:hover,
body:not(.dark) header .nav a:focus-visible{
  opacity: 1;
  background: rgba(0,0,0,0.06);
  box-shadow: 0 0 0 3px var(--ring); /* your existing focus ring */
}
body:not(.dark) header .nav a.active,
body:not(.dark) header .nav a[aria-current="page"]{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}

/* Theme toggle / header buttons */
body:not(.dark) .actions .btn,
body:not(.dark) .menu-toggle{
  background: rgba(0,0,0,0.04);
  color: var(--light-text);
  border: 1px solid rgba(0,0,0,0.12);
}

/* Mobile nav panel (the dropdown/overlay on small screens) */
@media (max-width: 860px){
  body:not(.dark) .nav{
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.12);
  }
  body:not(.dark) .nav a{
    color: var(--light-text);
  }
  body:not(.dark) .nav a:hover,
  body:not(.dark) .nav a:focus-visible{
    background: rgba(0,0,0,0.06);
  }
}