:root{
  --bg: #070A16;
  --bg2: #0B1230;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);

  --accent: #9ED7FF;
  --accent-2: #C7A6FF;

  --shadow: 0 18px 55px rgba(0,0,0,0.45);
  --radius: 18px;

  --container: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
   font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
  overflow-x:hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
h1, h2, h3, .headline{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
}


a{ color: inherit; text-decoration: none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.muted{ color: var(--muted); }
.small{ font-size: 13px; line-height: 1.55; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  border:0;
}


/* ===== Hero Wrap ===== */
.hero-wrap{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(1200px 800px at 12% 5%, rgba(158,215,255,0.16), transparent 55%),
    radial-gradient(900px 600px at 85% 10%, rgba(199,166,255,0.14), transparent 55%),
    radial-gradient(1000px 700px at 40% 95%, rgba(158,215,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.hero-wrap .section{
  position: relative;
  z-index: 2;
  background: transparent;
}

/* ===== Particles canvas ===== */
#particles{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

/* ===== Scroll progress ===== */
#scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2000;
  background: rgba(255,255,255,0.10);
}



#scroll-progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 0 999px 999px 0;
}

/* ===== Header / nav ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: none;
}

.site-header,
.brand,
.brand-text{
  color: var(--text);
}

.nav-shell{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.brand-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 6px rgba(158,215,255,0.08);
}

.nav{
  display:flex;
  gap: 18px;
  align-items:center;
}

.nav-link{
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-link:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.nav-link.active{
  color: var(--text);
  background: rgba(158,215,255,0.14);
  border: 1px solid rgba(158,215,255,0.22);
}

.nav-toggle{
  display:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.hamburger{
  width: 20px; height: 2px;
  background: rgba(255,255,255,0.85);
  display:block;
  position: relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width: 20px; height: 2px;
  background: rgba(255,255,255,0.85);
}
.hamburger::before{ top: -6px; }
.hamburger::after{ top: 6px; }

.nav-drawer{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 10px;
}
.drawer-link{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--muted);
}
.drawer-link:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* ===== Page Content ===== */
.page-content{
  background:#ffffff;
}

.page-content .section{
  background:#ffffff;
  color:#0b1020;
}

.page-content .muted{
  color: rgba(11,16,32,0.65);
}

/* ===== Sections ===== */
.section{
  position: relative;
  z-index: 1;
  padding: 74px 0;
}
.section.hero{ padding: 64px 0 48px; }

.section-head{
  margin-bottom: 22px;
  text-align: center;
}
.section-head h2{
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.section-head p{
  margin-inline: auto;
  max-width: 70ch;
}

/* ===== Hero ===== */
#home{
  min-height: 100vh;
  display:flex;
  align-items:center;
}

@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
}

.hero-copy{ max-width: 560px; }

.eyebrow{
  margin: 0 0 10px;
  margin-bottom: 55px;
  animation: heroFadeUp .9s ease-out .25s forwards;
  font-size: 14px;
  color: rgba(255,255,255,0.76);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.headline{
  margin: 0 0 14px;
  margin-bottom: 12px;
  animation: heroFadeUp .9s ease-out .25s forwards;
  font-size: clamp(36px, 4.8vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.03;
  color: rgba(158,215,255,0.95);
}

.lead{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.80);
  max-width: 64ch;
  animation: heroFadeUp .9s ease-out .25s forwards;
}

.accent{ color: var(--accent); font-weight: 600; }

.cta-row{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
  opacity:0;
  animation: heroFadeUp .9s ease-out .25s forwards;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: linear-gradient(135deg, rgba(158,215,255,0.95), rgba(199,166,255,0.85));
  color: rgba(10, 12, 24, 0.92);
  box-shadow: 0 14px 30px rgba(158,215,255,0.16);
}

.btn-ghost{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
}

.hero-card{
  width: 340px;
  max-width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.55);
  transform: translateX(-18px);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

.hero-card > *{ position: relative; z-index: 1; }

.avatar-wrap{
  width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.14);
}

.headshot{
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid rgba(255,255,255,0.88);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.hero-icons{
  display:flex;
  gap: 14px;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
}

.icon-btn{
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  line-height: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  position: relative;
}

.icon-btn img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  display:block;
  filter: brightness(0) invert(1);
  opacity: 0.90;
}

.icon-btn:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 20px 50px rgba(0,0,0,0.50);
}

.icon-btn:hover img{
  filter: none;
  opacity: 1;
}


.experience-head{
  position: relative;
  padding: 10px 0px;
  margin-bottom: 0px;
margin: 0 0 8px;
z-index: 2;


  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      #2d3053 0%,
      #2a365f 100%
    );

  color: #ffffff;
  overflow:hidden;
}

.experience-head h2{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 450;
  letter-spacing: -0.015em;
  color: white;
}


.experience-head p{
  color: rgba(255,255,255,0.75);
}

.experience-head::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.06),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255,255,255,.04),
      transparent 40%
    );

  pointer-events:none;
}



/* ===== Cards / grids ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(11,16,32,0.08);
  background: #ffffff;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(11,16,32,0.06);
  color:#0b1020;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}

.card-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.card h3{
  margin: 0;
  font-size: 16px;
}

.bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,16,32,0.75);
  line-height: 1.65;
}
.bullets li{ margin: 6px 0; }

.tag-row{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,16,32,0.08);
  background: rgba(11,16,32,0.04);
  color: rgba(11,16,32,0.72);
}

.card-actions{ margin-top: 14px; }
.link{
  color: white;
  font-weight: 600;
  font-size: 14px;
}
.link:hover{ text-decoration: underline; }

/* ===== Project Cards ===== */
#projects .card{
  padding:26px;
}

.card-image{
  margin-bottom: 16px;
}

.card-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.15);
  display: block;
}

.project-card{
  cursor: pointer;
  will-change: transform;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}

.project-card:focus-visible{
  outline: 3px solid rgba(158,215,255,0.65);
  outline-offset: 4px;
}

.project-card:not(.active):hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(11,16,32,.18);
}

/* Nole Path Card Variant */
.card.card-nolepath{
  background: linear-gradient(145deg,#6a2433,#8C3A4A);
  color:white;
  border:none;
}

.card.card-nolepath h2{ color:#d4b46a; align-items: center; }

.card.card-nolepath .muted{
  color: rgba(255,255,255,.88);
}

.card.card-nolepath .tag{
  background:#d4b46a;
  color:#3a2a00;
}

.card.card-nolepath .link{
  color:#d4b46a;
  font-weight:600;
}

.card.card-nolepath:not(.active):hover{
  box-shadow: 0 30px 70px rgba(120,47,64,.45);
}

/* TheraOffice Card Variant */
.card.card-thera{
  background: linear-gradient(145deg,#168a66,#1FA67A);
  color:white;
  border:none;
}

.card.card-thera h3{ color:white; }

.card.card-thera .muted{
  color: rgba(255,255,255,.88);
}

.card.card-thera .tag{
  background:white;
  color:#157A59;
}

.card.card-thera .link{
  color:#DFFFEF;
  font-weight:600;
}

.card.card-thera:not(.active):hover{
  box-shadow: 0 30px 70px rgba(31,166,122,.45);
}

.projects-head{
  
  position: relative;
  padding: 10px;
  border-radius: 10px;
  color: white;
  background:
    linear-gradient(
      135deg,
      rgba(75, 20, 30, 0.85),   /* garnet tint */
      rgba(8, 78, 57, 0.71)   /* green tint */
    );

  margin-bottom: 10px;
  overflow: hidden;
}
.projects-head::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(120, 32, 48, 0.511),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(20, 150, 111, 0.666),
      transparent 40%
    );

  opacity:.55;
  pointer-events:none;
}
.projects-head h2{
  position:relative;
  z-index:2;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 450;
  letter-spacing: -0.015em;
  color: white;

  margin: 0 0 8px;

  margin-bottom: 0px;

}


.projects-head p{
  position:relative;
  z-index:2;
}


/* ===== Project Modal ===== */


#projects{
  position: relative;
  z-index: 1;
}

/* ===== Project Modal (ROBUST: overlay + separate modal host) ===== */
.project-overlay{
  position: fixed;
  inset: 0;
  background: rgba(5,8,20,.70);
  backdrop-filter: blur(8px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;

  z-index: 1200;
}
.project-overlay.active{
  opacity: 1;
  pointer-events: auto;
}


/* The modal host sits ABOVE the overlay no matter what */
.project-modal-host{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1300;
}

/* The cloned modal card */
.project-modal-card{
  width: min(980px, 92vw);
  background: white;
  color: #0b1020;
  max-height: 88vh;
  overflow: auto;
  border-radius: 22px;
  box-shadow: 0 80px 180px rgba(0,0,0,.75);
  cursor: default;
  position:relative;
  /* ensures it stays crisp even with backdrop-filter behind */
  isolation: isolate;
  animation: modalPop .28s cubic-bezier(.2,.8,.2,1);
}

@keyframes modalPop{
  from{
    transform: scale(.92);
    opacity:0;
  }
  to{
    transform: scale(1);
    opacity:1;
  }
}


.project-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(11,16,32,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(11,16,32,0.90);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
}

.project-close:hover{
  transform: translateY(-1px);
}

/* ===== Modal image should not be cropped ===== */
.project-modal-card .card-image img{
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
}

/* Disable hover lift on the modal clone */
.project-modal-card:hover{
  transform: none !important;
}

/* Lock scroll when open */
body.modal-open{
  overflow: hidden;
}


/* ===== Skills ===== */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.skill-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}
.skill-card h3{ margin: 0 0 10px; font-size: 16px; }


/* CONTACT section header */
#contact .section-head p{
  font-size: 18px;
  margin-bottom: 48px;
}

/* Grid */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 720px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ---------- ONE unified card system ---------- */
.contact-card{
  /* theme tokens (override per card) */
  --card-bg: #ffffff;
  --card-fg: #0b1020;
  --card-sub: rgba(11,16,32,0.72);
  --card-border: rgba(11,16,32,0.06);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 10px;

  text-align:center;
  text-decoration:none;

  border-radius: 20px;
  padding: 42px;
  min-height: 160px;

  background: var(--card-bg);
  color: var(--card-fg);
  border: 1px solid var(--card-border);

  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 10px 30px rgba(0,0,0,0.06);

  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s cubic-bezier(.2,.8,.2,1),
              background .25s ease;
}

.contact-card:hover{
  transform: translateY(-10px);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.08),
    0 28px 60px rgba(0,0,0,0.10);
}

/* Typography — SAME for every card */
.contact-card h3{
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: inherit;
}

.contact-card .contact-sub{
  margin: 0;
  font-size: 16px;
  color: var(--card-sub);
}

.contact-card .contact-sub a{
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

/* ---------- Brand themes: ONLY tokens change ---------- */
.card-linkedin{
  --card-bg: #0A66C2;
  --card-fg: #ffffff;
  --card-sub: rgba(255,255,255,0.92);
  --card-border: transparent;
}
.card-linkedin:hover{
  background: #0958a8;
}

.card-github{
  --card-bg: #0d1117;
  --card-fg: #ffffff;
  --card-sub: rgba(255,255,255,0.86);
  --card-border: transparent;
}
.card-github:hover{
  background: #161b22;
}


/* ===== Footer ===== */
.footer{
  position: relative;
  z-index: 1;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: black;
  backdrop-filter: blur(12px);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  text-align:center;
}
.backtop{
  color: rgba(255,255,255,0.78);
  font-weight: 600;
}
.backtop:hover{ color: var(--text); }

/* ===== Experience: always vertical list ===== */
#experience .cards{
  grid-template-columns: 1fr;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #home{ align-items: flex-start; }
  .cards{ grid-template-columns: 1fr; }
  .skills-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }

  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .hero-card{ transform: none; }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-card{
    justify-self: center;
    width: min(320px, 92vw);
  }
  .avatar-wrap{ width: 220px; }
}

/* ===== Extra small phones ===== */
@media (max-width: 720px){
  .container{
    width: min(var(--container), calc(100% - 28px));
  }

  #projects .cards{
    grid-template-columns: 1fr;
  }

  #projects .card{
    padding: 22px;
  }

  .card-image img{
    height: 200px;
  }

  .nav-shell{
    padding: 12px 0;
  }

  .headline{
    font-size: clamp(30px, 8vw, 44px);
  }
}