/* =========================================================
   ABOUT SECTION
========================================================= */

.about-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:3rem;

    align-items:start;

}

.approach-card,
.profile-card{

    padding:2.5rem;

}

.framework{

    margin-top:2rem;

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.framework-step{

    display:flex;

    gap:1.5rem;

    align-items:flex-start;

    text-align:left;

}

.step-number{

    min-width:64px;

    min-height:64px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:700;

    font-size:1.2rem;

    flex-shrink:0;

}

.framework-step h4{

    margin-bottom:.5rem;

    font-weight:600;

}

.framework-step p{

    color:var(--text-secondary);

    line-height:1.6;

}

.profile-list{

    margin-top:2rem;

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.profile-item{

    display:flex;

    flex-direction:column;

    gap:.5rem;

    padding-bottom:1rem;

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

    text-align:left;

}

.profile-item span{

    color:var(--text-muted);

    font-size:.85rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.profile-item strong{

    font-weight:600;

    font-size:1rem;

}

/* =========================================================
   EXPERIENCE SECTION
========================================================= */

.timeline-card{

    padding:2rem;

    margin-bottom:2rem;

    display:grid;

    grid-template-columns:200px 1fr;

    gap:2.5rem;

    align-items:start;

}

.timeline-left{

    padding-top:.5rem;

}

.timeline-year{

    display:inline-block;

    background:var(--gradient-primary);

    background-clip:text;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    font-weight:700;

    font-size:1.1rem;

    margin-bottom:.5rem;

}

.timeline-left h3{

    font-size:1.3rem;

    margin-bottom:.75rem;

    line-height:1.4;

}

.timeline-left h3 small{

    display:block;

    font-size:.9rem;

    color:var(--text-secondary);

    font-weight:500;

    margin-top:.3rem;

}

.timeline-right{

    text-align:left;

}

.timeline-summary{

    color:var(--text-secondary);

    margin-bottom:1.5rem;

    line-height:1.7;

}

.timeline-right h4{

    font-size:1rem;

    margin-bottom:1rem;

    margin-top:1.5rem;

    font-weight:600;

}

.achievements-list{

    list-style:none;

    margin-bottom:1.5rem;

}

.achievements-list li{

    padding-left:1.5rem;

    margin-bottom:.75rem;

    position:relative;

    color:var(--text-secondary);

    line-height:1.6;

}

.achievements-list li:before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--color-primary);

    font-weight:bold;

}

/* =========================================================
   SKILLS SECTION
========================================================= */

.skills{

    background:var(--bg-secondary);

}

#skillsContainer{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));

    gap:2rem;

    margin-top:3rem;

}

.skill-card{

    padding:2rem;

    display:flex;

    flex-direction:column;

    transition:var(--transition-normal);

}

.skill-card:hover{

    transform:translateY(-8px);

    background:var(--bg-glass);

}

.skill-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1.5rem;

}

.skill-header h3{

    font-size:1.1rem;

    font-weight:600;

    margin:0;

}

.skill-header span{

    background:var(--gradient-primary);

    background-clip:text;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    font-weight:700;

    font-size:1.3rem;

}

.skill-bar{

    width:100%;

    height:8px;

    background:rgba(255,255,255,.05);

    border-radius:10px;

    overflow:hidden;

    margin-bottom:1rem;

}

.skill-fill{

    height:100%;

    background:var(--gradient-primary);

    border-radius:10px;

    transition:width 1s ease-out;

}

.skill-card p{

    color:var(--text-secondary);

    font-size:.9rem;

    line-height:1.6;

    margin:0;

}

/* =========================================================
   SOLUTIONS / PROJECTS SECTION
========================================================= */

.solutions{

    background:transparent;

}

#projectsContainer{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));

    gap:2rem;

    margin-top:3rem;

}

.solution-card{

    padding:2rem;

    display:flex;

    flex-direction:column;

    height:100%;

    transition:var(--transition-normal);

    overflow:hidden;

}

.solution-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.solution-image{

    width:100%;

    height:250px;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:1.5rem;

    background:rgba(255,255,255,.05);

}

.solution-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 0.3s ease;

}

.solution-card:hover .solution-image img{

    transform:scale(1.05);

}

.solution-content{

    display:flex;

    flex-direction:column;

    gap:1rem;

    flex:1;

}

.solution-content .badge{

    display:inline-block;

    background:rgba(59, 130, 246, 0.1);

    color:var(--color-primary);

    padding:.4rem .8rem;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    width:fit-content;

}

.solution-content h3{

    font-size:1.3rem;

    font-weight:700;

    line-height:1.3;

    margin:0;

}

.solution-content h4{

    font-size:.95rem;

    font-weight:600;

    color:var(--text-secondary);

    margin:0;

    margin-top:.5rem;

}

.solution-content p{

    color:var(--text-secondary);

    font-size:.9rem;

    line-height:1.6;

    margin:0;

}

.tool-list{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    margin-top:1rem;

}

.tool-list .chip{

    background:rgba(59, 130, 246, 0.08);

    color:var(--color-primary);

    border:1px solid rgba(59, 130, 246, 0.2);

    padding:.4rem .8rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:500;

}

.project-links{

    display:flex;

    gap:1rem;

    margin-top:auto;

    padding-top:1.5rem;

    border-top:1px solid rgba(255,255,255,.05);

}

.project-links a{

    flex:1;

    text-align:center;

}

/* =========================================================
   CERTIFICATIONS
========================================================= */

.certification-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

}

.cert-card{

    padding:2rem;

    transition:var(--transition-normal);

}

.cert-card:hover{

    transform:translateY(-8px);

}

.cert-top{

    display:flex;

    justify-content:flex-end;

    margin-bottom:1.5rem;

}

.cert-status{

    padding:.45rem .9rem;

    border-radius:999px;

    background:rgba(34,197,94,.15);

    color:#22c55e;

    font-size:.8rem;

    font-weight:600;

}
/* =========================================================
   CTA
========================================================= */

.cta-card{

    padding:5rem;

    text-align:center;

    border-radius:32px;

}

.cta-title{

    font-size:clamp(2.5rem,5vw,4rem);

    margin:1.5rem 0;

}

.cta-description{

    max-width:720px;

    margin:0 auto 2rem;

    color:var(--text-secondary);

    font-size:1.15rem;

}

.cta-services{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1rem;

    margin-bottom:3rem;

}