:root {
  --color-primary:       #4F46E5; 
  --color-primary-hover: #4338CA; 
  --color-primary-mid:   #6366F1; 
  --color-primary-soft:  #818CF8; 
  --color-link:          var(--color-primary); 
  --color-bg:            #FFFFFF; 
  --color-surface:       #F8FAFC; 
  --color-surface-hover: #F1F5F9; 
  --color-accent:        #EEF2FF; 
  --color-accent-alt:    #F5F3FF; 
  --color-dark-section:  #0F172A; 
  --color-footer-bg:     #080F1E; 
  --color-footer-text:   #94A3B8; 
  --color-text:          #0F172A; 
  --color-text-muted:    #64748B; 
  --color-text-light:    #94A3B8; 
  --color-border:        #E2E8F0; 
  --color-border-mid:    #CBD5E1; 
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               Consolas, 'Courier New', monospace;
  --radius-xs: 3px; 
  --radius-sm: 4px; 
  --radius-md: 6px; 
  --radius-lg: 8px; 
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.06); 
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); 
  --nav-height: 64px;
  --section-padding-x: 120px;
  --section-padding-y: 80px;
  --transition-theme:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease;
}
[data-theme="dark"] {
  --color-primary:       #6366F1; 
  --color-primary-hover: #818CF8; 
  --color-primary-mid:   #818CF8; 
  --color-primary-soft:  #A5B4FC; 
  --color-link:          var(--color-primary-mid); 
  --color-bg:            #0F172A; 
  --color-surface:       #1E293B; 
  --color-surface-hover: #263348; 
  --color-accent:        #1E1B4B; 
  --color-accent-alt:    #2D1B69; 
  --color-dark-section:  #080F1E; 
  --color-footer-bg:     #040810; 
  --color-footer-text:   #94A3B8; 
  --color-text:          #F1F5F9; 
  --color-text-muted:    #94A3B8; 
  --color-text-light:    #64748B; 
  --color-border:        #334155; 
  --color-border-mid:    #475569; 
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin:  0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  margin:  0;
  padding: 0;
}
p {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size:   inherit;
  font-weight: inherit;
  line-height: inherit;
}
address {
  font-style: normal;
}
ul,
ol {
  list-style: none;
  margin:     0;
  padding:    0;
}
img,
svg,
picture {
  display:   block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font:       inherit;
  color:      inherit;
  background: transparent;
  border:     none;
  padding:    0;
  margin:     0;
  cursor:     pointer;
}
* {
  -webkit-tap-highlight-color: transparent;
}
a {
  color:           inherit;
  text-decoration: none;
}
pre,
code {
  font-family: var(--font-mono);
}
table {
  border-collapse: collapse;
  border-spacing:  0;
}
html {
  scrollbar-gutter: stable;
}
body {
  font-family: var(--font-sans);
  font-size:   1rem;         
  line-height: 1.7;          
  background:  var(--color-bg);
  color:       var(--color-text);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  font-family: var(--font-sans);
  font-size:   2.25rem;   
  font-weight: 700;
  line-height: 1.1;       
  color:       var(--color-text);
}
h2 {
  font-family: var(--font-sans);
  font-size:   1.75rem;   
  font-weight: 700;
  line-height: 1.2;
  color:       var(--color-text);
}
h3 {
  font-family: var(--font-sans);
  font-size:   1.125rem;  
  font-weight: 700;
  line-height: 1.3;
  color:       var(--color-text);
}
@media (min-width: 1024px) {
  h1 { font-size: 3.75rem; } 
  h2 { font-size: 2rem;    } 
  h3 { font-size: 1.25rem; } 
}
p {
  font-size:   1rem;    
  line-height: 1.7;
  color:       var(--color-text-muted); 
}
small,
.text-small {
  font-size:   0.8125rem; 
  line-height: 1.5;
}
.text-mono {
  font-family: var(--font-mono);
  font-size:   0.75rem;   
}
a {
  color:           var(--color-link);
  text-decoration: none;
  transition:      color 0.15s ease;
}
a:hover {
  color:           var(--color-primary-hover);
  text-decoration: underline;
}
:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius:  var(--radius-xs); 
}
:focus:not(:focus-visible) {
  outline: none;
}
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  z-index:    9999;
  padding:    0.5rem 1rem;
  background: var(--color-primary);
  color:      #FFFFFF;
  font-size:  0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 1rem;
}
section[id] {
  scroll-margin-top: var(--nav-height);
}
@media (prefers-reduced-motion: no-preference) {
  body,
  nav,
  header,
  footer,
  main,
  section,
  article,
  .card,
  .skill-tag,
  .tech-tag {
    transition: var(--transition-theme);
  }
}
.section--dark {
  background: var(--color-dark-section);
  color:      var(--color-text);   
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark a {
  color: var(--color-surface); 
}
.section--dark p {
  color: #94A3B8; 
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.section {
  padding: var(--section-padding-y) var(--section-padding-x);
  background: var(--color-bg);
  width: 100%;
}
.section + .section {
  border-top: 1px solid var(--color-border);
}
.section-header {
  display:     flex;
  align-items: center;
  gap:         12px;               
}
.section-number {
  font-family: var(--font-mono);
  font-size:   0.75rem;            
  font-weight: 600;
  color:       var(--color-primary); 
  line-height: 1;
  flex-shrink: 0;
}
.section-line {
  flex:             1;             
  height:           2px;
  background:       var(--color-primary);
  border-radius:    1px;
  min-width:        24px;          
}
.section-label {
  font-family:    var(--font-mono);
  font-size:      0.75rem;         
  font-weight:    600;
  color:          var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height:    1;
  flex-shrink:    0;
}
.section--hero {
  display:     flex;
  flex-direction: row;
  align-items: center;             
  gap:         80px;               
  padding-top:    100px;           
  padding-bottom: 100px;
  background:  var(--color-bg);
}
.hero__content {
  display:        flex;
  flex-direction: column;
  gap:            24px;            
  flex:           1;               
  min-width:      0;               
}
.hero__photo {
  width:         440px;
  height:        520px;
  border-radius: var(--radius-md); 
  object-fit:    cover;
  flex-shrink:   0;                
}
.section--about {
  display:        flex;
  flex-direction: column;
  gap:            28px;            
}
.section--about h2 {
  font-size: 2.5rem;               
  line-height: 1.2;
}
.section--skills-experience {
  display: flex;
  flex-direction: row;
  align-items: stretch;            
  padding: 0;                      
  border-top: 1px solid var(--color-border);
}
.skills-panel {
  width:      480px;
  flex-shrink: 0;                  
  padding:    80px 60px 80px 120px; 
  background: var(--color-surface);
  display:    flex;
  flex-direction: column;
  gap:        28px;                
  border-right: 1px solid var(--color-border); 
}
.experience-panel {
  flex:       1;                   
  padding:    80px 120px 80px 80px; 
  background: var(--color-bg);
  display:    flex;
  flex-direction: column;
  gap:        32px;                
  min-width:  0;                   
}
.section--projects {
  display:        flex;
  flex-direction: column;
  gap:            32px;            
}
.projects-grid {
  display:        flex;
  flex-direction: column;
  gap:            20px;            
  width:          100%;
}
.section--education {
  display:        flex;
  flex-direction: column;
  gap:            32px;            
}
.education-content {
  display:        flex;
  flex-direction: column;
  gap:            60px;            
  width:          100%;
}
.section--contact {
  display:        flex;
  flex-direction: column;
  gap:            40px;            
  background:     var(--color-dark-section); 
}
.section--contact h2 {
  font-size:   3rem;               
  line-height: 1.15;
  color:       var(--color-surface); 
}
.section--contact .contact-subtitle {
  font-family: var(--font-mono);
  font-size:   1rem;               
  color:       var(--color-text-muted);
}
.contact-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;                       
}
footer {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;  
  align-items:     center;
  padding:         24px var(--section-padding-x); 
  background:      var(--color-footer-bg);  
}
footer p,
footer span,
footer a {
  font-family: var(--font-mono);
  font-size:   0.8125rem;          
  color:       var(--color-footer-text);
  line-height: 1;
}
@media (max-width: 1024px) {
  .section {
    padding-left:  48px;
    padding-right: 48px;
  }
  .section--hero {
    flex-direction: column-reverse; 
    align-items:    center;
    gap:            40px;
    padding-top:    64px;
    padding-bottom: 64px;
    padding-left:   48px;
    padding-right:  48px;
  }
  .hero__photo {
    width:  320px;
    height: 380px;
  }
  .section--skills-experience {
    flex-direction: column;
  }
  .skills-panel {
    width:        100%;
    flex-shrink:  1;
    padding:      48px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .experience-panel {
    width:   100%;
    padding: 48px;
  }
  footer {
    padding-left:  48px;
    padding-right: 48px;
  }
}
@media (max-width: 768px) {
  .section {
    padding-top:    48px;
    padding-bottom: 48px;
    padding-left:   20px;
    padding-right:  20px;
  }
  .section--hero {
    flex-direction:  column-reverse;
    align-items:     flex-start;
    gap:             28px;
    padding-top:     48px;
    padding-bottom:  48px;
    padding-left:    20px;
    padding-right:   20px;
  }
  .hero__photo {
    width:  100%;
    height: 260px;
  }
  .section--about {
    gap: 20px;
  }
  .section--about h2 {
    font-size: 2rem;               
  }
  .skills-panel,
  .experience-panel {
    padding: 40px 20px;
  }
  .projects-grid {
    gap: 16px;
  }
  .education-content {
    gap: 40px;
  }
  .section--contact h2 {
    font-size:   2rem;             
    line-height: 1.2;
  }
  .contact-links {
    flex-direction: column;
    gap: 12px;
  }
  footer {
    flex-direction:  column;
    align-items:     flex-start;
    gap:             8px;
    padding:         20px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  [data-animate].is-visible {
    opacity:   1;
    transform: translateY(0);
  }
  [data-animate][data-animate-delay="1"] { transition-delay: 0.08s; }
  [data-animate][data-animate-delay="2"] { transition-delay: 0.16s; }
  [data-animate][data-animate-delay="3"] { transition-delay: 0.24s; }
  [data-animate][data-animate-delay="4"] { transition-delay: 0.32s; }
  [data-animate][data-animate-delay="5"] { transition-delay: 0.40s; }
}
[data-animate] {
  opacity:   1;
  transform: none;
}
.site-header {
  position:   sticky;
  top:        0;
  z-index:    100;
  background: var(--color-bg);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--nav-height); 
  padding:         0 var(--section-padding-x); 
}
.nav__brand {
  display:     flex;
  align-items: center;
  gap:         10px; 
  text-decoration: none;
  flex-shrink: 0;
  align-self:  stretch;
  min-width:   44px;
}
.nav__monogram {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  background:      var(--color-primary); 
  color:           #FFFFFF;
  font-family:     var(--font-mono);
  font-size:       0.75rem;   
  font-weight:     700;       
  border-radius:   var(--radius-sm); 
  flex-shrink:     0;
  line-height:     1;
  letter-spacing:  0.02em;
}
.nav__name {
  font-family: var(--font-mono);
  font-size:   0.8125rem;   
  font-weight: 500;
  color:       var(--color-text);
  white-space: nowrap;
}
.nav__links {
  display:     flex;
  align-items: center;
  gap:         24px; 
  list-style:  none;
  margin:      0;
  padding:     0;
}
.nav__link {
  font-family:     var(--font-sans);
  font-size:       0.8125rem;  
  font-weight:     400;
  color:           var(--color-text-muted); 
  text-decoration: none;
  transition:      color 0.15s ease;
  white-space:     nowrap;
}
.nav__link:hover {
  color: var(--color-primary); 
}
.nav__controls {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}
.nav__toggle-theme {
  display:         flex;
  align-items:     center;
  gap:             6px; 
  padding:         6px 14px; 
  background:      var(--color-surface); 
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md); 
  font-family:     var(--font-mono);
  font-size:       0.75rem; 
  font-weight:     400;
  color:           var(--color-text-muted); 
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background 0.15s ease, border-color 0.15s ease,
                   color 0.15s ease;
}
.nav__toggle-theme:hover {
  background:    var(--color-surface-hover);
  border-color:  var(--color-border-mid);
  color:         var(--color-text);
}
.nav__toggle-light {
  display: none;
}
[data-theme="dark"] .nav__toggle-dark {
  display: none;
}
[data-theme="dark"] .nav__toggle-light {
  display: inline;
}
.nav__hamburger {
  display:        none; 
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          44px;
  height:         44px;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  border-radius:  var(--radius-sm);
}
.nav__hamburger:hover {
  background: var(--color-surface-hover);
}
.nav__hamburger-bar {
  display:          block;
  width:            20px;
  height:           2px;
  background:       var(--color-text);
  border-radius:    1px;
  transition:       transform 0.2s ease, opacity 0.2s ease;
}
.nav-open .nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-open .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-open .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav__mobile-menu {
  overflow:    hidden;
  max-height:  0;
  visibility:  hidden;          
  background:  var(--color-bg);
  border-top:  1px solid var(--color-border);
  transition:  max-height 0.25s ease,
               visibility 0s linear 0.25s; 
}
@media (prefers-reduced-motion: reduce) {
  .nav__mobile-menu {
    transition: none;
  }
}
.nav-open .nav__mobile-menu {
  max-height:  400px;           
  visibility:  visible;         
  transition:  max-height 0.25s ease,
               visibility 0s linear; 
}
.nav__mobile-links {
  list-style: none;
  margin:     0;
  padding:    12px 0;
}
.nav__mobile-link {
  display:         block;
  padding:         12px var(--section-padding-x); 
  font-family:     var(--font-sans);
  font-size:       0.9375rem; 
  font-weight:     400;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color 0.15s ease, background 0.15s ease;
}
.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color:      var(--color-primary);
  background: var(--color-surface);
}
.nav__link.active {
  color:       var(--color-primary);
  font-weight: 500;
}
.nav__mobile-link.active {
  color:       var(--color-primary);
  font-weight: 500;
}
[data-theme="dark"] .site-header {
  background: var(--color-surface); 
}
[data-theme="dark"] .nav__mobile-menu {
  background: var(--color-surface);
}
@media (max-width: 1024px) {
  .nav {
    padding-left:  48px;
    padding-right: 48px;
  }
  .nav__links {
    display: none;
  }
  .nav__hamburger {
    display: flex;
  }
  .nav__mobile-link {
    padding-left:  48px;
    padding-right: 48px;
  }
}
@media (max-width: 768px) {
  .nav {
    padding-left:  20px;
    padding-right: 20px;
  }
  .nav__mobile-link {
    padding-left:  20px;
    padding-right: 20px;
  }
  .nav__name {
    display: none;
  }
  .nav__toggle-theme {
    min-height: 44px;
  }
}
.hero__comment {
  font-family: var(--font-mono);
  font-size:   0.8125rem;   
  font-weight: 400;
  color:       var(--color-primary); 
  line-height: 1.4;
  margin:      0;
}
.hero__name {
  color: var(--color-text); 
}
.hero__tagline {
  font-family: var(--font-sans);
  font-size:   1.125rem;   
  font-weight: 400;
  line-height: 1.65;       
  color:       var(--color-text-muted); 
  margin:      0;
}
.hero__socials {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px; 
}
.hero__social-link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;            
  padding:         12px 20px;      
  border-radius:   var(--radius-sm); 
  font-family:     var(--font-sans);
  font-size:       0.875rem;       
  font-weight:     400;
  color:           var(--color-text-muted); 
  text-decoration: none;
  border:          1px solid var(--color-border);
  background:      transparent;
  transition:      background 0.15s ease, color 0.15s ease,
                   border-color 0.15s ease;
  white-space:     nowrap;
}
.hero__social-link:hover {
  background:      var(--color-surface);
  color:           var(--color-text);
  border-color:    var(--color-border-mid);
  text-decoration: none;
}
.hero__social-link--primary {
  background:  var(--color-primary); 
  color:       #FFFFFF;              
  border:      1px solid var(--color-primary);
}
.hero__social-link--primary:hover {
  background:      var(--color-primary-hover); 
  border-color:    var(--color-primary-hover);
  color:           #FFFFFF;
  text-decoration: none;
}
.hero__social-icon {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
}
.hero__photo {
  object-fit:    cover;
  object-position: center top; 
  display:       block;
}
[data-theme="dark"] .hero__social-link {
  border-color: var(--color-border); 
}
[data-theme="dark"] .hero__social-link:hover {
  background:   var(--color-surface-hover);
  border-color: var(--color-border-mid);
}
[data-theme="dark"] .hero__social-link--primary {
  background:   #4F46E5; 
  border-color: #4F46E5;
}
@media (max-width: 1024px) {
  .hero__tagline {
    font-size: 1rem; 
  }
}
@media (max-width: 768px) {
  .hero__comment {
    font-size: 0.75rem; 
  }
  .hero__tagline {
    font-size: 0.9375rem; 
  }
  .hero__social-link {
    padding:   10px 16px;
    font-size: 0.8125rem; 
  }
}
.about__title {
  line-height: 1.2; 
  color:       var(--color-text);
}
.about__bio {
  max-width: 72ch; 
}
.about__bio p {
  font-size:   1rem;    
  line-height: 1.7;     
  color:       var(--color-text-muted); 
}
.about__stats {
  display: flex;
  gap:     20px; 
  width:   100%;
}
.about__stat {
  display:        flex;
  flex-direction: column;
  gap:            4px;            
  flex:           1;              
  padding:        28px;           
  border-radius:  var(--radius-lg); 
}
.about__stat--accent {
  background: var(--color-accent);        
}
.about__stat--surface {
  background: var(--color-surface-hover); 
}
.about__stat--alt {
  background: var(--color-accent-alt);    
}
.about__stat-value {
  font-family: var(--font-mono);
  font-size:   2rem;     
  font-weight: 700;      
  color:       var(--color-primary); 
  line-height: 1;
}
.about__stat-label {
  font-family: var(--font-sans);
  font-size:   0.8125rem; 
  font-weight: 400;
  color:       var(--color-text-light); 
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .about__stat {
    padding: 20px;
  }
  .about__stat-value {
    font-size: 1.75rem; 
  }
}
@media (max-width: 768px) {
  .about__stats {
    display:               grid;
    grid-template-columns: repeat(2, 1fr); 
    gap:                   12px;
  }
  .about__stat:last-child {
    grid-column: 1 / -1;
  }
  .about__stat {
    padding: 20px;
  }
  .about__stat-value {
    font-size: 1.5rem; 
  }
  .about__bio {
    max-width: 100%;
  }
}
.skills__title {
  color: var(--color-text); 
}
.skills__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px; 
}
.skill-tag {
  display:       inline-block;
  font-family:   var(--font-mono);  
  font-size:     clamp(
                   0.6875rem,
                   calc(0.7rem + (var(--weight, 5) - 1) * 0.025rem),
                   0.9375rem
                 );                 
  font-weight:   400;               
  border-radius: var(--radius-xs);  
  line-height:   1;
  white-space:   nowrap;            
  transition:    background-color 0.15s ease,
                 color            0.15s ease,
                 border-color     0.15s ease;
}
.skill-tag--t1 {
  background:  var(--color-text);         
  color:       var(--color-primary-soft); 
  font-weight: 700;                       
  padding:     7px 12px;                  
}
.skill-tag--t2 {
  background:  var(--color-text);      
  color:       var(--color-primary-soft); 
  font-weight: 600;                    
  padding:     6px 12px;              
}
.skill-tag--t3 {
  background:  var(--color-accent);  
  color:       var(--color-primary); 
  font-weight: 400;
  padding:     6px 12px;             
}
.skill-tag--t4 {
  background:  transparent;
  color:       var(--color-primary); 
  font-weight: 400;
  padding:     5px 10px;             
  border:      1px solid var(--color-border); 
}
.skill-tag--t5 {
  background:  transparent;
  color:       #475569;                
  font-weight: 400;
  padding:     5px 10px;               
  border:      1px solid var(--color-border); 
}
.skill-tag:hover {
  background:   var(--color-surface-hover); 
  color:        var(--color-text);          
  border-color: var(--color-border-mid);    
}
@media (prefers-reduced-motion: no-preference) {
  .skill-tag {
    transition: background-color 0.15s ease,
                color            0.15s ease,
                border-color     0.15s ease,
                transform        0.15s ease;
  }
  .skill-tag:hover {
    transform: scale(1.05); 
  }
}
[data-theme="dark"] .skill-tag--t1 {
  background: var(--color-accent);     
  color:      var(--color-primary-soft); 
}
[data-theme="dark"] .skill-tag--t2 {
  background: var(--color-accent);     
  color:      var(--color-primary-soft); 
}
[data-theme="dark"] .skill-tag--t4 {
  color:        var(--color-primary-mid); 
  border-color: var(--color-border);      
}
[data-theme="dark"] .skill-tag--t5 {
  color:        var(--color-text-muted); 
  border-color: var(--color-border);     
}
[data-theme="dark"] .skill-tag:hover {
  background:   var(--color-surface-hover); 
  color:        var(--color-text);
  border-color: var(--color-border-mid);    
}
@media (max-width: 1024px) {
  .skills__tags {
    gap: 6px;
  }
}
@media (max-width: 768px) {
  .skills__tags {
    gap: 6px;
  }
  .skill-tag--t1 {
    padding: 6px 10px;
  }
  .skill-tag--t2 {
    padding: 5px 10px;
  }
}
.exp__title {
  color: var(--color-text); 
}
.exp__timeline {
  display:        flex;
  flex-direction: column;
  width:          100%;
}
.exp__entry {
  display:    flex;
  flex-direction: row;
  gap:        20px;    
  padding-bottom: 40px; 
}
.exp__entry:last-child {
  padding-bottom: 0;   
}
.exp__indicator {
  width:         3px;              
  flex-shrink:   0;
  align-self:    stretch;          
  border-radius: 2px;              
}
.exp__indicator--current {
  background: var(--color-primary); 
}
.exp__indicator--past {
  background: var(--color-border-mid); 
}
.exp__indicator--older {
  background: var(--color-border); 
}
.exp__content {
  display:        flex;
  flex-direction: column;
  gap:            8px;    
  flex:           1;      
  min-width:      0;      
}
.exp__dates {
  font-family: var(--font-mono);
  font-size:   0.75rem;            
  font-weight: 400;
  color:       var(--color-text-light); 
  line-height: 1;
  margin:      0;
}
.exp__dates--current {
  color:       var(--color-primary); 
  font-weight: 500;                  
}
.exp__company {
  font-family: var(--font-sans);
  font-size:   1.25rem;  
  font-weight: 700;
  color:       var(--color-text); 
  line-height: 1.2;
  margin:      0;
}
.exp__role {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         8px;               
  font-family: var(--font-sans);
  font-size:   0.875rem;          
  font-weight: 500;
  color:       var(--color-text-muted); 
  line-height: 1.3;
  margin:      0;
}
.exp__role--current {
  color: var(--color-primary); 
}
.badge {
  display:       inline-block;
  font-family:   var(--font-mono);
  font-size:     0.6875rem;        
  font-weight:   600;
  color:         #FFFFFF;          
  background:    var(--color-primary); 
  border-radius: var(--radius-xs);     
  padding:       3px 7px;
  line-height:   1;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.exp__location {
  font-family: var(--font-sans);
  font-size:   0.8125rem;          
  font-weight: 400;
  color:       var(--color-text-light); 
  line-height: 1.3;
  margin:      0;
}
.exp__body {
  font-family: var(--font-sans);
  font-size:   0.875rem; 
  line-height: 1.65;     
  color:       var(--color-text-muted); 
  margin-top:  4px;      
}
.exp__body p {
  font-size:   inherit;
  line-height: inherit;
  color:       inherit;
  margin:      0 0 0.75em 0; 
}
.exp__body p:last-child {
  margin-bottom: 0;
}
.exp__body ul {
  margin:      0 0 0.75em 0;
  padding-left: 1.25em;        
}
.exp__body li {
  margin-bottom: 0.35em;
}
.exp__body li:last-child {
  margin-bottom: 0;
}
.exp__body strong {
  font-weight: 600;
  color:       var(--color-text); 
}
[data-theme="dark"] .exp__indicator--past {
  background: var(--color-border-mid); 
}
[data-theme="dark"] .exp__indicator--older {
  background: var(--color-border);     
}
@media (max-width: 1024px) {
  .exp__company {
    font-size: 1.125rem; 
  }
  .exp__entry {
    padding-bottom: 32px;
  }
}
@media (max-width: 768px) {
  .exp__company {
    font-size: 1rem; 
  }
  .exp__entry {
    padding-bottom: 28px;
  }
  .exp__body {
    font-size: 0.8125rem; 
  }
}
.projects__title {
  color: var(--color-text); 
}
.projects-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr); 
  gap:                   20px;           
  width:                 100%;
}
.project-card {
  display:        flex;
  flex-direction: column;
  gap:            16px;                  
  padding:        28px 32px;             
  border-radius:  var(--radius-lg);      
  border:         1px solid var(--color-border);
  background:     var(--color-bg);       
  box-shadow:     var(--shadow-sm);      
  transition:     box-shadow 0.2s ease;  
}
.project-card--featured {
  background:   var(--color-accent);     
  border-color: transparent;             
}
.project-card--default {
}
.project-card--alt {
  background:   var(--color-accent-alt); 
  border-color: transparent;
}
.project-card__period {
  font-family: var(--font-mono);
  font-size:   0.75rem;                  
  font-weight: 400;
  color:       var(--color-text-light);  
  line-height: 1;
  margin:      0;
}
.project-card--featured .project-card__period {
  color: var(--color-primary);           
}
.project-card__title {
  font-family: var(--font-sans);
  font-size:   1.125rem;                 
  font-weight: 700;
  color:       var(--color-text);        
  line-height: 1.3;
  margin:      0;
}
.project-card__body {
  flex:        1;                        
  font-family: var(--font-sans);
  font-size:   0.875rem;                 
  line-height: 1.6;                      
  color:       var(--color-text-muted);  
}
.project-card__body p {
  font-size:   inherit;
  line-height: inherit;
  color:       inherit;
  margin:      0 0 0.65em 0;
}
.project-card__body p:last-child {
  margin-bottom: 0;
}
.project-card__body ul {
  margin:       0 0 0.65em 0;
  padding-left: 1.2em;
}
.project-card__body li {
  margin-bottom: 0.3em;
}
.project-card__body li:last-child {
  margin-bottom: 0;
}
.project-card__tech {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: auto;                      
  padding-top: 4px;                      
}
.tech-tag {
  display:       inline-block;
  font-family:   var(--font-mono);
  font-size:     0.6875rem;              
  font-weight:   400;
  color:         var(--color-primary-mid); 
  background:    var(--color-accent);    
  border-radius: var(--radius-xs);       
  padding:       3px 7px;
  line-height:   1;
  white-space:   nowrap;
}
.project-card--featured .tech-tag {
  color:      var(--color-primary);      
  background: rgba(79, 70, 229, 0.12);  
}
.project-card--alt .tech-tag {
  background: rgba(79, 70, 229, 0.08);  
}
.project-card:hover {
  box-shadow: var(--shadow-md);          
}
@media (prefers-reduced-motion: no-preference) {
  .project-card {
    transition: box-shadow  0.2s ease,
                transform   0.2s ease;  
  }
  .project-card:hover {
    transform: translateY(-2px);         
  }
}
[data-theme="dark"] .project-card--default {
  background:   var(--color-surface);    
  border-color: var(--color-border);     
}
[data-theme="dark"] .project-card--featured,
[data-theme="dark"] .project-card--alt {
  border-color: transparent;
}
[data-theme="dark"] .tech-tag {
  background: var(--color-surface-hover); 
  color:      var(--color-primary);       
}
[data-theme="dark"] .project-card--featured .tech-tag {
  background: rgba(99, 102, 241, 0.2);   
  color:      var(--color-primary-soft);  
}
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .project-card {
    padding: 24px 28px;
  }
}
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .project-card {
    padding: 20px 20px;
  }
  .project-card__title {
    font-size: 1rem; 
  }
}
.edu__title {
  color: var(--color-text); 
}
.edu-label {
  font-family: var(--font-mono);
  font-size:   0.75rem;               
  font-weight: 400;
  color:       var(--color-primary);  
  line-height: 1;
  margin:      0;
}
.edu-degree {
  display:        flex;
  flex-direction: column;
  gap:            8px;   
}
.edu-degree__title {
  font-family: var(--font-sans);
  font-size:   1.125rem;              
  font-weight: 700;
  color:       var(--color-text);     
  line-height: 1.3;                   
  margin:      0;
}
.edu-degree__detail {
  font-family: var(--font-sans);
  font-size:   0.875rem;              
  font-weight: 400;
  color:       var(--color-text-muted); 
  line-height: 1.5;
  margin:      0;
}
.edu-certs {
  display:        flex;
  flex-direction: column;
  gap:            16px;  
}
.edu-certs__list {
  display:        flex;
  flex-direction: column;
  gap:            0;     
}
.edu-cert {
  display:        flex;
  flex-direction: column;
  gap:            4px;         
  padding-bottom: 16px;        
  border-bottom:  1px solid var(--color-border); 
}
.edu-cert:last-child {
  border-bottom:  none;
  padding-bottom: 0;
}
.edu-cert__name {
  font-family: var(--font-sans);
  font-size:   1rem;               
  font-weight: 600;
  color:       var(--color-text);  
  line-height: 1.3;
  margin:      0;
}
.edu-cert__detail {
  font-family: var(--font-mono);
  font-size:   0.8125rem;              
  font-weight: 400;
  color:       var(--color-text-muted); 
  line-height: 1.3;
  margin:      0;
}
.edu-cert__code {
  color:     var(--color-text-light);  
  font-size: 0.75rem;                  
}
@media (max-width: 1024px) {
  .edu-degree__title {
    font-size: 1rem; 
  }
}
@media (max-width: 768px) {
  .edu-degree__title {
    font-size: 1rem; 
  }
  .edu-cert__name {
    font-size: 0.9375rem; 
  }
  .edu-cert {
    padding-bottom: 12px;
  }
}
.section--contact .contact-link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;                  
  padding:         14px 24px;           
  border-radius:   var(--radius-sm);    
  font-family:     var(--font-sans);
  font-size:       0.875rem;            
  font-weight:     400;
  color:           #94A3B8;             
  text-decoration: none;
  background:      transparent;
  border:          1px solid rgba(248, 250, 252, 0.18); 
  transition:      background-color 0.15s ease,
                   color            0.15s ease,
                   border-color     0.15s ease;
  white-space:     nowrap;
}
.section--contact .contact-link--primary {
  background:   var(--color-primary); 
  color:        #FFFFFF;              
  font-weight:  600;                  
  border-color: transparent;          
}
.contact-link__icon {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
}
.section--contact .contact-link:hover {
  color:        #F1F5F9;                        
  border-color: rgba(248, 250, 252, 0.35);      
  background:   rgba(248, 250, 252, 0.06);      
  text-decoration: none;                        
}
.section--contact .contact-link--primary:hover {
  background:   var(--color-primary-hover);     
  color:        #FFFFFF;
  border-color: transparent;
}
@media (max-width: 1024px) {
  .section--contact .contact-link {
    padding: 12px 20px;
  }
}
@media (max-width: 768px) {
  .section--contact .contact-link {
    padding:         12px 20px;
    justify-content: center;        
    width:           100%;          
    box-sizing:      border-box;
  }
}
.footer__link {
  text-decoration: none;        
  border-bottom:   1px solid transparent; 
  transition:      color 0.15s ease, border-color 0.15s ease;
}
.footer__link:hover {
  color:        var(--color-footer-text); 
  border-color: var(--color-footer-text); 
  opacity:      0.75;                     
}