:root {
  --text-color: #2c3333;
  --border-color: #e0f2ef;
  --link-color: #4a76ee;
  --highlight-color: #2a9d8f;
  --background-color: #f7fbfa;
  --light-background-color: #f0f9f7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {
    scroll-behavior: smooth
}

body {
    padding: 0 50px;
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    max-width: 1400px;
    margin: 0 auto;
    background-image: radial-gradient(circle, rgba(74,118,238,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    background-attachment: local;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

h1 {
    color: var(--text-color);
    font-size: calc(14px + 1.0vw); /* Base size of 20px, increases with viewport width */
}
h2 {
    color: var(--text-color);
    font-size: calc(11px + 0.8vw);
}
h3 {
    font-weight: normal;
    color: var(--text-color);
    font-size: calc(9px + 0.6vw);
}

span {
    color: var(--text-color);
  }

p {
    color: var(--text-color);
    font-size: calc(9px + 0.5vw);
    margin-bottom: 1em;
    padding: 0;
  }
  

/* NAVBAR */
nav {
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    height: 80px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 251, 250, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.3s;
}

nav .left a {
    color: var(--text-color);
    font-size: 30px;
    font-weight: 600;
}

nav .right {
    gap: 15px;
}

nav .right a {
    color: var(--text-color);
    font-size: 23px;
    margin-left: 30px;
}

nav .right a:last-child
 {
    border: 2px solid var(--link-color);
    color: var(--link-color);
    padding: 3px 15px;
    border-radius: 10px;
}

nav .right a:last-child:hover,
nav .right a span:last-child:hover,
nav .mobile-nav a:last-child:hover,
nav .mobile-nav a span:last-child:hover,{
    color: var(--text-color);
    background-color: var(--light-background-color);
    border-radius: 10px;
}

/* Navbar Mobile Menu Button */
nav .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

nav .hamburger {
    display: block;
    width: 24px;
    height: 2px;  /* Changed from 5px to 2px */
    background: var(--text-color);
    position: relative;
    transition: background 0.2s;
}

nav .hamburger::before,
nav .hamburger::after {
    content: '';
    position: absolute;
    left: 0;  /* Added to ensure proper alignment */
    width: 24px;  /* Made consistent with parent width */
    height: 2px;
    background: var(--text-color);
    transition: transform 0.2s;
}

nav .hamburger::before {
    top: -8px;  /* Adjusted spacing */
}

nav .hamburger::after {
    bottom: -8px;  /* Adjusted spacing */
}

nav .mobile-nav {
    display: none;
}



/* SECTION 1: Hero */
.hero-section {
    padding: 0 50px;
    margin: 50px 0;
    display: flex;
    position: relative;
    background: var(--background-color);
    border-radius: 16px;
    border: none;
}

.hero-section .group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 40px;
    border-radius: 8px;
}

.hero-section .text {
    flex: 5;
}

.hero-section .text h2 {
    font-size: 50px;
}

.hero-section .text .external-links i {
    font-size: 20px;
    padding: 0 5px;
    color: var(--text-color);
}

.hero-section .text h3 {
    font-size: 18px;
    color: var(--link-color);
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid var(--link-color);
    animation: typing 2.2s steps(43, end) 0.6s forwards,
               blinkCursor 0.75s step-end 0.6s infinite;
}

.hero-section .text p {
    margin-top: 15px;
    font-size: 15px;
    padding: 0px;
    color: var(--text-color);
}

.hero-section .text .links {
    margin-top: 25px;
}

.hero-section .text .links a {
    display: inline-block;
    padding: 5px 10px;
    color: var(--link-color);
    border: 2px solid var(--link-color);
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: 0.1s;
}

.hero-section .text .links a span {
    color: var(--link-color);
}

.hero-section .text .links a:hover,
.hero-section .text .links a:hover span {
    color: var(--text-color);
}

.hero-section .headshot {
    flex: 3;
    display: flex;
    justify-content: right;
}

.hero-section .headshot img {
    width: 400px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    animation: float 4s ease-in-out infinite;
    box-shadow: 0 0 0 5px var(--background-color),
                0 0 0 8px var(--link-color),
                0 0 28px 6px rgba(74,118,238,0.20);
}

/* NAVIGATION ARROW */
.arrow{
    margin-top: 125px;
    margin-bottom: 300px;
    display: flex;
    justify-content: center;  
}

.arrow a   {
    font-size: 20px;
    color: var(--link-color);
    display: inline-block;  /* This makes .hero-section a flex container */
    align-items: center;
    border: 2px solid var(--link-color);
    border-radius: 15px;
    padding: 10px 20px;
    text-align: center;
}

.arrow a > * {
    display: block; 
    margin: 0 auto; 
}

.arrow a:hover   {
    color: var(--text-color);
    border: 2px solid var(--text-color)

}


/*SECTION 2: PROJECT GRID */
.project-grid-section {
    margin-bottom: 100px;
    margin-top: 50px;
    display:flex;
    flex-direction: column;
    justify-content: center; 
   }

.project-grid-section h2 {
    font-size: 34px;
    margin-bottom: 10px;
    padding: 0 10px 8px;
    display: inline-block;
    position: relative;
}

.project-grid-section .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 25px;
    width: 100%;
    margin: 0 auto;
    align-items: stretch;
  
}

.project-grid-section .project-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.project-grid-section .grid-container .project-link .project-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Take full height of grid cell */
    box-sizing: border-box;
    padding: 15px;
    background: var(--background-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: opacity 0.5s ease, transform 0.4s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.project-card img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3/1;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: transform 0.4s ease;
}


.project-card .project-title {
    font-size: 1.4em;
    text-decoration: none;
    transition: color 0.3s ease; 
    margin-bottom: 10px
}

.project-card .project-title:hover {
    text-decoration: underline;
}


.project-card .project-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}

.project-card .project-skills .skill {
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.9em;
    background-color: var(--light-background-color);
    color: var(--link-color);
    white-space: nowrap; 
}

.project-card .project-description {
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    line-clamp: 4px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.5; 
    max-height: calc(1.5em * 4); 
}

.project-card .read-more {
    background-color: transparent;
    border: none;
    color: var(--highlight-color);
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 5px;
    text-align: start;
}

.project-card .read-more:hover {
    text-decoration: underline;
}



/* SECTION 3: SKILLS */
.skills-section {
    margin-bottom: 100px;
    display:flex;
    flex-direction: column;
}

.skills-section h2 {
    font-size: 34px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    display: inline-block;
    position: relative;
}




.skills-section .skill-categories {
    list-style: none;
    padding-left: 0;
   }

.skills-section .skill-categories .skills-card  span{
    margin-bottom: 10px;
}

.skills-section .skill-categories .skills-card {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.skills-section .skill-categories .category-label {
    font-size: 20px;
    display: grid; 
    font-weight: 600;
}

.skills-section .skill-categories .skills-list {
    display: flex; 
    flex-wrap: wrap;
    padding-left: 0; 
    margin-right: 10px;
    gap: 8px;
    }

.skills-section .skill-categories .skill {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 8px;
    background-color: var(--light-background-color);
    color: var(--link-color);
    border-radius: 10px;
    font-size: 17px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}


/* SECTION 4: CONTACT */
.contact-section {
    padding: 25px 25px;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 20px;
    margin-bottom: 100px;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.contact-section h2 {
    font-size: 34px;
    text-align: center;
}

.contact-section .group {
    display: flex;
}
.contact-section .group .text {
    flex:3;
}
.contact-section .group form {
    flex:3;
    display: flex;
    flex-direction: column;
    color:var(--text-color)
}

.contact-section .group form input, .contact-section .group form textarea {
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    border: 1px groove var(--text-color);
    padding:5px;
    margin-bottom: 10px;
    outline: none;
    resize: none;
    font-size: 13px;
    
}

.contact-section .group form button {
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    background-color: var(--link-color);
    border:none;
    height: 50px;
    cursor: pointer;
    transition: 0.1s
}


/* FOOTER */

footer {
    padding: 0;
    font-size: 12px;
    text-align: center;
    min-height: 150px; 
    flex-shrink: 0;
    background-color: var(--light-background-color);
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px; 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

footer .footer-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer .links {
    margin-bottom: 20px;
}

footer .links a {
    color: var(--text-color);
    font-size: 20px;
    margin: 0 30px;
}

footer .links a:hover {
    color: var(--link-color);
}

footer .license {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    gap: 0;  /* Changed from 10px to 0 */
}

footer span, p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    margin: 0; /* Added to remove default margins */
}

footer p {
    font-size: 12px;
    margin: 0; /* Changed from 5px 0 0 to 0 */
}






/* PROJECT POST VIEW */

.post-view {
    margin: 25px auto;
    border: 1px solid rgba(0, 0, 0, 0.05);    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                  0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 10px
     
  }

.post-view .summary{
    padding: 25px 50px;  
}

.post-view .title-header  {
    width: 100%;
    display: flex;
}

.post-view .title-header  h1 {
    line-height: normal;
    margin-bottom: 10px;
}

.post-view .summary img {
    width: 100%;
    height: 100%;  /* Changed to 100% to fill the container */
    object-fit: cover;
    border-radius: 6px;
    aspect-ratio: 3/1;
    margin-bottom: 10px;
}

.post-view .summary .project-description {
    margin-bottom: 10px;
}

.post-view .summary .skills-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.post-view .summary .skills-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 5px;
    
}
  
.post-view .summary .skill {
    background-color: var(--light-background-color);
    color: var(--link-color);
    border-radius: 12px;
    padding: 5px 10px;
    font-size: 0.9em;
}
  
.post-view .content {
    padding: 0 50px;
    border-radius: 10px;
}
 
.post-view .content .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    gap: 10px
}

.post-view .content .image-gallery img {
    max-height: var(--gallery-height); 
    width: auto; 
    max-width: 100%;
    object-fit: contain;
    align-self: flex-start;
}
  
.post-view .content  a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 1em;
  }

.post-view .content  p {
    margin-bottom: 1em;
  }

.post-view .content  a:hover {
    color: #2980b9;
  }
  
.post-view .content ul, ol {
    padding-left: 20px;
    margin: 1em 0;
  }
  
.post-view .content blockquote {
    border-left: 4px solid #3498db;
    margin: 1em 0;
    padding: 10px 20px;
    background-color: var(--light-background-color);
    color: var(--text-color);
    font-size: calc(10px + 0.5vw);
  }
  
.post-view .content   hr {
    border: 0;
    height: 1px;
    background: #ddd;     
    margin: 20px 0;
  }
  
  .post-view .content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    background-color: var(--light-background-color);
}

.post-view .content th {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
    color: #495057;
    font-size: calc(10px + 0.5vw); /* Matches h2 size */
}

.post-view .content td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    color: var(--text-color);
    font-size: calc(10px + 0.5vw); /* Matches p size */
}

.youtube-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 ;
    padding: 5px
}

.youtube-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.youtube-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*     Responsive styles     */

@media (max-width: 1200px){
    body{
        padding: 0 20px;
    }
    
    /* SECTION 1:HERO */
    .hero-section {
        padding: 0 20px;
        border: none;
        border-radius: 0;
    }
    .hero-section::before {
        display: none;
    }
    .hero-section .group{
        flex-direction: column-reverse;
        text-align: center;
    }
    .hero-section .headshot img{
        width: 300px;
        justify-content: center
    }

    .hero-section .text h2 {
        font-size: 35px;
    }
    

    /*   Section 2: Project-grid  */
    .project-grid-section .grid-container .project-card {
        max-width: 500px;
        height: 500px; 
        margin: 0 auto;
    }


}


@media (max-width: 768px) {
    /* NEVBAR*/
    .desktop-nav {
        display: none;
    }

    nav .menu-toggle {
        display: block;  
    }
    .menu-toggle {
        display: block;
    }

    .mobile-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--light-background-color);
        flex-direction: column;
        border-top: 1px solid var(--border-color);
        border-radius: 0 0 10px 10px;
        z-index: 1000;
    }

    .mobile-nav.active {
        display: flex;
    }

    .mobile-nav a {
        color: var(--text-color);
        font-size: 20px;
        padding: 5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px; 
    }

    .menu-toggle.active .hamburger {
        background: transparent;
    }

    .menu-toggle.active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-toggle.active .hamburger::after {
        transform: rotate(-45deg);
        bottom: 0;
    } 
    
  

    
      
    /*SECTION 1: Hero */
    .hero-section .text h3 {
        white-space: normal;
        overflow: visible;
        width: auto !important;
        animation: none;
        border-right: none;
    }

    .hero-section .group .text h2 {
        flex-direction: column-reverse;
        display: flex;
        font-size: 40px;
      }
    
    .hero-section .group .text h2 .external-links i {
        font-size: 16px; /* Example: reducing icon size */
        margin: 0
    }

    .arrow {
        display: none;
    }

    .project-grid-section .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  
    /*SECTION 4:Contact */
    .contact-section .group{
        flex-direction: column;
    }



    footer {
        padding: 0 35px
    }
    footer .links a {
        font-size: 15px;
        margin: 0 15px;
    }
    footer .links {
        margin-bottom: 10px;
    }
  


    /* Project Post Page */
    .post-view {
        margin: 0;
         
    }
    .post-view .content {
        padding: 0 5px;
        margin: 0
      
    
    }
    .post-view .summary{
        padding: 5px 5px;
        
         
    }
    .post-view.image-gallery {
        column-gap: 5px;
        row-gap: 5px;
      }
      
    .video-container {
        margin:0 auto;
    }
    
}


@media (max-width: 600px){
    body{
        padding: 0 10px;
    }
    /*SECTION 1:HERO */
    .hero-section {
        padding: 0 20px
    }
    .hero-section .text h2 {
        font-size: 30px
    }

    .hero-section .text .links a {
        font-size: 13px;
        padding: 5px;
    }
   .hero-section .headshot img{
        width: 275px;
        justify-content: center
    }
    
    /*SECTION 3:Skills */
    .skills-section {
        padding: 0 5px
    }
   
    .skills-section span {
        font-size: 16px;
    }

    /*SECTION 4: Contact */
    .contact-section{
        padding: 0 20px
    }

    .post-view {
        margin: 5px;
        border: none;
        box-shadow: none  
      }

    .post-view .content {
        padding: 5px;
      }


}


/* ═══════════════════════════════════════
   VISUAL FLAIR
═══════════════════════════════════════ */

/* Sticky nav scroll shadow */
nav.scrolled {
    box-shadow: 0 2px 20px rgba(74,118,238,0.10);
}

/* Hero: animated gradient border ring */
.hero-section::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, #4a76ee, #2a9d8f, #40b3a2, #4a76ee);
    background-size: 300% 300%;
    animation: gradientShift 6s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Typewriter */
@keyframes typing {
    to { width: 100%; }
}

@keyframes blinkCursor {
    50% { border-color: transparent; }
}

/* Headshot float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Section heading gradient underlines */
.project-grid-section h2::after,
.skills-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--link-color), var(--highlight-color));
    background-size: 200% 100%;
    animation: slideGradient 3s ease infinite;
}

@keyframes slideGradient {
    0%   { background-position: 0%; }
    50%  { background-position: 100%; }
    100% { background-position: 0%; }
}

/* ── Scroll reveal ──
   The hidden states below are scoped to html.reveal-enabled, a class
   added by an inline script in <head> only when JS is running. If JS is
   disabled or fails to load, the class is never added, the hidden rules
   never match, and all content renders normally. This prevents the
   reveal mechanism from ever permanently hiding content. */

.reveal-enabled .project-grid-section .grid-container .project-link .project-card {
    opacity: 0;
    transform: translateY(24px);
}
.reveal-enabled .skills-section .skill-categories .skills-card {
    opacity: 0;
    transform: translateY(20px);
}
.reveal-enabled .skills-section .skill-categories .skill {
    opacity: 0;
    transform: scale(0.85);
}
.reveal-enabled .contact-section {
    opacity: 0;
    transform: translateY(20px);
}

/* Project card revealed */
.reveal-enabled .project-grid-section .grid-container .project-link .project-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.project-card.visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(74,118,238,0.22), 0 4px 12px rgba(0,0,0,0.08);
}

.project-card:hover img {
    transform: scale(1.05);
}

/* Skills card revealed */
.reveal-enabled .skills-section .skill-categories .skills-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered skill tag entrance */
.reveal-enabled .skills-section .skill-categories .skills-card.visible .skill {
    opacity: 1;
    transform: scale(1);
}

.skills-section .skill-categories .skills-card.visible .skill:nth-child(1) { transition-delay: 0.04s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(2) { transition-delay: 0.08s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(3) { transition-delay: 0.12s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(4) { transition-delay: 0.16s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(5) { transition-delay: 0.20s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(6) { transition-delay: 0.24s; }
.skills-section .skill-categories .skills-card.visible .skill:nth-child(n+7) { transition-delay: 0.28s; }

/* Contact section revealed */
.reveal-enabled .contact-section.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ═══════════════════════════════════════
   STATUS PILL (hero) + availability dot
═══════════════════════════════════════ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 7px 16px;
    border-radius: 30px;
    background: var(--light-background-color);
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ecc71;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}


/* ═══════════════════════════════════════
   TERMINAL SNAPSHOT (light, theme-matched)
═══════════════════════════════════════ */
.terminal-section {
    margin: 50px auto 60px;
    max-width: 820px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.terminal-section h2 {
    font-size: 34px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    display: inline-block;
    position: relative;
}
.terminal-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--link-color), var(--highlight-color));
    background-size: 200% 100%;
    animation: slideGradient 3s ease infinite;
}

.terminal {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(74, 118, 238, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

.terminal__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--light-background-color);
    border-bottom: 1px solid var(--border-color);
}

.terminal__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.terminal__dot--r { background: #ff6b6b; }
.terminal__dot--y { background: #ffc94d; }
.terminal__dot--g { background: var(--highlight-color); }

.terminal__title {
    margin-left: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #7a8a88;
}

.terminal__body {
    padding: 22px 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    line-height: 1.9;
}

.terminal__body .line {
    display: block;
    white-space: pre-wrap;
}
.terminal__body .cmd-line { margin-top: 6px; }
.terminal__body .prompt { color: var(--highlight-color); font-weight: 700; }
.terminal__body .cmd { color: var(--link-color); font-weight: 500; }
.terminal__body .out { color: var(--text-color); }
.terminal__body .key { color: var(--highlight-color); font-weight: 600; }
.terminal__body .muted { color: #9bb0ad; }

/* skill rows with dotted leaders */
.terminal__body .skill-row {
    display: flex;
    align-items: baseline;
}
.terminal__body .skill-row .key { white-space: nowrap; }
.terminal__body .skill-row .dots {
    flex: 1 1 auto;
    min-width: 14px;
    margin: 0 8px;
    border-bottom: 2px dotted rgba(42, 157, 143, 0.35);
    transform: translateY(-4px);
}
.terminal__body .skill-row .vals { white-space: nowrap; }

/* status line inside terminal */
.terminal__body .status-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
}
.terminal__body .status-text { color: var(--text-color); font-weight: 600; }

/* blinking cursor */
.terminal__body .cursor {
    display: inline-block;
    width: 8px;
    background: var(--highlight-color);
    margin-left: 2px;
    animation: terminalBlink 1s step-end infinite;
}
@keyframes terminalBlink { 50% { opacity: 0; } }

/* Typed reveal: hidden only when JS runs; revealed line-by-line via JS.
   Without JS (no .reveal-enabled) every line is visible. */
.reveal-enabled .terminal__body .line { opacity: 0; }
.reveal-enabled .terminal__body .line.shown {
    opacity: 1;
    transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-enabled .terminal__body .line { opacity: 1; }
}

/* On small screens let skill values wrap instead of overflowing */
@media (max-width: 600px) {
    .terminal__body { font-size: 12.5px; padding: 16px 16px; }
    .terminal__body .skill-row { flex-wrap: wrap; }
    .terminal__body .skill-row .dots { display: none; }
    .terminal__body .skill-row .vals { white-space: normal; flex-basis: 100%; }
}


/* ═══════════════════════════════════════
   RESUME PAGE
═══════════════════════════════════════ */
.resume-page {
    margin: 40px 0 100px;
}
.resume-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.resume-actions h1 { font-size: 36px; }
.resume-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 2px solid var(--link-color);
    color: var(--link-color);
    border-radius: 8px;
    font-weight: 600;
    transition: 0.15s;
}
.resume-download:hover {
    background: var(--link-color);
    color: #fff;
}
.resume-embed iframe {
    width: 100%;
    height: 85vh;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    background: #fff;
}
.resume-fallback {
    margin-top: 10px;
    font-size: 14px;
    color: #7a8a88;
}
@media (max-width: 600px) {
    .resume-embed iframe { height: 70vh; }
}