.experience-page{
    --exp-bg: #0b0f14;
    --exp-text: #e6edf3;
    --exp-muted: #c9d1d9;

    --exp-border: rgba(255,255,255,.10);
    --exp-glass: rgba(255,255,255,.04);
    --exp-glass-strong: rgba(255,255,255,.06);
    --exp-shadow: 0 18px 50px rgba(0,0,0,.45);

    --exp-accent: #7ee787;

    min-height: 100vh;
    color: var(--exp-text);

    background:
            radial-gradient(1200px 600px at 20% 20%, #1f2937 0%, var(--exp-bg) 60%),
            radial-gradient(1000px 520px at 80% 70%, #111827 0%, var(--exp-bg) 55%);
}

.experience-page h1,
.experience-page h2,
.experience-page h3{
    color: var(--exp-text);
    letter-spacing: .2px;
}

.experience-page p{
    color: var(--exp-muted);
}
.experience-page .container{
    background: transparent;
}

.experience-page .text-muted{
    color: rgba(201,209,217,.75) !important;
}

.experience-page .text-body-secondary{
    color: rgba(201,209,217,.78) !important;
}

.experience-page .badge{
    border: 1px solid rgba(255,255,255,.10);
}

.experience-page .badge.text-bg-primary{
    background: rgba(13,110,253,.18) !important;
    color: rgba(230,237,243,.92) !important;
}

.experience-page .badge.text-bg-light{
    background: rgba(255,255,255,.05) !important;
    color: rgba(230,237,243,.85) !important;
}

.experience-page .btn-outline-primary{
    color: rgba(230,237,243,.86);
    border-color: rgba(13,110,253,.45);
    background: rgba(13,110,253,.07);
}
.experience-page .btn-outline-primary:hover{
    background: rgba(13,110,253,.14);
    border-color: rgba(13,110,253,.65);
}

.experience-page a{
    color: var(--exp-accent);
    text-decoration: none;
    font-weight: 700;
}
.experience-page a:hover{
    text-decoration: underline;
}

.experience-page hr{
    border-color: rgba(255,255,255,.12);
    opacity: 1;
}
.exp-title{
    position: relative;
    display: inline-block;
    padding-bottom: .4rem;
    letter-spacing: .2px;
}

.exp-title::after{
    content:"";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52%;
    height: 3px;
    background: linear-gradient(
            to right,
            var(--bs-primary),
            rgba(13,110,253,.25)
    );
    border-radius: 3px;
}

.exp-intro{
    max-width: 720px;
    line-height: 1.65;
}

.exp-item{
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.exp-left{
    position: sticky;
    top: 90px;
    align-self: start;
}

.exp-date{
    font-weight: 700;
    font-size: .85rem;
    padding: .4rem .55rem;
    line-height: 1.15;
    display: inline-block;
    max-width: 150px;
    white-space: normal;
}

.exp-place{
    line-height: 1.2;
}

.exp-card{
    border-radius: 18px;
    border: 1px solid var(--exp-border) !important;
    background: linear-gradient(180deg, var(--exp-glass), rgba(255,255,255,.02)) !important;
    box-shadow: var(--exp-shadow) !important;
    backdrop-filter: blur(10px);

    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.exp-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 .9rem 1.8rem rgba(0,0,0,.55) !important;
    background: linear-gradient(180deg, var(--exp-glass-strong), rgba(255,255,255,.03)) !important;
}

/* Logos */
.exp-logo{
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 14px;

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px;

    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.experience-page ul{
    padding-left: 1.15rem;
}
.experience-page li{
    margin: .25rem 0;
}

@media (max-width: 768px){
    .exp-item{ grid-template-columns: 1fr; }
    .exp-left{ position: static; margin-bottom: .5rem; }
    .exp-date{ max-width: 100%; }
}