:root{
  --bg:#0b0c10;
  --bg-2:#0e1016;
  --card:#12131a;
  --text:#ecebf1;
  --muted:#a9a7b3;
  --stroke:#222433;

  /* Soft pink & purple accents */
  --pink:#f6b1d0;
  --purple:#bca7ff;
  --brand:var(--pink);
  --brand-2:var(--purple);

  --radius:18px;
  --gap:1.25rem;
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Futura LT','Futura',system-ui,-apple-system,sans-serif;
  font-weight:100;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #141729 0%, var(--bg) 65%);
  line-height:1.6;
  padding-top: var(--header-h);     /* keep content below the fixed header */
  scroll-behavior:smooth;
}

/* Layout */
.container{max-width:1100px;margin:auto;padding:2rem 1.25rem}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}
.grid ul{list-style:none;padding:0;margin:0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}

/* Header (fixed; hides on scroll down) */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 .95rem;
  background:rgba(11,12,16,.78);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(10px);
  transition:transform .4s ease, background .3s ease;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:.3px}
.brand img{width:40px;height:40px;display:block;align-self:center}
.site-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.site-nav a{color:var(--text);text-decoration:none;padding:.6rem .9rem;border-radius:10px;border:1px solid transparent}
.site-nav a:hover{border-color:var(--stroke);background:rgba(255,255,255,.04)}
.site-nav a.active{border-color:var(--stroke);background:rgba(255,255,255,.06)}
.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:none;cursor:pointer;padding:.5rem;z-index:1001}
.mobile-menu-toggle span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px, 7px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -7px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:12px;padding:.72rem 1.1rem;text-decoration:none;border:1px solid var(--stroke)}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#140f17;border:none;font-weight:700}
.btn--ghost{background:transparent;color:var(--text)}
.link-more{color:var(--brand-2);text-decoration:none;font-weight:600}
.link-more:hover{text-decoration:underline}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:2rem;padding-top:2rem}
.hero__text h1{font-size:clamp(28px,4.6vw,46px);line-height:1.15;margin:0 0 .6rem}
.accent{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.05rem;max-width:48ch}
.hero__cta{display:flex;gap:.75rem;margin-top:1rem}
.hero__media{position:relative;display:flex;justify-content:center}
.hero__photo{width:70%;border-radius:var(--radius);display:block}
.hero__logo{position:absolute;right:-10px;bottom:-10px;width:72px;height:72px;padding:.6rem;background:var(--bg-2);border:1px solid var(--stroke);border-radius:14px}
@media (max-width:900px){.hero{grid-template-columns:1fr} .hero__logo{right:10px;bottom:10px}}

/* Cards/projects */
.card{
  padding:1rem;border:1px solid var(--stroke);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor:pointer;
}
.card a{
  color:var(--text);
  text-decoration:none;
  display:block;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(188,167,255,0.45);
  box-shadow:0 8px 20px rgba(12,13,24,0.3);
}
.project__thumb {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--card);
}
.project__thumb img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project h3{margin:.6rem 0 .2rem;font-size:1.05rem}
.project p{color:var(--muted);margin:0}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 2rem}
.tabs a{
  padding:.55rem .8rem;border:1px solid var(--stroke);border-radius:999px;text-decoration:none;color:var(--text);
  background:linear-gradient(90deg,rgba(246,177,208,.12),rgba(188,167,255,.12));
}
.tabs a:hover{background:linear-gradient(90deg,rgba(246,177,208,.22),rgba(188,167,255,.22))}
.folio-section{margin:2.5rem 0}
.folio-section h2{margin-bottom:.6rem}

/* About */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
.about__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.about__gallery img{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid var(--stroke)}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__gallery{grid-template-columns:repeat(3,1fr)}}

/* Resume */
.resume{margin-top:3.4rem}
.resume__grid{
  display:flex;
  flex-direction:column;
  gap:1.8rem;
}
.resume-card{
  position:relative;
  padding:1.7rem 1.6rem;
  border-radius:22px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
  box-shadow:0 8px 24px rgba(12,13,24,0.25);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.resume-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(12,13,24,0.35);
}
.resume-card h2{
  position:relative;
  margin:0 0 .9rem;
  font-size:1.16rem;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.resume-card--experience{order:1}
.resume-card--awards{order:2}
.resume-card--education{order:3}
.resume-card--tools{order:4}
.job{position:relative;margin-bottom:1rem}
.job:last-of-type{margin-bottom:0}
.job h4{margin:.15rem 0 .3rem;font-size:1.05rem;color:var(--text)}
.job .muted{font-size:.92rem;margin-bottom:.45rem;display:block;color:rgba(233,229,248,0.68)}
.job p{color:var(--muted);margin:0 0 .55rem}
.job ul{margin:0;padding-left:1.2rem}
.job ul li{margin-bottom:.4rem;color:var(--muted);font-size:.98rem}
.job ul li:last-child{margin-bottom:0}
.resume-card--tools ul{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.resume-card--tools li{border:1px solid rgba(246,177,208,0.45);border-radius:999px;padding:.38rem .75rem;font-size:.95rem;color:var(--text);background:rgba(188,167,255,0.12);transition:background .25s ease,border-color .25s ease,transform .25s ease}
.resume-card--tools li:hover{background:rgba(246,177,208,0.22);border-color:rgba(246,177,208,0.65)}
.resume-card--tools li:active{transform:scale(.97)}

/* About text tweaks */
.about__text p{margin-bottom:.9rem;color:var(--muted)}

.list{margin:.3rem 0 0 0;padding-left:1.2rem}
.list li{margin:.25rem 0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.4rem 0 0 0;list-style:none}
.tags li{border:1px solid var(--stroke);border-radius:999px;padding:.35rem .6rem}

/* Form */
.form{max-width:640px;margin-top:1rem}
.form label{display:block;margin-bottom:.9rem}
.form input[type="text"],
.form input[type="email"],
.form textarea{
  width:100%;padding:.9rem;border-radius:12px;background:#10121a;border:1px solid var(--stroke);
  color:var(--text);outline:none
}
.form textarea{resize:vertical}
.form .hp{display:none !important}
.form__status{min-height:1.2em;color:var(--brand-2);margin-top:.6rem}
.muted{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--stroke);padding:1.25rem;text-align:center;color:var(--muted);margin-top:2rem}

/* Back-to-Top Button */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #d3c7ff;              /* light lavender */
  font-size: 20px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.to-top:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Mobile navigation */
@media (max-width:768px){
  .site-header{padding:0 1rem;flex-wrap:wrap;height:auto;min-height:var(--header-h)}
  .mobile-menu-toggle{display:flex;order:3;margin-left:auto}
  .brand{order:1}
  .site-nav{
    order:4;
    width:100%;
    flex-direction:column;
    gap:.5rem;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .4s ease, opacity .3s ease, padding .3s ease;
    padding:0 0;
  }
  .site-nav.active{
    max-height:500px;
    opacity:1;
    padding:1rem 0;
  }
  .site-nav a{
    width:100%;
    text-align:center;
    padding:.85rem 1rem;
    font-size:15px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.02);
  }
  .site-nav a:hover, .site-nav a.active{
    background:rgba(255,255,255,.08);
    border-color:var(--brand);
  }
}

/* Slightly reduce logo on small screens to keep header balanced */
@media (max-width:480px){
  .brand img{width:34px;height:34px}
  .brand span{font-size:14px}
  .btn{padding:.6rem .85rem;font-size:14px}
}

/* Lightbox Modal */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  overflow-y: auto;
  padding: 2rem 1rem;
}

.lightbox.active {
  display: block;
}

.lightbox__close {
  position: fixed;
  top: 20px;
  right: 35px;
  color: var(--text);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  transition: color 0.3s ease;
}

.lightbox__close:hover {
  color: var(--pink);
}

.lightbox__content {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lightbox__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .lightbox__close {
    top: 10px;
    right: 15px;
    font-size: 32px;
  }
  
  .lightbox {
    padding: 1rem 0.5rem;
  }
}