:root{
  --bg:#12060c;
  --bg2:#0a0508;
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.68);
  --soft:rgba(255,255,255,0.08);
  --soft2:rgba(255,255,255,0.06);
  --stroke:rgba(255,62,165,0.28);
  --accent:#ff3ea5;
  --accent2:#ff8fd0;
  --shadow:0 30px 80px rgba(0,0,0,0.55);
  --shadow2:0 16px 60px rgba(255,62,165,0.18);
  --radius:22px;
  --radius2:30px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 15% 10%, rgba(255,62,165,0.18), transparent 55%),
              radial-gradient(900px 600px at 90% 30%, rgba(255,143,208,0.12), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #080407 100%);
  color:var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-2;}
.bg-grid{
  position:absolute; inset:-10%;
  background-image:url("../assets/bg-grid.svg");
  background-size:740px 740px;
  opacity:0.28;
  transform:rotate(6deg) scale(1.08);
  filter:blur(0px);
  animation:gridFloat 16s ease-in-out infinite;
}

/* Projects: use a 2x-tall background tile where the second "picture" is the
   same grid but vertically flipped / mirrored in feel, so repetition reads as
   a clean transition instead of an obvious copy. */
body[data-page="projects"] .bg-grid{
  background-image:url("../assets/bg-grid-projects-stack.svg");
  background-size:740px 1480px;
}
@keyframes gridFloat{
  0%,100%{transform:rotate(6deg) translateY(0) scale(1.08)}
  50%{transform:rotate(6deg) translateY(-10px) scale(1.08)}
}
.bg-orb{
  position:absolute;
  width:520px; height:520px; border-radius:999px;
  filter: blur(24px);
  opacity:0.38;
  animation:orb 14s ease-in-out infinite;
 opacity:0.26; filter: blur(38px);}
.orb1{left:-180px; top:-160px; background:radial-gradient(circle at 30% 30%, rgba(255,62,165,0.55), transparent 60%);}
.orb2{right:-220px; top:120px; background:radial-gradient(circle at 30% 30%, rgba(255,143,208,0.45), transparent 60%); animation-delay:-5s;}
.orb3{left:25%; bottom:-520px; background:radial-gradient(circle at 30% 30%, rgba(255,62,165,0.14), transparent 62%); animation-delay:-9s; opacity:0.22;}
@keyframes orb{
  0%,100%{transform:translateY(0) translateX(0) scale(1)}
  50%{transform:translateY(18px) translateX(10px) scale(1.03)}
}
.bg-noise{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0 1px, transparent 1px 3px);
  opacity:0.06;
  mix-blend-mode:overlay;
}

a:link {
  text-decoration: none;
}

.nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  max-width:calc(var(--max) + 48px);
  margin:0 auto;
  z-index:50;
  border:1px solid rgba(255,255,255,0.05);
  border-top:none;
  border-radius:0 0 var(--radius2) var(--radius2);
  background:rgba(10,5,8,0.55);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.nav-spacer{height:84px;}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:8px 10px;
  border-radius:14px;
}
.brand-mark{width:26px; height:26px; filter: drop-shadow(0 8px 18px rgba(255,62,165,0.25));}
.brand-name{
  font-weight:650;
  letter-spacing:0.6px;
  text-transform:capitalize;
}
.nav-links{
  list-style:none;
  display:flex; gap:18px; align-items:center;
  margin:0; padding:0;
}
.nav-link{
  text-decoration:none;
  color:rgba(255,255,255,0.82);
  padding:10px 12px;
  border-radius:12px;
  position:relative;
  transition: all .22s ease;
}
.nav-link:hover{
  color:rgba(255,255,255,0.95);
  background:rgba(255,255,255,0.05);
}
.nav-link.active{
  color:rgba(255,255,255,0.98);
  background:rgba(255,62,165,0.12);
  border:1px solid rgba(255,62,165,0.18);
}
.nav-pill{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,62,165,0.95), rgba(255,143,208,0.9));
  color:#0b0508;
  font-weight:700;
  box-shadow: var(--shadow2);
  border:1px solid rgba(255,255,255,0.18);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:white;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background:rgba(255,255,255,0.86);
  margin:5px auto;
  border-radius:2px;
}

.hero{
  max-width:var(--max);
  margin: 14px auto 0;
  padding: 64px 20px 10px;
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 26px;
  align-items:center;
}
.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.8);
  font-size:13px;
  width:fit-content;
}
.hero-title{
  margin:16px 0 10px;
  font-size: clamp(40px, 5vw, 62px);
  line-height:1.03;
  letter-spacing:-1.2px;
}
.accent{
  color:var(--accent);
  text-shadow: 0 0 32px rgba(255,62,165,0.35);
}
.hero-sub{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 17px;
  line-height:1.55;
  max-width: 52ch;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin: 16px 0 18px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:999px;
  padding: 12px 18px;
  text-decoration:none;
  font-weight:720;
  letter-spacing:0.2px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
  will-change: transform;
}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,62,165,1), rgba(255,143,208,0.95));
  color: #0b0508;
  box-shadow: var(--shadow2);
  border:1px solid rgba(255,255,255,0.22);
}
.btn.primary:hover{transform: translateY(-2px); box-shadow: 0 26px 70px rgba(255,62,165,0.25);}
.btn.ghost{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.btn.ghost:hover{transform: translateY(-2px); background: rgba(255,255,255,0.06); border-color: rgba(255,62,165,0.22);}

.hero-metrics{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: 14px;
}
.metric{
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.metric-num{
  font-weight:820;
  letter-spacing:0.2px;
}
.metric-label{
  font-size:12px;
  color:rgba(255,255,255,0.70);
  margin-top:3px;
}

.glass{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.glass::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 240px at 20% 20%, rgba(255,62,165,0.22), transparent 60%),
              radial-gradient(520px 220px at 80% 30%, rgba(255,143,208,0.14), transparent 60%);
  pointer-events:none;
}
.glass-top{
  display:flex; gap:8px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.12);
  position:relative;
  z-index:1;
}
.dot{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,0.16);}
.glass-body{
  padding:18px 18px 16px;
  position:relative;
  z-index:1;
}
.glass-caption{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.07);
}
.cap-title{font-weight:760;}
.cap-sub{color:rgba(255,255,255,0.68); font-size:13px; margin-top:4px;}

.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 54px 20px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom: 20px;
}
.section-head h2{
  margin:0;
  font-size: 30px;
  letter-spacing:-0.6px;
}
.section-head p{
  margin:0;
  color:var(--muted);
  max-width: 58ch;
  line-height:1.5;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.card{
  text-decoration:none;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  position:relative;
}
.card::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 280px at 20% 0%, rgba(255,62,165,0.18), transparent 60%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,62,165,0.22);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 26px 80px rgba(0,0,0,0.48), 0 20px 70px rgba(255,62,165,0.08);
}
.card:hover::after{opacity:1}
.card-media{
  height: 170px;
  background: rgba(0,0,0,0.10);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-body{padding:16px 16px 18px; position:relative; z-index:1}
.tag{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,62,165,0.12);
  border:1px solid rgba(255,62,165,0.16);
  color: rgba(255,255,255,0.88);
  font-size:12px;
}
.card h3{margin:12px 0 6px; letter-spacing:-0.4px}
.card p{margin:0; color:var(--muted); line-height:1.55}
.card-cta{margin-top:14px; color: rgba(255,143,208,0.95); font-weight:700}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 18px;}
.pill{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.86);
  font-size:13px;
}
.stack{display:grid; gap:12px;}
.stack-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  padding:16px;
}
.stack-title{font-weight:760; letter-spacing:-0.2px}
.stack-desc{color:var(--muted); margin-top:6px; line-height:1.5}

.page-head{
  max-width:var(--max);
  margin:0 auto;
  padding: 40px 20px 8px;
}
.page-head-inner{
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 28px 22px;
}
.page-head h1{margin:0; font-size:44px; letter-spacing:-1px;}
.page-head p{margin:10px 0 0; color:var(--muted);}

.case{
  scroll-margin-top: 110px;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 16px;
  align-items:stretch;
  margin: 18px 0;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.case-media{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
}
.case-media img{width:100%; height:100%; object-fit:cover}
.case-body{padding: 6px 4px 6px;}
.case-body h2{margin:12px 0 10px; letter-spacing:-0.6px}
.case-body p{margin:0; color:var(--muted); line-height:1.6}
.case-meta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

.timeline{
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  padding: 18px 16px;
}
.t-item{display:flex; gap:12px; padding: 12px 8px;}
.t-dot{
  width:12px; height:12px; border-radius:999px;
  background: rgba(255,62,165,0.9);
  box-shadow: 0 0 24px rgba(255,62,165,0.35);
  margin-top:4px;
  flex:0 0 auto;
}
.t-title{font-weight:780}
.t-sub{color:var(--muted); margin-top:4px; line-height:1.4; font-size:13px}

.three{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.mini{
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.mini-title{font-weight:780; letter-spacing:-0.3px}
.mini-desc{color:var(--muted); margin-top:8px; line-height:1.55}

.contact-wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}
.form{
  border-radius: var(--radius2);
  padding: 18px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
label{font-size:13px; color:rgba(255,255,255,0.72)}
input,textarea{
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px 12px;
  color: rgba(255,255,255,0.92);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus,textarea:focus{
  border-color: rgba(255,62,165,0.35);
  box-shadow: 0 0 0 6px rgba(255,62,165,0.12);
}
.hint{margin-top:10px; color:rgba(255,255,255,0.58); font-size:12px; line-height:1.4}
.contact-card{
  border-radius: var(--radius2);
  padding: 18px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.link{display:block; padding:10px 0; text-decoration:none; color:rgba(255,255,255,0.88)}
.link:hover{color:rgba(255,143,208,0.95)}
.divider{height:1px; background:rgba(255,255,255,0.08); margin:12px 0}
.small{color:rgba(255,255,255,0.65); font-size:12px; line-height:1.5}

.footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 30px 20px 46px;
  color:rgba(255,255,255,0.78);
}
.footer-inner{
  border-radius: var(--radius2);
  padding: 18px 18px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.footer-title{font-weight:800; color:rgba(255,255,255,0.9)}
.footer-sub{margin-top:4px; color:rgba(255,255,255,0.62); font-size:13px}
.footer-right{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.footer-link{text-decoration:none; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08)}
.footer-link:hover{border-color: rgba(255,62,165,0.22)}
.footer-bottom{margin-top:12px; font-size:12px; color:rgba(255,255,255,0.55)}

.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.visible{opacity:1; transform: translateY(0)}

.tilt{transform-style:preserve-3d}
.magnetic{position:relative}

.page-transition{
  position:fixed; inset:0;
  background: radial-gradient(900px 500px at 25% 20%, rgba(255,62,165,0.25), transparent 60%),
              radial-gradient(700px 420px at 80% 40%, rgba(255,143,208,0.18), transparent 60%),
              rgba(0,0,0,0.92);
  opacity:0;
  pointer-events:none;
  z-index:999;
  transition: opacity .28s ease;
}
.page-transition.on{opacity:1}

.toast{
  position:fixed;
  left:50%; bottom:26px;
  transform: translateX(-50%) translateY(12px);
  opacity:0;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,62,165,0.22);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  transition: opacity .25s ease, transform .25s ease;
  z-index:1000;
  white-space:nowrap;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(0)}

@media (max-width: 960px){
  .hero{grid-template-columns: 1fr; padding-top: 34px}
  .cards{grid-template-columns: 1fr; }
  .split{grid-template-columns: 1fr;}
  .case{grid-template-columns: 1fr;}
  .three{grid-template-columns: 1fr;}
  .contact-wrap{grid-template-columns: 1fr;}
  .nav{border-radius:0 0 18px 18px;}
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;
    right:12px; top:62px;
    display:none;
    flex-direction:column;
    padding:12px;
    width:min(360px, calc(100vw - 24px));
    border-radius: 18px;
    background: rgba(10,5,8,0.90);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  }
  .nav-links.open{display:flex;}
}

/* --- V3 visual fixes: keep bottom glow inside footer, reduce background banding --- */
.section, .page-head{
  position:relative;
  z-index:0;
}
.section::before{
  content:"";
  position:absolute;
  inset:-40px -12px;
  background: linear-gradient(180deg, rgba(10,5,8,0.10), rgba(10,5,8,0.02));
  border-radius: 34px;
  pointer-events:none;
  z-index:-1;
  opacity:0.22;
}

.footer{
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-260px;
  width:1200px;
  height:900px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,62,165,0.55), transparent 62%),
    radial-gradient(circle at 30% 10%, rgba(255,143,208,0.35), transparent 62%);
  filter: blur(34px);
  opacity:0.55;
  pointer-events:none;
  z-index:-1;
}

@media (max-width: 960px){
  .bg-orb{opacity:0.22; filter: blur(28px);}
  .orb3{opacity:0.12; bottom:-640px;}
}


/* --- V4: section-to-section "wash" that never cuts through content --- */
.wash-split{
  position: relative;
  height: 210px;
  margin-top: -40px;   /* gently tuck under previous section */
  margin-bottom: -40px;/* gently tuck under next section */
  pointer-events: none;
  z-index: 0;
}
.wash-split::before{
  content:"";
  position:absolute;
  inset:0;
  /* Full-width pink wash, centered BELOW the seam so it reads as a divider */
  background:
    radial-gradient(1200px 520px at 50% 120%, rgba(255,62,165,0.58), transparent 62%),
    radial-gradient(900px 420px at 20% 120%, rgba(255,143,208,0.22), transparent 64%),
    radial-gradient(900px 420px at 80% 120%, rgba(255,143,208,0.18), transparent 66%);
  filter: blur(26px);
  opacity: 0.78;
}
@media (max-width: 960px){
  .wash-split{ height: 170px; }
  .wash-split::before{ filter: blur(24px); opacity:0.70; }
}


/* Give sections a little breathing room so the divider sits between blocks */
.section{
  padding-bottom: max(70px, var(--section-pad-b, 70px));
  position: relative;
  z-index: 1;
}


/* --- Foreground alignment tweaks (requested) --- */

/* HOME: push Featured projects down further (background stays fixed) */
body[data-page="home"] .hero + section.section{
  padding-top: 300px; /* two more notches */
}

/* HOME: move footer one notch up */
body[data-page="home"] footer.footer{
  margin-top: -48px;
}

/* ABOUT: move 'What I care about' section + footer higher (background stays fixed) */
body[data-page="about"] section.section:nth-of-type(2){
  margin-top: -96px; /* two notches up */
}
body[data-page="about"] footer.footer{
  margin-top: 96px; /* two notches down + restores gap */
}

/* CONTACT: move footer one notch down */
body[data-page="contact"] footer.footer{
  margin-top: 48px;
}



/* HOME: footer one notch up */
[data-page="home"] footer{
  margin-top:-32px;
}

/* PROJECTS: smooth the transition between the stacked background images */
[data-page="projects"] .bg-grid{
  /* keep existing stacked asset; add a subtle bridge at the seam */
}
[data-page="projects"] .bg-grid::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:220px;
  transform:translateY(-50%);
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(40,0,28,0.22),
    rgba(255,62,165,0.08),
    rgba(40,0,28,0.22),
    rgba(0,0,0,0)
  );
  filter: blur(6px);
  opacity:0.95;
}

/* ABOUT: footer one notch up */
[data-page="about"] footer{
  margin-top:-32px;
}


/* --- Final polish (2026-01-17) --- */

/* HOME: move “What I’m optimized for” + everything below + footer up one FINAL notch.
   Featured Projects stays exactly where it is. */
[data-page="home"] #optimized-for{
  margin-top:-45px;
}
[data-page="home"] footer{
  margin-top:-64px;
}

/* PROJECTS: smooth the dramatic black→pink seam in the stacked wallpaper.
   Approach: soften the seam with a wider, blurred gradient bridge + a tiny blur on the grid layer. */
[data-page="projects"] .bg-grid{
  /* keep your stacked asset; gently soften the hard line without affecting layout */
  filter: blur(0.9px);
}

[data-page="projects"] .bg-grid::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:420px;              /* wider bridge */
  transform:translateY(-50%);
  pointer-events:none;

  /* A soft “atmosphere” bridge that removes the cut-line feel */
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(12,0,10,0.20),
    rgba(40,0,28,0.26),
    rgba(255,62,165,0.10),
    rgba(40,0,28,0.26),
    rgba(12,0,10,0.20),
    rgba(0,0,0,0)
  );
  filter: blur(10px);
  opacity:1;
}

/* ABOUT: move footer two notches up */
[data-page="about"] footer{
  margin-top:-64px;
}

/* CONTACT: intentionally no changes */


/* --- Fix pass (2026-01-17) --- */

/* HOME: keep Featured Projects placement; add breathing room before footer */
[data-page="home"] #optimized-for{
  padding-bottom:32px; /* slight space below "Let's collaborate" + stack */
}
[data-page="home"] footer{
  margin-top:0 !important; /* undo any previous negative margin */
}

/* ABOUT: footer two notches up */
[data-page="about"] footer{
  margin-top:0px !important;
}

/* PROJECTS: remove hard seam by fading between normal and vertically flipped grid using a masked overlay.
   This avoids a midline cut entirely. */
[data-page="projects"] .bg-grid{
  background-image:url("../assets/bg-grid.svg") !important;
  background-size:740px 740px !important;
  filter:none !important;
}
[data-page="projects"] .bg-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../assets/bg-grid.svg");
  background-size:740px 740px;
  transform:scaleY(-1);
  transform-origin:center;
  opacity:0.90;
  /* fade-in the flipped layer only on the lower half, with a generous blend zone */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,1) 62%, rgba(0,0,0,1) 100%);
  pointer-events:none;
}
[data-page="projects"] .bg-grid::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:520px;
  transform:translateY(-50%);
  pointer-events:none;
  /* atmospheric bridge to ensure zero visible line */
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(20,0,16,0.18),
    rgba(60,0,42,0.22),
    rgba(255,62,165,0.08),
    rgba(60,0,42,0.22),
    rgba(20,0,16,0.18),
    rgba(0,0,0,0)
  );
  filter: blur(14px);
  opacity:1;
}


/* ABOUT: move Current roles + everything below it two notches lower */
[data-page="about"] .bio-block{
  margin-top:128px;
}

/* HOME: prevent optimized-for stack from overlapping footer after removing one card */
[data-page="home"] #optimized-for{
  padding-bottom:72px; /* extra breathing room above footer */
}
[data-page="home"] #optimized-for .split-right{
  display:flex;
  align-items:center;   /* vertically center the remaining two cards */
}
[data-page="home"] #optimized-for .stack{
  width:100%;
}

/* --- Home (revised hero) --- */
.home-hero{
  max-width:var(--max);
  margin: 14px auto 0;
  padding: 56px 20px 10px;
  display:grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 26px;
  align-items:center;
}
.home-left{display:flex; flex-direction:column; gap:14px;}
.home-right{display:flex; justify-content:flex-end;}
.panel{
  border-radius: var(--radius2);
  background: rgba(10,5,8,0.52);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 22px 22px 20px;
}
.panel-small{
  padding: 16px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.panel-small:hover{
  transform: translateY(-2px);
  border-color: rgba(255,62,165,0.22);
  background: rgba(255,62,165,0.07);
}
.panel-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  letter-spacing:0.3px;
  width: fit-content;
}
.panel-title{
  margin: 14px 0 8px;
  font-size: 24px;
  letter-spacing:-0.3px;
}
.panel-text{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 52ch;
}
.panel-actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;}
.panel-row{margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.panel-mini-title{font-weight:750; letter-spacing:-0.2px;}
.panel-mini-cta{color: rgba(255,255,255,0.78);}
.panel-mini-text{margin-top:8px; color: rgba(255,255,255,0.70); line-height:1.45;}

.name-block{
  width: min(560px, 100%);
  text-align:left;
  padding: 8px 0;
}
.name-title{
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  font-weight: 820;
  text-shadow: 0 0 34px rgba(255,62,165,0.22);
}
.name-rotator{
  margin-top: 14px;
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height: 30px;
}
.rot-prefix{color: rgba(255,255,255,0.70);}
.rotating{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 26px rgba(255,143,208,0.18);
}
.cursor{
  opacity:0.9;
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0.1}}
.name-actions{margin-top: 18px; display:flex; gap:12px; flex-wrap:wrap;}

@media (max-width: 920px){
  .home-hero{grid-template-columns: 1fr; padding-top: 42px;}
  .home-right{justify-content:flex-start;}
  .name-block{padding: 0;}
}