/* --- 4. BACKGROUND VISUALS --- */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.golden-thread-svg { position: absolute; top: 0; left: clamp(1rem, 4vw, 2.5rem); width: 2px; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
#golden-thread-path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--gold)); opacity: 0.6; }

#data-packet { stroke: var(--emerald); stroke-width: 4; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 10px var(--emerald)); }

.dot-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(180,83,9,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
[data-theme="dark"] .dot-grid { background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px); }

/* --- 13. ABOUT & BIO --- */
.section.about { overflow: hidden; }
.section.about .container { display: flex; flex-direction: column; gap: 1.5rem; }
.section.about .section-header { margin-bottom: 0; }
.section.about .section-header h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }

.about-box {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;
  background: var(--card); border: 1px solid var(--border-b); border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.5rem); box-shadow: 0 4px 40px rgba(99,102,241,0.10);
}

.about-bio { display: flex; flex-direction: column; gap: 1.2rem; }
.about-intro {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.8;
  max-width: 52rem;
}
.bio-p { font-size: 1.05rem; color: var(--text2); line-height: 1.8; }
.bio-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(99,102,241,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.bio-fact { display: flex; align-items: center; gap: .8rem; font-size: .88rem; color: var(--text2); }
.bf-icon { font-size: .88rem; flex-shrink: 0; }

/* Bio Chapters (Narrative Weave) */
.bio-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: .5rem; }
.bio-chapter { display: flex; gap: 1rem; padding: 1.3rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; min-height: 100%; }
.bio-chapter:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-6px); border-color: var(--border-b); }
.chapter-icon { font-size: 2rem; flex-shrink: 0; opacity: 0.8; }
.chapter-title { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--gold); margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.chapter-date { font-size: 0.8rem; color: var(--text3); font-weight: 400; white-space: nowrap; }
.chapter-p { color: var(--text2); line-height: 1.65; font-size: 0.92rem; }

/* Career Timeline Visuals */
.thread-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.milestone-node { position: absolute; left: 2px; width: 12px; height: 12px; background: #10b981; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(4px); opacity: 0.3; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 11; }
.milestone-node.active { width: 20px; height: 20px; opacity: 1; filter: blur(0) drop-shadow(0 0 10px #10b981); background: #34d399; }
.milestone-node::after { content: attr(data-chapter); position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; white-space: nowrap; opacity: 0; transition: opacity 0.4s ease; }
.milestone-node.active::after { opacity: 0.8; color: var(--text-gold); }

/* --- 14. CAREER TIMELINE --- */
.tl-heading { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .85rem; }
.about-timeline-shell {
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.55));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.about-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.timeline-intro {
  max-width: 28rem;
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.6;
}

.about-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.5rem;
  padding-right: 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 .75rem;
  position: relative;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid rgba(99,102,241,0.08);
}
.tl-left { display: flex; flex-direction: column; align-items: center; }
.tl-badge { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; letter-spacing: .03em; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); position: relative; z-index: 1; }
.tl-badge-edu { background: #EDE9FE; color: #6D28D9; border: 2px solid #A78BFA; }
.tl-badge-uni { background: #FEF3C7; color: #B45309; border: 2px solid #FCD34D; }
.tl-badge-work { background: #CCFBF1; color: #0D9488; border: 2px solid #5EEAD4; overflow: hidden; }
.tl-badge-wns { background: #EEF2FF; color: #4338CA; border: 2px solid #A5B4FC; overflow: hidden; }
.tl-badge-gim { background: linear-gradient(135deg, var(--gold) 0%, var(--blue) 100%); color: #fff; border: 2px solid var(--gold-lt); box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 2px 12px rgba(67,56,202,0.30); animation: tl-pulse 2.4s ease-in-out infinite; }
@keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 2px 12px rgba(67,56,202,0.30); } 50% { box-shadow: 0 0 0 6px rgba(99,102,241,0.10), 0 4px 18px rgba(67,56,202,0.45); } }
.tl-spine { flex: 1; width: 2px; min-height: 14px; background: linear-gradient(to bottom, var(--border-b), rgba(99,102,241,0.08)); margin-top: 3px; transform-origin: top center; }
.tl-content { padding: .1rem 0 1rem 0; display: flex; flex-direction: column; gap: .18rem; }
.tl-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); }
.tl-type-now { color: var(--gold); animation: tl-blink 2.2s ease-in-out infinite; }
@keyframes tl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tl-title { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0; }
.tl-org { font-size: .76rem; font-weight: 500; color: var(--gold); margin: 0; }
.tl-date, .tl-detail { font-size: .68rem; color: var(--text3); }
.tl-date::before { content: '📅 '; }
.tl-detail::before { content: '· '; }
.tl-current .tl-content { padding-bottom: .4rem; }
.tl-current .tl-title { color: var(--gold); }
.badge-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background-color: #ffffff; display: block; transform: scale(0.8); }

/* --- 15. SKILLS --- */
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.skill-card { background: var(--card); border: 1px solid var(--card-b); border-radius: var(--r); padding: 2.2rem; transition: border-color .25s, box-shadow .25s; }
.skill-card:hover { border-color: rgba(99,102,241,0.25); box-shadow: var(--glow-gold); }
.skill-card-hd { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; }
.sk-icon { font-size: 1.4rem; }
.skill-card-hd h3 { font-size: .95rem; font-weight: 600; color: var(--text); }
.skill-list { display: flex; flex-direction: column; gap: .95rem; }
.sk-row { display: flex; flex-direction: column; gap: .35rem; }
.sk-labels { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text2); }
.sk-track { height: 4px; background: rgba(99,102,241,0.10); border-radius: 99px; overflow: hidden; }
.sk-fill { height: 100%; width: 0; background: var(--c, var(--gold)); border-radius: 99px; box-shadow: 0 0 6px var(--c, var(--gold)); transition: width 1.3s cubic-bezier(.25,.46,.45,.94); }

/* --- 16. PROJECTS --- */
.projects-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.projects-highlight,
.projects-summary-card {
  background: var(--card);
  border: 1px solid var(--border-b);
  border-radius: var(--r);
  padding: 1.35rem 1.4rem;
}

.projects-highlight {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7rem;
}

.projects-highlight-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.projects-highlight h3 {
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--text);
}

.projects-highlight p,
.projects-archive-copy {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.7;
}

.projects-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 100%;
}

.projects-summary-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold);
}

.projects-summary-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text2);
}

.projects-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.projects-archive-title {
  font-size: 1.05rem;
  color: var(--text);
}

.proj-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ptab { display: flex; align-items: center; gap: .45rem; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: .45rem 1rem; font-size: .78rem; font-weight: 500; color: var(--text2); cursor: pointer; transition: all .22s; }
.ptab-n { font-size: .64rem; font-weight: 700; background: rgba(99,102,241,0.08); border-radius: 4px; padding: .1rem .4rem; color: var(--text2); transition: all .22s; }
.ptab:hover, .ptab.active { background: color-mix(in srgb, var(--cat, var(--gold)) 10%, transparent); border-color: var(--cat, var(--gold)); color: var(--cat, var(--gold)); }
.ptab.active .ptab-n { background: color-mix(in srgb, var(--cat, var(--gold)) 18%, transparent); color: var(--cat, var(--gold)); }
.proj-stage { position: relative; }
.proj-panel { display: none; }
.proj-panel.active { display: block; animation: panelFadeIn .35s ease; }
@keyframes panelFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

.pj-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border-b); border-radius: var(--r); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; position: relative; }
.pj-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cat, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.pj-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cat, var(--gold)) 40%, transparent); box-shadow: 0 8px 32px color-mix(in srgb, var(--cat, var(--gold)) 14%, transparent); }
.pj-card:hover::after { transform: scaleX(1); }

.pj-cover { width: 100%; height: 130px; background: linear-gradient(135deg, color-mix(in srgb, var(--cat, var(--gold)) 14%, var(--bg2)) 0%, color-mix(in srgb, var(--cat, var(--gold)) 7%, var(--bg3)) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; flex-shrink: 0; }
.pj-cover::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--cat, var(--gold)) 20%, transparent) 1px, transparent 1px); background-size: 18px 18px; opacity: 0.55; }
.pj-cover-icon { font-size: 2.4rem; opacity: 0.55; position: relative; z-index: 1; user-select: none; }
.pj-cover:has(.pj-img) { height: auto; min-height: unset; background: none; }
.pj-img { position: static; width: 100%; height: auto; display: block; object-fit: unset; transition: transform .4s ease; }
.pj-cover:has(.pj-img)::before { display: none; }
.pj-cover:has(.pj-img) .pj-cover-icon { display: none; }
.pj-card:hover .pj-img { transform: scale(1.02); }

.pj-body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem 1.35rem 1.35rem; }
.pj-header { display: flex; justify-content: space-between; align-items: center; }
.pj-n { font-size: .72rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--cat, var(--gold)); letter-spacing: .04em; }
.pj-link { font-size: .88rem; color: var(--text3); line-height: 1; transition: color .2s, transform .2s; flex-shrink: 0; }
.pj-link:hover { color: var(--cat, var(--gold)); transform: translate(2px, -2px); }
.pj-title { font-size: .94rem; font-weight: 700; color: var(--text); line-height: 1.4; margin: 0; }
.pj-tags { display: flex; flex-wrap: wrap; gap: .28rem; }
.pj-tags span { font-size: .62rem; font-weight: 500; background: color-mix(in srgb, var(--cat, var(--gold)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cat, var(--gold)) 22%, transparent); border-radius: 4px; padding: .08rem .4rem; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
.pj-desc { font-size: .8rem; color: var(--text2); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pj-meta { display: flex; flex-direction: column; gap: .32rem; margin-top: .2rem; padding-top: .55rem; border-top: 1px solid var(--border); }
.pj-insight, .pj-impact { display: flex; flex-direction: column; gap: .12rem; }
.pj-ml { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); }
.pj-insight .pj-ml { color: color-mix(in srgb, var(--cat, var(--gold)) 70%, var(--text3)); }
.pj-impact .pj-ml { color: var(--emerald); }
.pj-insight p, .pj-impact p { font-size: .74rem; color: var(--text2); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- 17. BLOG --- */
.blog-carousel { display: flex; align-items: center; gap: 1rem; position: relative; }
.blog-track-wrap { flex: 1; overflow: hidden; }
.blog-track { display: flex; gap: 1.4rem; transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.blog-card { background: var(--card); border: 1px solid var(--card-b); border-radius: var(--r); padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; transition: transform .25s, border-color .25s; flex: 0 0 calc((100% - 2 * 1.4rem) / 3); min-width: 0; }
.blog-card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,0.25); }
.blog-arrow { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--text2); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .22s, border-color .22s, color .22s, transform .22s; user-select: none; }
.blog-arrow:hover { background: rgba(99,102,241,0.08); border-color: var(--gold); color: var(--gold); transform: scale(1.08); }
.blog-arrow:disabled { opacity: 0.25; pointer-events: none; }
.blog-featured { border-color: rgba(99,102,241,0.25); background: rgba(99,102,241,0.04); }
.blog-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .72rem; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
.blog-feat-tag { font-size: .65rem; font-weight: 700; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25); color: var(--gold); border-radius: 4px; padding: .12rem .55rem; }
.blog-card h3 { font-size: .92rem; font-weight: 600; line-height: 1.45; color: var(--text); }
.blog-card p { font-size: .83rem; color: var(--text2); line-height: 1.6; flex: 1; }
.blog-cta { font-size: .8rem; font-weight: 600; color: var(--gold); transition: letter-spacing .2s; margin-top: auto; }
.blog-cta:hover { letter-spacing: .03em; }

/* --- 18. CONTACT --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6rem; align-items: start; }
.contact-desc { font-size: 1.05rem; color: var(--text2); line-height: 1.9; margin-bottom: 2.5rem; }
.contact-details { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2rem; }
.cd-row { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--text2); }
.cd-icon { font-size: 1rem; }
.social-row { display: flex; gap: .65rem; margin-bottom: 2rem; }
.soc-btn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-b); display: flex; align-items: center; justify-content: center; color: var(--text2); transition: border-color .2s, color .2s, box-shadow .2s, background .2s; }
.soc-btn svg { display: block; flex-shrink: 0; }
.soc-btn:hover { background: rgba(255,253,248,0.6); }
.soc-btn[title="LinkedIn"]:hover { border-color: #0A66C2; color: #0A66C2; box-shadow: 0 0 20px rgba(10,102,194,0.20); }
.soc-btn[title="GitHub"]:hover { border-color: #24292F; color: #24292F; box-shadow: 0 0 20px rgba(36,41,47,0.15); }
.soc-btn[title="Kaggle"]:hover { border-color: #20BEFF; color: #20BEFF; box-shadow: 0 0 20px rgba(32,190,255,0.20); }
.soc-btn[title="X"]:hover { border-color: #000000; color: #000000; box-shadow: 0 0 20px rgba(0,0,0,0.12); }

.contact-form { background: var(--card); border: 1px solid var(--card-b); border-radius: var(--r); padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.fg { position: relative; display: flex; flex-direction: column; }
.fi { background: rgba(255,255,255,0.85); border: 1px solid var(--border-b); border-radius: var(--r-sm); padding: 1rem 1rem .55rem; color: var(--text); font-size: .88rem; font-family: inherit; outline: none; resize: none; transition: border-color .2s, box-shadow .2s; }
.fi:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.fg label { position: absolute; left: 1rem; top: .8rem; font-size: .82rem; color: var(--text2); pointer-events: none; transition: top .18s, font-size .18s, color .18s; }
.fi:focus ~ label, .fi:not(:placeholder-shown) ~ label { top: .22rem; font-size: .66rem; color: var(--gold); }
.fi-ta { min-height: 115px; padding-top: 1.2rem; }
.form-btn { align-self: flex-end; gap: .5rem; }

/* --- Quick-Links & Pills --- */
.about-links { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.link-pill { font-size: .82rem; font-weight: 500; color: var(--text2); border-bottom: 1px solid var(--text3); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.link-pill:hover { color: var(--gold); border-color: var(--gold); }
.about-contact-pills { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.contact-pill { display: flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--border-b); background: rgba(255,255,255,0.75); text-decoration: none; transition: transform .22s, border-color .22s, box-shadow .22s; flex: 1; min-width: 140px; }
.contact-pill:hover { transform: translateY(-2px); }
.cp-linkedin:hover { border-color: #0a66c2; box-shadow: 0 4px 20px rgba(10,102,194,0.25); }
.cp-whatsapp:hover { border-color: #22c55e; box-shadow: 0 4px 20px rgba(34,197,94,0.25); }
.cp-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.cp-linkedin .cp-icon { color: #0a66c2; }
.cp-whatsapp .cp-icon { color: #22c55e; }
.contact-pill span:nth-child(2) { font-size: .74rem; font-weight: 600; color: var(--text); }
.cp-handle { font-size: .68rem; color: var(--text2); font-family: 'JetBrains Mono', monospace; }

/* --- 19. CERTIFICATES --- */
.section.certificates { overflow-y: auto; }
.cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-bottom: 1.8rem; }
.cert-card { background: var(--card); border: 1px solid var(--border-b); border-radius: var(--r); padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: .55rem; position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.cert-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--teal)); opacity: 0; transition: opacity .25s; }
.cert-card:hover { transform: translateY(-3px); border-color: var(--border-b); box-shadow: var(--glow-gold); }
.cert-card:hover::before { opacity: 1; }
.cert-badge { width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid var(--border-b); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.cert-body { flex: 1; }
.cert-issuer { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: .3rem; font-family: 'JetBrains Mono', monospace; }
.cert-name { font-size: .82rem; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: .3rem; }
.cert-date { font-size: .68rem; color: var(--text3); font-family: 'JetBrains Mono', monospace; }
.cert-status { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #0D9488; background: rgba(13,148,136,0.10); border: 1px solid rgba(13,148,136,0.22); border-radius: 4px; padding: .15rem .5rem; align-self: flex-start; }
.cert-footer { display: flex; justify-content: center; padding-top: .5rem; }

/* --- 20. LEARNING --- */
.section.learning { overflow-y: auto; }
.learn-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ltab { display: flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); padding: .45rem 1rem; font-size: .78rem; font-weight: 500; color: var(--text2); cursor: pointer; transition: all .22s; white-space: nowrap; }
.ltab:hover { border-color: rgba(99,102,241,0.3); color: var(--text); background: rgba(99,102,241,0.06); }
.ltab.active { background: rgba(99,102,241,0.10); border-color: var(--gold); color: var(--gold); box-shadow: var(--glow-gold); }
.learn-stage { position: relative; }
.learn-panel { display: none; }
.learn-panel.active { display: block; animation: panelFadeIn .3s ease; }
.learn-list { list-style: disc; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.learn-list li { font-size: .92rem; color: var(--text2); line-height: 1.5; padding-left: .25rem; }
.learn-list li::marker { color: var(--gold); }
.learn-list li a { color: var(--text2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; padding-bottom: 1px; }
.learn-list li a::after { content: ' ↗'; font-size: .75em; opacity: 0.5; transition: opacity .18s; }
.learn-list li a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.learn-list li a:hover::after { opacity: 1; }

/* --- FOOTER & WATERMARK --- */
.main-footer { width: 100%; padding: 5rem 0 3rem; display: flex; justify-content: center; align-items: center; background: transparent; position: relative; z-index: 100; clear: both; }
.footer-copyright { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 800; color: var(--text); letter-spacing: 0.05em; text-align: center; text-transform: uppercase; opacity: 0.9; margin: 0 auto; width: auto; max-width: 90vw; }
.watermark { display: none !important; }