#about .contact-title{margin-top:1.25rem; font-size:1.5rem; font-weight:800;}
#about .contact-card{
  margin-top:0.75rem; padding:1rem 1.25rem; border:1px solid var(--border-color);
  border-radius:24px; background:rgba(0,0,0,0.06);
  display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 2rem; align-items:center;
}
#about .contact-item{display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--text);}
#about .contact-item:hover .contact-text{text-decoration:underline;}
#about .contact-icon{width:22px; height:auto; display:block; filter:contrast(0.9) brightness(1);}
#about .contact-text{font-size:clamp(14px,1.6vw,18px); color:var(--text);}
:root{
  --bg-glass: rgba(255,255,255,0.10);
  --border-color: rgba(255,255,255,0.25);
  --text:#ffffff;
  --text-2:#e0e0e0;
  --accent:#ec60ff;
  --hover:rgba(255,255,255,0.20);

  /* Spotlight controls (keep your look) */
  --glow-alpha:0.14;
  --glow-stop:60%;
  --glow-stop-end:40%;

  /* Base tones */
  --bg-top:#14161a;
  --bg-mid:#0f1114;
  --bg-bot:#06070a;
}

*{margin:0;padding:0;box-sizing:border-box;}
button,input,select,textarea{font:inherit;}
html{scroll-padding-top:80px;}

body{
  font-family:"Inter",sans-serif;
  background-color:var(--bg-bot);
  color:var(--text);
  height:100vh;
  overflow:hidden;
  position:relative;
}

/* === Lighting stack (kept) =============================================== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    /* 1) top-center spotlight, slightly cool */
    radial-gradient(800px 1200px at 50% -10%,
      rgba(220,232,255,var(--glow-alpha)) 0%,
      rgba(220,232,255,calc(var(--glow-alpha)*0.55)) 10%,
      rgba(220,232,255,0) var(--glow-stop)
    ),
    /* 2) left vignette (dark) */
    radial-gradient(950px 780px at -14% 50%,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0) 60%
    ),
    /* 3) right vignette (dark) */
    radial-gradient(950px 780px at 114% 50%,
      rgba(0,0,0,0.32) 0%,
      rgba(0,0,0,0) 60%
    ),
    /* 4) vertical depth */
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 40%,var(--bg-bot) 100%);
  background-attachment:fixed,fixed,fixed,fixed;
  z-index:0;
  pointer-events:none;
  will-change:background;
}

/* Texture: replace SVG turbulence with a tiny tiled PNG (much cheaper) */
body::after{
  content:"";
  position:fixed;
  inset:-20% -20% -20% -20%;
  pointer-events:none;
  z-index:0;
  opacity:0.08;                 /* same softness */
  mix-blend-mode:soft-light;
  /* 1) tiled noise  2) subtle line dither (kept) */
  background-image:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAADL+Y6kAAAABlBMVEUAAACAgIB1m8TgAAAAH0lEQVQY02NgGAXUB8RMQAwjGQYwGJgYwYgB6mAAgwAAH7cC0c+Qq3YAAAAAElFTkSuQmCC"),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.0018) 0px,
      rgba(255,255,255,0.0018) 1px,
      transparent 1px,
      transparent 2px
    );
  background-size:256px 256px,100% 100%;
  transform:translateZ(0);
}

/* ======================================================================== */

.viewport-border{
  margin:1rem;
  border:2px solid var(--border-color);
  border-radius:20px;
  height:calc(100vh - 2rem);
  overflow-y:scroll;
  overflow-x:hidden; /* prevent sideways scroll showing sidebar */
  scroll-behavior:smooth;
  position:relative;
  z-index:1;
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.85),
    inset 0 0 40px rgba(0,0,0,0.35);
  background:transparent;
  contain:paint; /* isolate heavy inner paints from page root */
}
.viewport-border::-webkit-scrollbar{display:none;}

.navbar{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.5rem;
  backdrop-filter:blur(10px);
  background:var(--bg-glass);
  border-bottom:1px solid var(--border-color);
}
.logo{font-size:1rem;font-weight:700;}

.nav-links{display:flex;gap:1.5rem;}
.nav-link{
  color:var(--text); text-decoration:none; font-weight:500;
  padding:5px 10px; border-radius:8px; transition:0.3s;
}
.nav-link.active{background:var(--hover);}

.hamburger{
  display:none; font-size:2rem; cursor:pointer;
  transition:transform 0.3s ease; margin-left:auto;
}

.sidebar{
  position:fixed; top:0; right:-100%; width:220px; height:100%;
  background:var(--bg-glass); backdrop-filter:blur(10px);
  padding:2rem 1rem 1rem; display:flex; flex-direction:column; gap:1.5rem;
  transition:right 0.3s ease; z-index:30;
}
.sidebar-header{display:flex;justify-content:flex-end;margin-bottom:1rem;}
.close-btn{font-size:2rem;cursor:pointer;}
.sidebar.show{right:0;}

.hero{
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:100vh;
}
.hero-content{padding:2rem;}

.hero h1{font-size:2.5rem; line-height:1.2; margin-bottom:1.5rem;}

/* Outlined title (kept) */
.outline-text{color:transparent;-webkit-text-stroke:1px var(--text);} 

/* Typing caret */
.typing-caret::after{
  content:""; display:inline-block; width:1px; height:0.9em;
  background:rgba(255,255,255,0.9); margin-left:4px;
  animation:caret-blink 1s steps(1,end) infinite;
  will-change:opacity;
}
@keyframes caret-blink{50%{opacity:0;}}

/* Title stack */
.hero-title{display:grid;gap:0;justify-items:center;margin:0;}
.hero-title br{display:none;}

/* tighten spacing (kept style) */
.subtitle{
  font-size:clamp(18px,3.4vw,36px); font-weight:600; color:var(--text);
  letter-spacing:0.01em; line-height:1.2;
  margin-top:clamp(-16px,-1.4vw,-8px);
  opacity:0; transform:translateY(6px);
  transition:opacity 360ms ease, transform 360ms ease;
}
.subtitle.show{opacity:1; transform:translateY(0);} 

/* big outlined name */
.big-name{
  font-size:clamp(40px,9vw,120px); font-weight:700; letter-spacing:-0.02em;
  line-height:1.2;
}

.hero-btn{
  display:inline-block; padding:0.75rem 1.5rem; font-size:1.1rem; font-weight:600;
  background:linear-gradient(180deg,#3a3a42 0%,#232327 100%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px; color:#ffffff; cursor:pointer; text-decoration:none;
  transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  opacity:0; transform:translateY(6px);
  will-change:transform,opacity;
}
.hero-btn:hover{
  background:linear-gradient(180deg,#464650 0%,#2b2b31 100%);
  box-shadow:0 10px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.16);
}
.hero-btn:active{transform:translateY(1px);}
.hero-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,0.18),0 8px 20px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.12);
}
.hero-btn.show{opacity:1; transform:translateY(0); transition:opacity 300ms ease, transform 300ms ease;}

.section-title{text-align:center;font-size:2rem;margin-bottom:0.5rem;}
.underline{width:40px;height:3px;background:var(--text);margin:0 auto 2rem;border-radius:99px;}

.card-group{
  display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  max-width:1200px; margin:0 auto;
  align-items:stretch;
  grid-auto-rows: 1fr; /* ensure equal height rows */
}

.card{
  padding:2rem; text-align:center; border-radius:20px; transition:0.3s ease;
  will-change:transform; /* only transforms on hover */
}
.card h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;}
.card p{font-size:1rem;line-height:1.6;color:var(--text-2);}
.card:hover{background:rgba(255,255,255,0.15);transform:translateY(-5px);}

.glass{
  background:var(--bg-glass);
  border:1px solid var(--border-color);
  backdrop-filter:blur(15px);
  box-shadow:0 8px 32px rgba(255,255,255,0.1);
}

.project-card{display:flex; flex-direction:column; justify-content:space-between; height:100%;}
.project-media{position:relative;margin-bottom:1rem;border-radius:12px;overflow:hidden;}
.project-media img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin-bottom:0; position:relative; z-index:0;
}
.project-card p{font-size:1rem;line-height:1.6;}
.project-card .hero-btn{margin-top:0;}
/* Project CTA uses blog pill styling but without animated shine */
.project-card .project-cta{
  display:inline-flex; align-self:center; margin-top:0.75rem;
}
/* disable shine animation on project CTAs */
.project-card .project-cta.blog::before{ display:none !important; animation:none !important; }

/* Button row inside project cards */
.project-card .project-actions{display:flex; gap:0.6rem; justify-content:center; align-items:center; margin-top:auto; padding-top:0.3rem;}
/* Normalize project card buttons */
.project-card .project-actions .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
}

.project-media::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events:none; z-index:1;
}
.project-title{
  position:absolute; left:16px; bottom:12px; margin:0; color:#fff; font-weight:800;
  font-size:clamp(16px,2.2vw,24px); text-shadow:0 2px 8px rgba(0,0,0,0.6); z-index:2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.footer{text-align:center;}

.main-content{display:flex;flex-direction:column;}
.section{
  padding:4rem 2rem; min-height:100vh;
  /* Defer offscreen work without visual change */
  content-visibility:auto;
  contain-intrinsic-size:1000px;
}

/* === About layout ======================================================= */
#about{min-height:auto;}
.about-grid{
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,48px);
  align-items:stretch; max-width:1200px; margin:0 auto;
}
.about-left{display:flex;flex-direction:column;}
.about-text{color:var(--text-2); line-height:1.6; font-size:clamp(13px,1.15vw,15px); margin:0 auto 0.9rem;}
/* Remove paragraph indent and use a divider line instead */
.para-divider{border:0; height:1px; background:var(--border-color); opacity:0.6; margin:0.75rem 0 1rem;}
.about-left .social-grid{justify-content:start;}
.about-right{display:grid; place-items:center; align-self:stretch;}
/* Make the image taller so it reaches towards the Contact section */
.about-photo{width:100%; height:100%; max-height:none; object-fit:cover; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.55);} 

@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr;}
  .about-left .social-grid{justify-content:center;}
  /* On mobile, avoid overly tall image */
  .about-photo{height:auto; max-height:70vh;}
  #about .contact-card{grid-template-columns:1fr;}
}

/* Removed unused social-grid/link styles and helpers */

/* a11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Desktop nav pill with inner spotlight (kept) */
@media (min-width:768px){
  .hero h1{font-size:8rem;}
  .navbar{position:sticky;}
  .nav-links{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    padding:8px 14px; border-radius:999px; border:1px solid var(--border-color);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,0.35),
               inset 0 1px 0 rgba(255,255,255,0.18),
               inset 0 -1px 0 rgba(255,255,255,0.06);
    background:
      radial-gradient(ellipse at 50% -50%,
        rgba(255,255,255,0.50) 0%,
        rgba(255,255,255,0.24) 38%,
        rgba(255,255,255,0.10) 60%,
        transparent 78%),
      linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
      var(--bg-glass);
    color:var(--text); z-index:25;
  }
  .nav-links::before{
    content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
    background:
      radial-gradient(120% 140% at 50% -60%,
        rgba(255,255,255,0.90) 0%,
        rgba(255,255,255,0.60) 18%,
        rgba(255,255,255,0.28) 42%,
        rgba(255,255,255,0.10) 62%,
        rgba(255,255,255,0.04) 74%,
        transparent 82%);
    mix-blend-mode:screen; opacity:0.9;
  }
  .nav-link{padding:8px 14px;border-radius:999px;}
  .nav-link.active{background:rgba(255,255,255,0.12);}

  .nav-link.blog{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    color:#e9eeff; border:1px solid rgba(255,255,255,0.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(255,255,255,0.08);
    display:inline-flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  }
  .nav-link.blog::before{
    content:""; position:absolute; top:-70%; left:-35%; width:12%; height:240%;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 44%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.55) 56%, rgba(255,255,255,0) 100%);
    filter:blur(0.6px); transform:rotate(18deg); mix-blend-mode:screen;
    animation:blog-bubble-shine 6.6s ease-in-out infinite;
    pointer-events:none;
    will-change:transform,opacity;
  }
  .nav-link.blog::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06);
    mix-blend-mode:screen;
  }
  @keyframes blog-bubble-shine{
    0%,15.3%{opacity:0;left:-35%;}
    23.6%   {opacity:1;left:-35%;}
    68.1%   {opacity:1;left:135%;}
    76.4%   {opacity:0;left:135%;}
    100%    {opacity:0;left:135%;}
  }
}

/* Mobile */
@media (max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:block;}
}

/* Respect OS reduced-motion without changing default look */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* === FINAL normalize: make both project buttons identical height === */
.project-card .project-actions a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* lock text metrics */
  font-weight:600;
  font-size:14px;
  line-height:1 !important;
  letter-spacing:0.01em;

  /* lock box metrics */
  padding:8px 14px !important;
  min-height:38px;
  border-radius:999px !important;
  white-space:nowrap;

  /* unified pill skin to avoid border/height drift */
  border:1px solid rgba(255,255,255,0.22);
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(255,255,255,0.08);
}

/* kill any special sizing coming from the helper class */
.project-card .project-cta{
  display:inline-flex !important;
  margin-top:0 !important;
}

/* Keep shine disabled only for the View Project button (project-cta) */
.project-card .project-cta.blog::before{
  display:none !important;
  animation:none !important;
}