*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{

  --bg:#0a0a0a;--surface:#111;--surface2:#161616;

  --border:rgba(255,255,255,0.07);--border-h:rgba(255,255,255,0.16);

  --gold:#c9a84c;--gold-dim:rgba(201,168,76,0.1);--gold-line:rgba(201,168,76,0.32);

  --text:#f0ede6;--muted:#555;--muted2:#888;

  --mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--syne:'Syne',sans-serif;

}

html{background:var(--bg);}

body{color:var(--text);font-family:var(--sans);overflow-x:hidden;background:transparent;}

.pixel-blast-bg{background:var(--bg);z-index:-1}



.glow-cursor{pointer-events:none;position:fixed;z-index:0;width:700px;height:700px;border-radius:50%;

  background:radial-gradient(circle,rgba(201,168,76,0.045) 0%,transparent 65%);

  transform:translate(-50%,-50%);transition:left .12s,top .12s;will-change:left,top}



/* NAV */

nav{position:fixed;top:0;left:0;right:0;z-index:200;

  display:flex;align-items:center;justify-content:space-between;

  padding:1.3rem 3rem;border-bottom:1px solid var(--border);

  background:rgba(10,10,10,0.92);backdrop-filter:blur(20px)}

.nav-mark{font-family:var(--syne);font-weight:800;font-size:15px;color:var(--gold);

  letter-spacing:.12em;text-decoration:none}

.nav-links{display:none;}

.nav-links a{font-size:13px;color:var(--muted2);text-decoration:none;

  letter-spacing:.04em;transition:color .2s}

.nav-links a:hover{color:var(--text)}

.nav-links a.active{color:var(--gold)}

.nav-pill{font-size:11px;font-family:var(--mono);color:var(--gold);

  border:1px solid var(--gold-line);padding:5px 14px;border-radius:20px;

  background:var(--gold-dim);letter-spacing:.06em;

  display:flex;align-items:center;gap:7px}

.nav-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 2s infinite}

.nav-toggle{display:none !important;}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}



/* ── HERO with PARALLAX ── */

#hero{

  min-height:100vh;position:relative;overflow:hidden;

  display:grid;grid-template-columns:1fr 1fr;

  padding:0 3rem;padding-top:80px;align-items:center;gap:4rem}



/* parallax layers */

.px-layer{position:absolute;inset:0;will-change:transform;pointer-events:none}

.px-grid{

  background-image:

    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

  background-size:60px 60px;

  width:100%;height:100%}

.px-orb {
  position: absolute; width: 500px; height: 500px;
  /* Slightly stronger gold color so the morphing shape is more visible */
  background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
  top: 10%; right: -100px;
  /* Organic blob morphing animation */
  animation: blob-morph 10s ease-in-out infinite alternate;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

@keyframes blob-morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  66% { border-radius: 70% 30% 40% 60% / 40% 70% 60% 30%; }
  100% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
}

.px-lines{position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--border)}



.hero-left{position:relative;z-index:2;padding:60px 0}

.hero-eyebrow{font-family:var(--mono);font-size:11px;color:#ffffff;

  letter-spacing:.2em;text-transform:uppercase;margin-bottom:2rem;

  display:inline-flex;align-items:center;gap:12px;opacity:0;animation:fadeUp .8s .2s forwards;
  background:rgba(16, 16, 16, 0.65);padding:8px 18px;border-radius:100px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(8px);
}

.hero-eyebrow::before{content:'';width:32px;height:1px;background:#ffffff}

.hero-name{font-family:var(--syne);font-weight:800;

  font-size:clamp(2.2rem,11vw,6rem);line-height:.9;letter-spacing:-.035em;

  color:var(--text);margin-bottom:2.5rem;opacity:0;animation:fadeUp .8s .35s forwards}

.hero-name .hollow{-webkit-text-stroke:1px var(--text);color:transparent}

.hero-name .gold{color:var(--gold)}

.hero-bio{font-size:15px;line-height:1.8;color:var(--muted2);max-width:420px;margin-bottom:2.5rem;

  opacity:0;animation:fadeUp .8s .5s forwards}

.hero-actions{display:flex;align-items:center;gap:1.5rem;

  opacity:0;animation:fadeUp .8s .65s forwards}

.btn-gold{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#0a0a0a;

  background:var(--gold);border:none;padding:14px 28px;cursor:pointer;

  text-decoration:none;text-transform:uppercase;transition:opacity .2s,transform .15s}

.btn-gold:hover{opacity:.85;transform:translateY(-1px)}

.btn-ghost{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted2);

  background:transparent;border:1px solid var(--border-h);padding:13px 26px;

  text-decoration:none;text-transform:uppercase;transition:color .2s,border-color .2s}

.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.35)}

.hero-stats{display:flex;gap:2.5rem;margin-top:3rem;padding-top:2.5rem;

  border-top:1px solid var(--border);opacity:0;animation:fadeUp .8s .8s forwards}

.hero-stat-num{font-family:var(--syne);font-weight:800;font-size:1.8rem;color:var(--text);line-height:1}

.hero-stat-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em;margin-top:4px}



.hero-right{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;

  opacity:0;animation:fadeRight .9s .4s forwards}

.hero-photo-frame{position:relative;width:360px;height:480px;flex-shrink:0}

.hero-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.hero-photo-overlay{position:absolute;inset:0;

  background:linear-gradient(to bottom,transparent 55%,var(--bg) 100%)}

.hero-photo-border{position:absolute;inset:0;border:1px solid var(--border-h)}

.hero-photo-tag{position:absolute;bottom:0;left:0;right:0;padding:1.1rem 1.3rem;

  background:rgba(10,10,10,.82);backdrop-filter:blur(8px);

  border-top:1px solid var(--border-h);display:flex;justify-content:space-between;align-items:center}

.hero-photo-tag-name{font-family:var(--mono);font-size:11px;color:var(--text);letter-spacing:.07em}

.hero-photo-tag-loc{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.06em}

.hero-ghost{position:absolute;right:-80px;top:50%;transform:translateY(-50%);

  font-family:var(--syne);font-weight:800;font-size:clamp(5rem,13vw,10rem);

  color:rgba(255,255,255,.02);line-height:1;letter-spacing:-.04em;

  white-space:nowrap;pointer-events:none;user-select:none;will-change:transform}



.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);

  display:flex;flex-direction:column;align-items:center;gap:8px;

  font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.15em;

  opacity:0;animation:fadeUp .8s 1.1s forwards}

.hero-scroll::after{content:'';width:1px;height:40px;background:var(--muted);

  animation:scrollpulse 2s ease infinite}

@keyframes scrollpulse{0%,100%{opacity:.3}50%{opacity:1}}

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

@keyframes fadeRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}



/* DIVIDER */

.sec-divider{width:100%;height:1px;background:var(--border)}



/* SECTION SHARED */

.page-header{padding:148px 3rem 64px;max-width:1200px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}

.header-eyebrow{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:10px}

.header-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}

.header-title{font-family:var(--syne);font-weight:800;font-size:clamp(1.8rem,8vw,6rem);line-height:.92;letter-spacing:-.03em;color:var(--text)}

.header-title span{color:var(--gold)}

.header-right{max-width:240px;flex-shrink:0;padding-bottom:.5rem}

.header-right p{font-size:14px;line-height:1.75;color:var(--muted2)}



.section-inner{max-width:1200px;margin:0 auto;padding:120px 3rem}

.sec-label{font-family:var(--mono);font-size:11px;color:var(--gold);

  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem;

  display:flex;align-items:center;gap:10px}

.sec-label::before{content:'';width:24px;height:1px;background:var(--gold)}

.sec-title{font-family:var(--syne);font-weight:800;

  font-size:clamp(1.8rem,8vw,4.5rem);line-height:.95;letter-spacing:-.03em;

  color:var(--text);margin-bottom:1.5rem}



/* REVEAL */

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}

.reveal.visible{opacity:1;transform:translateY(0)}

.reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s ease}

.reveal-l.visible{opacity:1;transform:translateX(0)}



/* ── ABOUT ── */

#about{background:var(--surface)}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}

.about-img-wrap{position:relative}

.about-img-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}

.about-img-border{position:absolute;inset:0;border:1px solid var(--border-h)}

.about-img-cap{position:absolute;bottom:0;left:0;right:0;padding:1.1rem 1.3rem;

  background:rgba(10,10,10,.85);backdrop-filter:blur(6px);

  border-top:1px solid var(--border-h);display:flex;justify-content:space-between}

.about-img-cap span{font-family:var(--mono);font-size:11px;color:var(--muted2);letter-spacing:.07em}

.about-headline{font-family:var(--syne);font-weight:700;

  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.2;letter-spacing:-.02em;

  color:var(--text);margin-bottom:1.5rem}

.about-headline em{font-style:normal;color:var(--gold)}

.about-body{font-size:14px;line-height:1.85;color:var(--muted2);margin-bottom:1rem}

.about-rule{width:100%;height:1px;background:var(--border);margin:2rem 0}

.stack-tbl{width:100%;border-collapse:collapse}

.stack-tbl tr{border-bottom:1px solid var(--border)}

.stack-tbl td{padding:10px 0;font-size:13px;font-family:var(--mono)}

.stack-tbl td:nth-child(2){color:var(--muted);font-size:11px}

.stack-tbl td:last-child{text-align:right;color:var(--gold)}



/* ── SLIDER SHARED ── */

.slider-section{overflow:hidden}

.slider-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem}

.slider-controls{display:flex;gap:.75rem}

.slider-btn{
  width:44px;height:44px;border:1px solid var(--border-h);background:transparent;
  color:var(--muted2);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s,background .2s;flex-shrink:0}
.slider-btn:hover{border-color:var(--gold-line);color:var(--gold);background:var(--gold-dim)}
.slider-btn:disabled{opacity:.25;cursor:default}
.slider-track-wrap{overflow:hidden;position:relative}
.slider-track{display:flex;gap:1.5rem;transition:transform .55s cubic-bezier(.25,.1,.25,1);will-change:transform}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:2rem}
.slider-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);
  cursor:pointer;transition:background .25s,width .25s}
.slider-dot.active{background:var(--gold);width:18px;border-radius:3px}

/* ── PROJECT CARDS ── */
#projects{background:var(--surface2)}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}

.proj-card{
  border-radius:0;overflow:hidden;
  transition:width 0.6s cubic-bezier(0.16, 1, 0.3, 1), flex 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .5s ease;
  cursor:pointer;position:relative;
  aspect-ratio:4/3;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.proj-card:hover:not(.is-revealed){
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(212,175,55,0.15);
}
.proj-card-img-wrap{
  width:100%;height:100%;
  position:absolute;left:0;top:0;
  overflow:hidden;
  transition:width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:1;
}
.proj-card-bg{
  width:100%;height:100%;min-width:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(0.16, 1, 0.3, 1), filter .8s ease;display:block;
  filter:brightness(0.7) contrast(1.1);
}
.proj-card:hover:not(.is-revealed) .proj-card-bg{transform:scale(1.08);filter:brightness(0.9) contrast(1.1)}
.proj-card-overlay-base{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, transparent 100%);
  pointer-events:none;
}
.proj-card-header{
  position:absolute;bottom:0;left:0;width:100%;padding:2rem;
  display:flex;flex-direction:column;gap:10px;
  transition:opacity .4s ease, transform .4s ease;
  z-index:2;pointer-events:none;
}
.proj-card-num{
  font-family:var(--mono);font-size:11px;color:var(--gold);
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(212,175,55,0.3);border-radius:20px;padding:6px 14px;letter-spacing:.1em;
  width:fit-content;
}
.proj-card-title-front{
  font-family:var(--syne);font-weight:800;font-size:1.8rem;
  letter-spacing:-.02em;color:#fff;margin:0;line-height:1.2;
}

/* REVEALED / EXPANDED SIDEWAYS STATE */
.proj-card.is-revealed {
  grid-column: span 2;
  aspect-ratio: auto;
  height: 520px;
  cursor: default;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 45px rgba(212,175,55,0.25);
}
/* If it's a focus-card in the slider */
.focus-stage .proj-card.is-revealed {
  width: min(90%, 960px) !important;
  height: calc(100% - 10px) !important;
}

.proj-card.is-revealed .proj-card-img-wrap {
  width: 55%;
}
.proj-card.is-revealed .proj-card-header{
  opacity:0;transform:translateX(-30px);
}
.proj-card.is-revealed .proj-card-bg{
  filter:brightness(0.65) blur(1px);transform:scale(1.02);
}

.proj-card-body{
  position:absolute;right:0;top:0;bottom:0;
  width:45%;
  background:rgba(15,15,15,0.95);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,0.1);
  padding:2.5rem;display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:3;cursor:default;
  box-sizing:border-box;
  overflow-y:auto;
}
.proj-card.is-revealed .proj-card-body{
  transform:translateX(0);
}
.proj-close-btn{
  position:absolute;top:1.5rem;right:1.5rem;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  width:32px;height:32px;border-radius:50%;color:rgba(255,255,255,0.8);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;transition:all .3s ease;
  z-index:10;
}
.proj-close-btn:hover{
  background:rgba(212,175,55,0.25);color:var(--gold);border-color:var(--gold);
  transform:rotate(90deg);
}
.proj-card-body-inner{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(20px);transition:all .5s ease .2s;
}
.proj-card.is-revealed .proj-card-body-inner{
  opacity:1;transform:translateY(0);
}
.proj-card-title{font-family:var(--syne);font-weight:800;font-size:2.2rem;
  letter-spacing:-.02em;color:var(--text);margin-bottom:0.75rem;line-height:1.2}
.proj-card-desc{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.7);margin-bottom:1.25rem}

/* FEATURES LIST */
.proj-features-section {
  margin: 0 0 1.5rem 0;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-align: left;
}
.proj-features-title {
  font-family: var(--syne);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.proj-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Project Gallery inside Details (To be removed if completely unused, but keeping just in case) */
.proj-gallery {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 24px 0;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}

.proj-gallery::-webkit-scrollbar {
  height: 4px;
}
.proj-gallery::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

.proj-gallery img {
  height: 280px;
  width: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  object-fit: cover;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: transform 0.3s;
}

.proj-gallery img:hover {
  transform: scale(1.02);
}

/* Slider Navigation on Covers */
.proj-slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show arrows on hover of the image wrapper */
.proj-card-img-wrap:hover .proj-slider-nav,
.proj-thumb:hover .proj-slider-nav {
  opacity: 1;
}

.proj-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto; /* Enable clicks on the buttons */
  backdrop-filter: blur(4px);
  transition: background 0.3s, transform 0.2s;
}

.proj-slider-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.proj-slider-btn i {
  font-size: 14px;
}

.proj-features-list li {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.proj-features-list li i {
  color: var(--gold);
  font-size: 11px;
  margin-top: 4px;
  flex-shrink: 0;
}
.proj-features-list li strong {
  color: #fff;
}

.proj-card-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem}
.proj-pill{font-family:var(--mono);font-size:10px;color:var(--text);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:5px 12px;letter-spacing:.05em}
.proj-card-link{font-family:var(--mono);font-size:11px;color:#050505;
  text-decoration:none;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--gold);padding:12px 20px;border-radius:30px;
  font-weight:bold;transition:all .3s ease;width:100%;
  box-shadow:0 4px 15px rgba(212,175,55,0.2)}
.proj-card-link:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(212,175,55,0.4);gap:14px}

/* ── CERT CARDS ── */
#certs{background:var(--bg)}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cert-card{
  flex:0 0 calc(33.333% - 1rem);min-width:0;
  border:1px solid var(--border);padding:1.6rem;
  transition:border-color .3s,background .3s;cursor:default;position:relative}
.cert-card:hover{border-color:var(--gold-line);background:rgba(201,168,76,.03)}
.cert-card-icon{
  width:48px;height:48px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--gold);margin-bottom:1.2rem;
  transition:border-color .3s}
.cert-card:hover .cert-card-icon{border-color:var(--gold-line)}

.cert-card-issuer{font-family:var(--mono);font-size:10px;color:var(--muted);

  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem}

.cert-card-title{font-family:var(--syne);font-weight:700;font-size:1rem;

  color:var(--text);line-height:1.3;margin-bottom:.5rem}

.cert-card-date{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.07em}

.cert-card::before{content:'';position:absolute;top:0;left:0;

  height:2px;width:0;background:var(--gold);transition:width .35s ease}

.cert-card:hover::before{width:100%}



/* ── EDU TIMELINE ── */

#edu-preview{background:var(--surface)}

.timeline-wrapper{max-width:1100px;margin:0 auto}

.edu-row{display:grid;grid-template-columns:160px 1px 1fr;gap:0 3rem;

  opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}

.edu-row.visible{opacity:1;transform:translateY(0)}

.edu-meta{padding:2rem 0;text-align:right}

.edu-period{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.1em;margin-bottom:.3rem}

.edu-idx{font-family:var(--mono);font-size:11px;color:var(--muted)}

.edu-line-col{display:flex;flex-direction:column;align-items:center}

.edu-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);

  margin-top:2.3rem;flex-shrink:0;box-shadow:0 0 0 4px rgba(201,168,76,.12)}

.edu-vline{flex:1;width:1px;background:var(--border);margin-top:6px}

.edu-row:last-child .edu-vline{display:none}

.edu-body{padding:1.8rem 0 2.5rem;border-top:1px solid var(--border)}

.edu-school{font-family:var(--syne);font-weight:700;font-size:1.6rem;

  letter-spacing:-.02em;color:var(--text);margin-bottom:.4rem}

.edu-degree{font-family:var(--mono);font-size:11px;color:var(--muted2);

  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;

  display:flex;align-items:center;gap:8px}

.edu-degree::before{content:'';width:14px;height:1px;background:var(--muted)}

.edu-note{font-size:13px;line-height:1.75;color:var(--muted2);max-width:500px}

.edu-logo{width:40px;height:40px;border:1px solid var(--border);

  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;overflow:hidden}

.edu-logo img{width:30px;height:30px;object-fit:contain}



/* ── CONTACT ── */

#contact{background:var(--bg);overflow:hidden}

.contact-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

  font-family:var(--syne);font-weight:800;font-size:clamp(5rem,15vw,12rem);

  color:rgba(255,255,255,.018);letter-spacing:-.04em;line-height:1;

  pointer-events:none;user-select:none;white-space:nowrap}

.contact-big{font-family:var(--syne);font-weight:800;

  font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.04em;

  color:var(--text);margin-bottom:4rem}

.contact-big .hollow{-webkit-text-stroke:1.5px var(--text);color:transparent}

.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);

  border:1px solid var(--border);margin-bottom:3rem}

.c-cell{padding:1.8rem;border-right:1px solid var(--border)}

.c-cell:last-child{border-right:none}

.c-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);

  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}

.c-val{font-size:13px;color:var(--text)}

.c-val.live{color:var(--gold);display:flex;align-items:center;gap:6px}

.c-val.live::before{content:'';width:6px;height:6px;border-radius:50%;

  background:var(--gold);animation:blink 2s infinite}

.contact-foot{display:flex;justify-content:space-between;align-items:center}

.c-socials{display:flex;gap:1rem}

.c-soc{width:44px;height:44px;border:1px solid var(--border);

  display:flex;align-items:center;justify-content:center;

  color:var(--muted2);text-decoration:none;font-size:16px;

  transition:border-color .2s,color .2s}

.c-soc:hover{border-color:var(--gold-line);color:var(--gold)}

.c-cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;

  color:#0a0a0a;background:var(--gold);border:none;padding:15px 32px;

  text-decoration:none;text-transform:uppercase;transition:opacity .2s}

.c-cta:hover{opacity:.85}



footer{background:var(--bg);border-top:1px solid var(--border);

  padding:2rem 3rem;display:flex;justify-content:space-between;

  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.07em}



.more-row{text-align:center;padding:2.5rem 0 0}

.contact-rel{position:relative}



/* UTILS */

.glass-panel {

    background: rgba(10,10,10,0.85);

    backdrop-filter: blur(14px);

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 3rem;

}



/* ── FULL EDUCATION TIMELINE ── */

.timeline-wrapper { max-width: 1100px; margin: 0 auto; }

.timeline-section { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem 6rem; }

.timeline-divider { width: 100%; height: 1px; background: var(--border); margin-bottom: 4rem; }



.school-card {

  display: grid;

  grid-template-columns: 160px 1px 1fr;

  gap: 0 3rem;

  opacity: 0;

  transform: translateY(28px);

  transition: opacity 0.65s ease, transform 0.65s ease;

}

.school-card.visible { opacity: 1; transform: translateY(0); }



.card-meta { padding: 2.4rem 0; text-align: right; }

.card-period { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.4rem; }

.card-index { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }



.card-line-col { display: flex; flex-direction: column; align-items: center; }

.card-dot {

  width: 9px; height: 9px; border-radius: 50%;

  background: var(--gold); margin-top: 3.8rem; flex-shrink: 0;

  box-shadow: 0 0 0 4px rgba(201,168,76,0.12);

  transition: box-shadow 0.3s; position: relative; z-index: 2;

}

.school-card:hover .card-dot { box-shadow: 0 0 0 10px rgba(201,168,76,0.2); }

.card-vline { flex: 1; width: 1px; background: var(--border); margin-top: 8px; }

.school-card:last-child .card-vline { display: none; }



.card-body {

  padding: 2rem 0 3.5rem;

  border-top: 1px solid var(--border);

  transition: border-color 0.3s;

  position: relative; overflow: hidden;

}

.school-card:hover .card-body { border-color: var(--border-h); }

.card-body::before {

  content: ''; position: absolute; left: 0; top: -1px;

  width: 0; height: 2px; background: var(--gold);

  transition: width 0.4s ease;

}

.school-card:hover .card-body::before { width: 60px; }



.logo-badge {

  width: 80px; height: 80px;

  border-radius: 16px;

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.1);

  display: flex; align-items: center; justify-content: center;

  margin-bottom: 1.6rem;

  overflow: hidden;

  transition: border-color 0.3s, background 0.3s, transform 0.3s;

  flex-shrink: 0;

}

.school-card:hover .logo-badge {

  border-color: var(--gold-line);

  background: rgba(255,255,255,0.09);

  transform: scale(1.04);

}

.logo-badge img {

  width: 62px; height: 62px;

  object-fit: contain;

}



.card-school {

  font-family: var(--syne); font-weight: 700;

  font-size: clamp(1.5rem, 3vw, 2.2rem);

  line-height: 1.08; letter-spacing: -0.02em; color: var(--text);

  margin-bottom: 0.5rem;

  transition: color 0.3s;

}

.school-card:hover .card-school { color: #fff; }



.card-degree {

  font-size: 11px; font-family: var(--mono);

  color: var(--muted2); letter-spacing: 0.1em; text-transform: uppercase;

  margin-bottom: 1.4rem;

  display: inline-flex; align-items: center; gap: 8px;

}

.card-degree::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--muted); }



.card-note { font-size: 14px; line-height: 1.8; color: var(--muted2); max-width: 520px; transition: color 0.3s; }

.school-card:hover .card-note { color: #aaa; }



.card-number {

  font-family: var(--syne); font-weight: 800; font-size: 8rem; line-height: 1;

  color: rgba(255,255,255,0.022);

  position: absolute; right: -8px; bottom: 0.5rem;

  letter-spacing: -0.06em; pointer-events: none; user-select: none;

}





/* ── MOBILE RESPONSIVENESS ── */

.nav-toggle {

  display: none;

  background: transparent;

  border: none;

  cursor: pointer;

  flex-direction: column;

  gap: 5px;

  padding: 5px;

  z-index: 300;

}

.nav-toggle span {

  width: 24px;

  height: 2px;

  background: var(--text);

  transition: 0.3s;

}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle.active span:nth-child(2) { opacity: 0; }

.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



@media (max-width: 768px) {

  .section-inner { padding: 80px 1.5rem; }

  .page-header { padding: 120px 1.5rem 40px; flex-direction: column; align-items: flex-start; gap: 1rem; }

  

  nav { padding: 1.5rem; backdrop-filter: none !important; }

  .nav-pill { display: none; }

  .nav-toggle { display: flex; }

  

  .nav-links {

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(10,10,10,0.6);

    backdrop-filter: blur(20px);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

    z-index: 250;

  }

  .nav-links.active {

    opacity: 1;

    pointer-events: auto;

  }

  .nav-links a { font-size: 1.5rem; }



  #hero { grid-template-columns: 1fr; padding: 120px 1.5rem 60px; text-align: center; gap: 2rem; }

  .hero-left { padding: 0; }

  .hero-eyebrow { justify-content: center; }

  .hero-actions { justify-content: center; }

  .hero-stats { justify-content: center; flex-wrap: wrap; gap: 1.5rem; }

  .hero-right { display: none; } /* Hide photo on mobile hero to keep it clean, or keep it stacked */



  .about-grid { grid-template-columns: 1fr; gap: 3rem; }

  .proj-grid { grid-template-columns: 1fr; }
  .proj-card.is-revealed {
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
  }
  .proj-card.is-revealed .proj-card-img-wrap {
    width: 100% !important;
    height: 240px !important;
    position: relative !important;
  }
  .proj-card.is-revealed .proj-card-body {
    width: 100% !important;
    position: relative !important;
    transform: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.75rem !important;
  }

  .cert-grid { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; }

  

  .c-cell { border-right: none; border-bottom: 1px solid var(--border); }

  .c-cell:last-child { border-bottom: none; }

  .contact-foot { flex-direction: column; gap: 2rem; align-items: flex-start; }

  

  .school-card { grid-template-columns: 1fr; gap: 1rem; }

  .card-meta { padding: 0; text-align: left; }

  .card-line-col { display: none; }

  

  .edu-row { grid-template-columns: 1fr; gap: 1rem; }

  .edu-meta { padding: 0; text-align: left; }

  .edu-line-col { display: none; }

}

/*      TOOLS (TERMINAL & TYPING)      */

.tool-modal {

  position: fixed; top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);

  z-index: 1000; display: flex; align-items: center; justify-content: center;

  opacity: 0; pointer-events: none; transition: opacity 0.3s;

}

.tool-modal.active { opacity: 1; pointer-events: auto; }

.tool-panel {

  width: 90%; max-width: 700px; background: var(--surface2);

  border: 1px solid var(--border-h); border-radius: 8px;

  overflow: hidden; display: flex; flex-direction: column;

  box-shadow: 0 20px 40px rgba(0,0,0,0.5);

  transform: translateY(20px); transition: transform 0.3s;

}

.tool-modal.active .tool-panel { transform: translateY(0); }

.tool-head {

  padding: 1rem; border-bottom: 1px solid var(--border);

  display: flex; align-items: center; justify-content: space-between;

  font-family: var(--mono); font-size: 13px; color: var(--muted2);

  background: var(--surface);

}

.tool-close {

  background: transparent; border: none; color: var(--muted2);

  cursor: pointer; font-size: 16px; transition: color 0.2s;

}

.tool-close:hover { color: #fff; }



/* Terminal */

.terminal-body {

  padding: 1.5rem; height: 300px; overflow-y: auto;

  font-family: var(--mono); font-size: 14px; color: var(--text);

  line-height: 1.6;

}

.terminal-input-row {

  display: flex; align-items: center; gap: 10px;

  padding: 0 1.5rem 1.5rem; font-family: var(--mono); font-size: 14px;

}

.terminal-input-row span { color: var(--gold); }

#terminal-input {

  background: transparent; border: none; color: var(--text);

  font-family: var(--mono); font-size: 14px; outline: none; flex: 1;

}

.term-line { margin-bottom: 0.5rem; }

.term-line.cmd { color: var(--gold); }

.term-line.err { color: #ff6b6b; }



/* Typing */

.typing-body { padding: 1.5rem; }

.typing-sample {

  font-size: 18px; line-height: 1.6; color: var(--muted2);

  margin-bottom: 1rem; font-family: var(--mono);

  user-select: none;

}

.typing-sample span.correct { color: var(--gold); }

.typing-sample span.incorrect { color: #ff6b6b; text-decoration: underline; }

.typing-sample span.active { color: #fff; border-bottom: 2px solid var(--gold); }



.typing-input {

  width: 100%; height: 80px; background: var(--surface);

  border: 1px solid var(--border); border-radius: 4px;

  padding: 1rem; color: var(--text); font-family: var(--mono);

  font-size: 16px; resize: none; outline: none; margin-bottom: 1.5rem;

}

.typing-input:focus { border-color: var(--gold-line); }



.typing-stats {

  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;

  margin-bottom: 1.5rem;

}

.typing-stat {

  background: var(--surface); padding: 1rem; border-radius: 4px;

  border: 1px solid var(--border); text-align: center;

}

.typing-stat strong {

  display: block; font-size: 24px; font-family: var(--syne);

  color: var(--gold); margin-bottom: 0.2rem;

}

.typing-stat span { font-size: 12px; color: var(--muted2); text-transform: uppercase; }



.typing-actions { display: flex; gap: 1rem; justify-content: flex-end; }


/* ── TOOLS (TERMINAL & TYPING) ── */
.tool-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.tool-modal.active { opacity: 1; pointer-events: auto; }
.tool-panel {
  width: 90%; max-width: 700px; background: var(--surface2);
  border: 1px solid var(--border-h); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform: translateY(20px); transition: transform 0.3s;
}
.tool-modal.active .tool-panel { transform: translateY(0); }
.tool-head {
  padding: 1rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 13px; color: var(--muted2);
  background: var(--surface);
}
.tool-close {
  background: transparent; border: none; color: var(--muted2);
  cursor: pointer; font-size: 16px; transition: color 0.2s;
}
.tool-close:hover { color: #fff; }

/* Terminal */
.terminal-body {
  padding: 1.5rem; height: 300px; overflow-y: auto;
  font-family: var(--mono); font-size: 14px; color: var(--text);
  line-height: 1.6;
}
.terminal-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 1.5rem 1.5rem; font-family: var(--mono); font-size: 14px;
}
.terminal-input-row span { color: var(--gold); }
#terminal-input {
  background: transparent; border: none; color: var(--text);
  font-family: var(--mono); font-size: 14px; outline: none; flex: 1;
}
.term-line { margin-bottom: 0.5rem; }
.term-line.cmd { color: var(--gold); }
.term-line.err { color: #ff6b6b; }

/* Typing */
.typing-body { padding: 1.5rem; }
.typing-sample {
  font-size: 18px; line-height: 1.6; color: var(--muted2);
  margin-bottom: 1rem; font-family: var(--mono);
  user-select: none;
}
.typing-sample span.correct { color: var(--gold); }
.typing-sample span.incorrect { color: #ff6b6b; text-decoration: underline; }
.typing-sample span.active { color: #fff; border-bottom: 2px solid var(--gold); }

.typing-input {
  width: 100%; height: 80px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1rem; color: var(--text); font-family: var(--mono);
  font-size: 16px; resize: none; outline: none; margin-bottom: 1.5rem;
}
.typing-input:focus { border-color: var(--gold-line); }

.typing-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 1.5rem;
}
.typing-stat {
  background: var(--surface); padding: 1rem; border-radius: 4px;
  border: 1px solid var(--border); text-align: center;
}

.tool-close {

  background: transparent; border: none; color: var(--muted2);

  cursor: pointer; font-size: 16px; transition: color 0.2s;

}

.tool-close:hover { color: #fff; }



/* Terminal */

.terminal-body {

  padding: 1.5rem; height: 300px; overflow-y: auto;

  font-family: var(--mono); font-size: 14px; color: var(--text);

  line-height: 1.6;

}

.terminal-input-row {

  display: flex; align-items: center; gap: 10px;

  padding: 0 1.5rem 1.5rem; font-family: var(--mono); font-size: 14px;

}

.terminal-input-row span { color: var(--gold); }

#terminal-input {

  background: transparent; border: none; color: var(--text);

  font-family: var(--mono); font-size: 14px; outline: none; flex: 1;

}

.term-line { margin-bottom: 0.5rem; }

.term-line.cmd { color: var(--gold); }

.term-line.err { color: #ff6b6b; }



/* Typing */

.typing-body { padding: 1.5rem; }

.typing-sample {

  font-size: 18px; line-height: 1.6; color: var(--muted2);

  margin-bottom: 1rem; font-family: var(--mono);

  user-select: none;

}

.typing-sample span.correct { color: var(--gold); }

.typing-sample span.incorrect { color: #ff6b6b; text-decoration: underline; }

.typing-sample span.active { color: #fff; border-bottom: 2px solid var(--gold); }



.typing-input {

  width: 100%; height: 80px; background: var(--surface);

  border: 1px solid var(--border); border-radius: 4px;

  padding: 1rem; color: var(--text); font-family: var(--mono);

  font-size: 16px; resize: none; outline: none; margin-bottom: 1.5rem;

}

.typing-input:focus { border-color: var(--gold-line); }



.typing-stats {

  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;

  margin-bottom: 1.5rem;

}

.typing-stat {

  background: var(--surface); padding: 1rem; border-radius: 4px;

  border: 1px solid var(--border); text-align: center;

}

.typing-stat strong {

  display: block; font-size: 24px; font-family: var(--syne);

  color: var(--gold); margin-bottom: 0.2rem;

}

.typing-stat span { font-size: 12px; color: var(--muted2); text-transform: uppercase; }



.typing-actions { display: flex; gap: 1rem; justify-content: flex-end; }


/* ── TOOLS (TERMINAL & TYPING) ── */
.tool-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.tool-modal.active { opacity: 1; pointer-events: auto; }
.tool-panel {
  width: 90%; max-width: 700px; background: var(--surface2);
  border: 1px solid var(--border-h); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform: translateY(20px); transition: transform 0.3s;
}
.tool-modal.active .tool-panel { transform: translateY(0); }
.tool-head {
  padding: 1rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 13px; color: var(--muted2);
  background: var(--surface);
}
.tool-close {
  background: transparent; border: none; color: var(--muted2);
  cursor: pointer; font-size: 16px; transition: color 0.2s;
}
.tool-close:hover { color: #fff; }

/* Terminal */
.terminal-body {
  padding: 1.5rem; height: 300px; overflow-y: auto;
  font-family: var(--mono); font-size: 14px; color: var(--text);
  line-height: 1.6;
}
.terminal-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 1.5rem 1.5rem; font-family: var(--mono); font-size: 14px;
}
.terminal-input-row span { color: var(--gold); }
#terminal-input {
  background: transparent; border: none; color: var(--text);
  font-family: var(--mono); font-size: 14px; outline: none; flex: 1;
}
.term-line { margin-bottom: 0.5rem; }
.term-line.cmd { color: var(--gold); }
.term-line.err { color: #ff6b6b; }

/* Typing */
.typing-body { padding: 1.5rem; }
.typing-sample {
  font-size: 18px; line-height: 1.6; color: var(--muted2);
  margin-bottom: 1rem; font-family: var(--mono);
  user-select: none;
}
.typing-sample span.correct { color: var(--gold); }
.typing-sample span.incorrect { color: #ff6b6b; text-decoration: underline; }
.typing-sample span.active { color: #fff; border-bottom: 2px solid var(--gold); }

.typing-input {
  width: 100%; height: 80px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1rem; color: var(--text); font-family: var(--mono);
  font-size: 16px; resize: none; outline: none; margin-bottom: 1.5rem;
}
.typing-input:focus { border-color: var(--gold-line); }

.typing-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 1.5rem;
}
.typing-stat {
  background: var(--surface); padding: 1rem; border-radius: 4px;
  border: 1px solid var(--border); text-align: center;
}
.typing-stat strong {
  display: block; font-size: 24px; font-family: var(--syne);
  color: var(--gold); margin-bottom: 0.2rem;
}
.typing-stat span { font-size: 12px; color: var(--muted2); text-transform: uppercase; }

.typing-actions { display: flex; gap: 1rem; justify-content: flex-end; }

/* Screen-reader only class for accessibility */
.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;
}

/* ==========================================================================
   GITHUB STATS (About Page) — Premium Gold Theme
   ========================================================================== */
.github-stats-container {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.github-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .github-grid {
    flex-direction: row;
    align-items: stretch;
  }
}

.github-calendar-wrap {
  flex: 1;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
  position: relative;
}
/* Subtle gold glow in corner */
.github-calendar-wrap::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.github-langs-wrap {
  width: 100%;
  max-width: 350px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.github-langs-wrap::before {
  content: '';
  position: absolute;
  bottom: -30px; left: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.github-langs-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ── Override github-calendar defaults ── */
.calendar {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text);
  font-family: var(--sans) !important;
}

/* Hide the ugly "Skip to contributions" link */
.calendar a[href="#gh-contrib-year-list"],
.calendar .sr-only,
.calendar .js-calendar-graph-svg + div,
.calendar .float-left.text-gray,
.calendar .contrib-footer,
.calendar .text-normal {
  display: none !important;
}

/* Tooltip popup */
.calendar .graph-svg-tip {
  background: var(--surface2) !important;
  color: #fff !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 6px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.calendar .graph-svg-tip strong {
  color: var(--gold) !important;
}

/* Month and day labels */
.calendar text.wday,
.calendar text.month {
  font-size: 10px !important;
  fill: var(--muted) !important;
  font-family: var(--mono) !important;
}

/* Contribution cells — override green to GOLD */
.calendar rect[data-level="0"],
.calendar .ContributionCalendar-day[data-level="0"],
.calendar td[data-level="0"] {
  fill: rgba(255,255,255,0.04) !important;
  rx: 3 !important;
  ry: 3 !important;
}
.calendar rect[data-level="1"],
.calendar .ContributionCalendar-day[data-level="1"],
.calendar td[data-level="1"] {
  fill: rgba(201,168,76,0.2) !important;
  rx: 3 !important;
  ry: 3 !important;
}
.calendar rect[data-level="2"],
.calendar .ContributionCalendar-day[data-level="2"],
.calendar td[data-level="2"] {
  fill: rgba(201,168,76,0.45) !important;
  rx: 3 !important;
  ry: 3 !important;
}
.calendar rect[data-level="3"],
.calendar .ContributionCalendar-day[data-level="3"],
.calendar td[data-level="3"] {
  fill: rgba(201,168,76,0.7) !important;
  rx: 3 !important;
  ry: 3 !important;
}
.calendar rect[data-level="4"],
.calendar .ContributionCalendar-day[data-level="4"],
.calendar td[data-level="4"] {
  fill: var(--gold) !important;
  rx: 3 !important;
  ry: 3 !important;
  filter: drop-shadow(0 0 3px rgba(201,168,76,0.4));
}

/* Custom scrollbar inside calendar wrap */
.github-calendar-wrap::-webkit-scrollbar { height: 4px; }
.github-calendar-wrap::-webkit-scrollbar-track { background: transparent; }
.github-calendar-wrap::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 4px; }

/* Legend color overrides */
.calendar .legend li:nth-child(1) { background-color: rgba(255,255,255,0.04) !important; border: 1px solid var(--border) !important; }
.calendar .legend li:nth-child(2) { background-color: rgba(201,168,76,0.2) !important; }
.calendar .legend li:nth-child(3) { background-color: rgba(201,168,76,0.45) !important; }
.calendar .legend li:nth-child(4) { background-color: rgba(201,168,76,0.7) !important; }
.calendar .legend li:nth-child(5) { background-color: var(--gold) !important; }
.calendar .legend { font-size: 11px; color: var(--muted) !important; }

/* Table styling fixes */
.calendar table { border-collapse: separate !important; border-spacing: 3px !important; }
.calendar th { font-size: 10px; color: var(--muted) !important; font-weight: 400; }
.calendar td {
  border-radius: 3px !important;
  outline: none !important;
  border: none !important;
}

/* Hide any remaining ugly links */
.calendar a { color: var(--gold) !important; text-decoration: none !important; font-size: 0 !important; line-height: 0 !important; height: 0 !important; overflow: hidden !important; display: block !important; }

/* Override the scrollbar on the wrapper table */
.calendar .js-calendar-graph { overflow: hidden !important; }

@media (max-width: 1023px) {
  .github-langs-wrap {
    max-width: 100%;
  }
}

/* ── LOGO LOOP ── */
.logo-loop-section {
  width: 100%;
  overflow: hidden;
  padding: 2.5rem 0;
  background-color: rgba(255, 255, 255, 0.015);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  position: relative;
  z-index: 2;
}

.logo-loop-track {
  display: flex;
  width: max-content;
  animation: scroll-loop 60s linear infinite;
}



.logo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 3rem;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.real-logo {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
  transition: filter 0.3s, transform 0.3s;
}

.logo-item:hover .real-logo {
  transform: scale(1.1);
}

.logo-item i {
  font-size: 2rem;
}

.logo-item:hover {
  color: var(--gold);
}

@keyframes scroll-loop {
  to {
    transform: translateX(-50%);
  }
}