:root{
    --primary:#137C88;
    --primary-hover:#0F6973;
    --primary-light:#19A0AE;

    --background:#08131A;
    --section:#0F1E26;
    --card:#13242D;

    --border:#21414D;

    --text:#FFFFFF;
    --text-secondary:#B8C4CB;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:var(--text);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}

h1,h2,h3,h4{
    font-family:'Manrope',sans-serif;
}

section{
    position:relative;
}

img{
    max-width:100%;
    height:auto;
}

/* ---------- Consistent section rhythm ---------- */
/* Replaces the flat py-28 used everywhere in the old file, which is what
   caused the huge gaps on mobile. Scales down for small screens. */
.section-pad{
    padding-top:4rem;
    padding-bottom:4rem;
}

@media (min-width:768px){
    .section-pad{
        padding-top:5.5rem;
        padding-bottom:5.5rem;
    }
}

@media (min-width:1024px){
    .section-pad{
        padding-top:7rem;
        padding-bottom:7rem;
    }
}

.section-head-gap{
    margin-top:2.5rem;
}

@media (min-width:768px){
    .section-head-gap{
        margin-top:3.5rem;
    }
}

@media (min-width:1024px){
    .section-head-gap{
        margin-top:5rem;
    }
}

/* ---------- Cards ---------- */
.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    transition:.35s;
}

.card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:0 15px 40px rgba(19,124,136,.15);
}

@media (prefers-reduced-motion: reduce){
    .card,.card:hover,*{
        transition:none !important;
        animation:none !important;
        transform:none !important;
    }
}

.btn-primary{
    background:var(--primary);
    color:white;
    border-radius:14px;
    padding:16px 28px;
    font-weight:600;
    transition:.3s;
}

.btn-primary:hover{
    background:var(--primary-hover);
}

::placeholder{
    color:var(--text-secondary);
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(19,124,136,.2);
}

/* Visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:4px;
}

/* ---------- Navigation ---------- */
.nav-link{
    color:var(--text-secondary);
    font-size:.95rem;
    font-weight:500;
    transition:color .2s;
}

.nav-link:hover{
    color:var(--text);
}

.nav-link-mobile{
    display:block;
    padding:.85rem .25rem;
    border-bottom:1px solid var(--border);
    color:var(--text-secondary);
    font-weight:500;
}

.nav-link-mobile:hover{
    color:var(--text);
}

#mobile-menu{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, opacity .25s ease;
}

#mobile-menu.open{
    max-height:32rem;
    opacity:1;
}

/* ---------- Timeline (Experience / Education) ---------- */
.timeline{
    position:relative;
}

.timeline-item{
    position:relative;
    padding-left:2.25rem;
    padding-bottom:2.5rem;
}

.timeline-item:last-child{
    padding-bottom:0;
}

.timeline-item::before{
    content:'';
    position:absolute;
    left:0;
    top:.35rem;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 4px rgba(19,124,136,.2);
}

.timeline-item::after{
    content:'';
    position:absolute;
    left:6px;
    top:1.4rem;
    bottom:0;
    width:2px;
    background:var(--border);
}

.timeline-item:last-child::after{
    display:none;
}

.placeholder-tag{
    display:inline-block;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--primary-light);
    background:rgba(19,124,136,.12);
    border:1px dashed var(--primary);
    border-radius:6px;
    padding:.15rem .5rem;
}