:root {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --primary: #38bdf8;
    --secondary: #818cf8;
    --text-light: #f1f5f9;
    --text-dim: #94a3b8;
    --transition: all 0.3s ease;
    /* Timeline spine colors */
    --c1: #00f0ff;
    --c1-rgb: 0, 240, 255;
    --c2: #4d88ff;
    --c2-rgb: 77, 136, 255;
    --c3: #7b5aff;
    --c3-rgb: 123, 90, 255;
    --c4: #a82ee6;
    --c4-rgb: 168, 46, 230;
    --c5: #d419c8;
    --c5-rgb: 212, 25, 200;
}

html {
    scroll-behavior: auto;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-light);
    overflow-x: hidden;
    position: relative;
}

#cursor-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
}

/* --- BACKGROUND SCINTILLANT --- */
#bg-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
}

/* --- NAVIGATION — FLOATING ISLAND --- */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 14px 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-toggle {
    justify-self: start;
}

.nav-island {
    justify-self: center;
}

.nav-contact-btn {
    justify-self: end;
}

nav.nav-scrolled {
    padding: 10px 40px;
}

/* Compact : nav plus fine quand on quitte le hero */
nav.nav-compact {
    padding: 6px 40px;
}

/* Hover sur la nav : on regonfle légèrement */
nav.nav-compact:hover {
    padding: 11px 40px;
}

/* Zone invisible full-width pour détecter le hover nav sans bloquer les clicks canvas */
nav::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: all;
    z-index: -1;
}


/* Île flottante centrale */
.nav-island {
    pointer-events: all;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(15, 23, 42, 0.60);
    backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
    border: 1px solid rgba(56, 189, 248, 0.20);
    border-radius: 50px;
    padding: 6px 8px;
    box-shadow:
        inset 0 1px 0 rgba(56, 189, 248, 0.10),
        inset 0 -1px 0 rgba(129, 140, 248, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(56, 189, 248, 0.07);
    transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s ease,
        transform 0.3s ease;
}

/* Reflet irisé interne — visible même quand canvas non capturé */
.nav-island::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(135deg,
            rgba(56, 189, 248, 0.06) 0%,
            rgba(129, 140, 248, 0.04) 40%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

nav.nav-scrolled .nav-island {
    padding: 4px 8px;
}

/* Compact : île plus petite */
nav.nav-compact .nav-island {
    padding: 3px 6px;
    box-shadow:
        inset 0 1px 0 rgba(56, 189, 248, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.4);
}

nav.nav-compact .nav-island a {
    font-size: 0.78rem;
    padding: 5px 12px;
}

/* Hover sur nav compact : regonfler l'île */
nav.nav-compact:hover .nav-island {
    padding: 5px 8px;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(56, 189, 248, 0.12),
        0 10px 36px rgba(0, 0, 0, 0.50),
        0 0 50px rgba(56, 189, 248, 0.09);
}

nav.nav-compact:hover .nav-island a {
    font-size: 0.82rem;
    padding: 7px 15px;
}

/* Indicateur capsule glissant */
.nav-indicator {
    position: absolute;
    height: calc(100% - 12px);
    top: 6px;
    left: 8px;
    border-radius: 40px;
    background: rgba(56, 189, 248, 0.13);
    border: 1px solid rgba(56, 189, 248, 0.32);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.18);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    /* left/width animés en JS par lerp — pas de transition CSS */
}

.nav-island a {
    position: relative;
    z-index: 1;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 40px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.01em;
    user-select: none;
    transition: color 0.2s,
        font-size 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-island a:hover {
    color: var(--text-light);
}

.nav-island a.active {
    color: var(--primary);
    font-weight: 600;
}

/* Bouton Contact/CV — droite */
.nav-contact-btn {
    pointer-events: all;
    padding: 9px 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    cursor: pointer;
    border: none;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.30);
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    user-select: none;
}

.nav-contact-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.48);
}

/* Compact : lang + contact btn plus petits */
nav.nav-compact .lang-toggle,
nav.nav-compact .nav-contact-btn {
    transform: scale(0.9);
    opacity: 0.85;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

nav.nav-compact:hover .lang-toggle,
nav.nav-compact:hover .nav-contact-btn {
    transform: scale(1);
    opacity: 1;
}

/* Lang toggle — gauche */
.lang-toggle {
    pointer-events: all;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(56, 189, 248, 0.22);
    color: var(--primary);
    font-size: 0.80rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.lang-toggle:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.42);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.2);
    color: var(--primary);
    text-shadow: none;
}

/* --- HERO SECTION --- */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 30% 50%, #1a2744 0%, #0f172a 70%);
}

/* Transition douce hero → sections suivantes */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(15, 23, 42, 0.6) 50%,
            var(--bg-color) 100%);
    z-index: 3;
    pointer-events: none;
}

/* --- HERO BACKGROUND CANVAS --- */
#hero-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-split {
    display: grid;
    grid-template-columns: 43fr 57fr;
    width: 100%;
    height: 100%;
    padding: 20px 6% 0 8%;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: opacity 0.05s linear;
}

/* --- HERO LEFT --- */
.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 30px;
    background: rgba(56, 189, 248, 0.07);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 24px;
    animation: fadeInDown 0.8s ease-out;
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--primary);
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-left h1 {
    font-size: 6.5rem;
    line-height: 1.05;
    margin-bottom: 22px;
    text-shadow: 0 0 40px rgba(56, 189, 248, 0.08);
    animation: fadeInDown 1s ease-out 0.2s backwards;
}

.hero-left h1 span {
    color: var(--primary);
}

.hero-left p {
    font-size: 1.48rem;
    color: var(--text-dim);
    margin-bottom: 44px;
    line-height: 1.7;
    max-width: 480px;
    animation: fadeInUp 1s ease-out 0.5s backwards;
}

.hero-left p strong {
    font-size: 1.72rem;
}

/* --- HERO CTAs --- */
.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: -8px;
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

@keyframes btn-pulse-glow {
    0% {
        opacity: 0.55;
        transform: scale(1);
        filter: blur(6px);
    }

    70% {
        opacity: 0;
        transform: scale(1.22);
        filter: blur(12px);
    }

    100% {
        opacity: 0;
        transform: scale(1.22);
        filter: blur(12px);
    }
}

.hero-btn-primary {
    padding: 17px 42px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    border-radius: 30px;
    color: #0f172a;
    font-weight: 700;
    font-size: 1.18rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Gradient halo — pseudo-element indépendant du hover */
.hero-btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    z-index: -1;
    opacity: 0;
    animation: btn-pulse-glow 2.4s ease-out infinite;
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(56, 189, 248, 0.5);
}

.hero-btn-primary.pulse-off::before {
    animation: none;
}

.hero-btn-secondary {
    padding: 14px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 30px;
    color: var(--text-light);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(12px);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(56, 189, 248, 0.5);
    color: var(--primary);
    transform: translateY(-3px);
}

/* --- HERO RIGHT (neural canvas) --- */
.hero-right {
    position: relative;
    height: 100%;
    overflow: hidden;
}

#neural-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    animation: bounce 2s infinite;
    color: var(--text-dim);
    z-index: 2;
}

/* --- GLOBAL SECTIONS --- */
section {
    padding: 100px 10%;
    min-height: auto;
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary);
    margin: 10px auto;
    border-radius: 2px;
}

/* --- ABOUT --- */
@keyframes spin-ring {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.4;
    }
}

.about-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: center;
}

/* Left column */
.about-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    perspective: 800px;
}

/* A — Animated ring */
.profile-ring-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.22);
    will-change: transform;
}

.profile-ring-wrapper::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, #38bdf8, #818cf8, #c026d3, #818cf8, #38bdf8);
    animation: spin-ring 5s linear infinite;
    z-index: 0;
}

.profile-img-container {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a2744;
    z-index: 1;
}

.profile-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A — Open to work badge */
.about-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4ade80;
    white-space: nowrap;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* C — Stats row */
.about-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    background: rgba(56, 189, 248, 0.04);
    border: 1px solid rgba(56, 189, 248, 0.1);
    border-radius: 14px;
    padding: 12px 8px;
}

.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.2;
}

.about-stat-sep {
    width: 1px;
    height: 28px;
    background: rgba(56, 189, 248, 0.18);
    flex-shrink: 0;
}

/* B — Paragraphs */
.about-para {
    margin-bottom: 16px;
}

.about-para-icon {
    font-size: 0.95rem;
    color: var(--primary);
    margin-top: 4px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    opacity: 0.85;
}

.about-text p {
    font-size: 1.18rem;
    color: var(--text-dim);
    margin-bottom: 0;
    line-height: 1.7;
}

.about-highlight {
    color: var(--primary);
    font-weight: 600;
}

/* E — Location + badge */
.about-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.about-meta-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    margin: 0 8px;
}

.about-location {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.18rem;
    font-weight: 400;
    color: var(--text-dim);
}

.about-avail-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.about-avail-badge {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
}

.avail-open {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.avail-remote {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.22);
    color: var(--primary);
}

/* ═══════════════════════════════════════
   TIMELINE (new tl-* system)
═══════════════════════════════════════ */
.tl {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    margin-top: 140px;
}

/* ── SPINE ── */
.tl-glow {
    position: absolute;
    left: 50%;
    top: -80px;
    bottom: -80px;
    width: 18px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
            transparent 0%, rgba(var(--c1-rgb), .45) 5%,
            rgba(var(--c2-rgb), .25) 24%, rgba(var(--c3-rgb), .28) 46%,
            rgba(var(--c4-rgb), .22) 70%, rgba(var(--c5-rgb), .14) 92%,
            transparent 100%);
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

.tl-line {
    position: absolute;
    left: 50%;
    top: -80px;
    bottom: -80px;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
            transparent 0%, rgba(var(--c1-rgb), .95) 4%,
            rgba(var(--c2-rgb), .60) 24%, rgba(var(--c3-rgb), .65) 46%,
            rgba(var(--c4-rgb), .50) 70%, rgba(var(--c5-rgb), .35) 92%,
            transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.tl-ticks {
    position: absolute;
    left: 50%;
    top: -80px;
    bottom: -80px;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom,
            transparent 0, transparent 34px,
            rgba(255, 255, 255, .07) 34px, rgba(255, 255, 255, .07) 36px);
    z-index: 1;
    pointer-events: none;
}

.tl-particles {
    position: absolute;
    left: 50%;
    top: -80px;
    bottom: -80px;
    width: 50px;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

.tl-p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    border-radius: 100px;
    opacity: 0;
    width: 2px;
    height: 95px;
    margin: 0 auto;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1), transparent);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.6));
}

/* ── ITEMS ── */
.tl-item {
    display: block;
    margin-bottom: 74px;
    position: relative;
    z-index: 2;
    min-height: 100px;
    opacity: 0;
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.tl-item.from-left {
    transform: translateX(-55px);
}

.tl-item.from-right {
    transform: translateX(55px);
}

.tl-item.visible {
    opacity: 1;
    transform: translateX(0) !important;
}

.tl-item:last-child {
    margin-bottom: 0;
}

/* Spine echo inside open card */
.tl-item::before {
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right,
            transparent,
            rgba(var(--ac-rgb, 56, 189, 248), 0.22) 50%,
            transparent);
    filter: blur(7px);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.45s ease 0.20s;
}

.tl-item.open::before {
    opacity: 1;
}

/* ── MARKER ── */
.tl-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px;
    width: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: left .95s cubic-bezier(0.23, 1, 0.32, 1);
}

.tl-year {
    position: absolute;
    top: 50%;
    z-index: 10;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ac, var(--primary));
    opacity: .7;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(-50%) scale(1);
    transition: opacity 2.5s ease-out, transform 2.5s ease-out, color 2.5s ease-out;
}

.tl-item.left .tl-year {
    left: 50%;
    margin-left: 28px;
    right: auto;
    margin-right: 0;
}

.tl-item.right .tl-year {
    right: 50%;
    margin-right: 28px;
    left: auto;
    margin-left: 0;
}

/* Connectors */
.tl-item.left .tl-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(50% + 11px);
    left: -20px;
    height: 1px;
    background: linear-gradient(to left,
            var(--ac, var(--primary)) 0%,
            rgba(var(--ac-rgb, 56, 189, 248), .3) 55%, transparent 100%);
    transition: opacity .35s;
}

.tl-item.right .tl-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% + 11px);
    right: -20px;
    height: 1px;
    background: linear-gradient(to right,
            var(--ac, var(--primary)) 0%,
            rgba(var(--ac-rgb, 56, 189, 248), .3) 55%, transparent 100%);
    transition: opacity .35s;
}

.tl-item.open .tl-marker::before,
.tl-item.open .tl-marker::after {
    opacity: 0;
}

/* Ring dot */
.tl-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ac, var(--primary));
    background: var(--bg-color);
    box-shadow: 0 0 22px rgba(var(--ac-rgb, 56, 189, 248), .55);
    position: relative;
    transform: scale(1);
    transition: transform 2.5s ease-out,
        box-shadow 2.5s ease-out,
        border-color 2.5s ease-out,
        background 2.5s ease-out;
    flex-shrink: 0;
}

.tl-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: var(--ac, var(--primary));
    opacity: .55;
    transition: opacity 2.5s ease-out, background 2.5s ease-out, transform 2.5s ease-out;
    z-index: 2;
}

.tl-marker.energized .tl-dot {
    transform: scale(1.4);
    border-color: var(--ac, var(--primary));
    background: var(--bg-color);
    box-shadow:
        0 0 35px rgba(var(--ac-rgb, 56, 189, 248), .9),
        0 0 85px rgba(var(--ac-rgb, 56, 189, 248), .6),
        0 0 140px rgba(var(--ac-rgb, 56, 189, 248), .4);
    transition: transform .6s ease-out,
        box-shadow .6s ease-out,
        border-color .6s ease-out,
        background .6s ease-out;
}

.tl-marker.energized .tl-dot::before {
    background: #fff;
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
    transition: opacity .6s ease-out, background .6s ease-out, transform .6s ease-out;
}

.tl-marker.energized .tl-year {
    opacity: 1;
    color: var(--text-light);
    transform: translateY(-50%) scale(1.02);
    transition: opacity .6s ease-out, transform .6s ease-out, color .6s ease-out;
}

/* Card sizing */
.tl-item.left .tl-card {
    width: calc(50% - 37px);
}

.tl-item.right .tl-card {
    width: calc(50% - 37px);
    margin-left: calc(50% + 37px);
}

.tl-item.left.open .tl-card {
    width: calc(100% - 74px);
}

.tl-item.right.open .tl-card {
    width: calc(100% - 74px);
    margin-left: 74px;
}

.tl-spacer {
    display: none;
}

/* ── TWO-PIECE CARD ── */
.tl-card {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    position: relative;
    transition: width .95s cubic-bezier(0.23, 1, 0.32, 1),
        margin-left .95s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.30s cubic-bezier(.22, 1, .36, 1);
}

.tl-item.left .tl-card:hover {
    transform: translateY(-6px) translateX(-4px);
}

.tl-item.right .tl-card:hover {
    transform: translateY(-6px) translateX(4px);
}

/* ── PILLAR ── */
.tl-pillar {
    width: 50px;
    flex-shrink: 0;
    background: linear-gradient(to bottom,
            var(--ac, var(--primary)) 0%,
            rgba(var(--ac-rgb, 56, 189, 248), .58) 50%,
            rgba(var(--ac-rgb, 56, 189, 248), .25) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.tl-item.open .tl-pillar {
    box-shadow:
        0 0 12px rgba(var(--ac-rgb, 56, 189, 248), .25),
        0 0 24px rgba(var(--ac-rgb, 56, 189, 248), .12),
        inset 0 0 8px rgba(255, 255, 255, .07);
}

.tl-pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, .32) 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: 4px 4px;
}

/* Shimmer flash on hover */
.tl-pillar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0%, transparent 45%);
    transform: translateY(-100%);
    transition: transform .85s ease;
}

.tl-card:hover .tl-pillar::after {
    transform: translateY(0);
    transition: transform .55s ease;
}

.tl-pillar-num {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(15, 23, 42, .65);
    position: relative;
    z-index: 1;
}

.tl-pillar-icon {
    font-size: .88rem;
    color: rgba(15, 23, 42, .5);
    position: relative;
    z-index: 1;
}

.tl-pillar-label {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .26em;
    color: rgba(15, 23, 42, .38);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: 14px;
}

.tl-item.left .tl-pillar {
    border-radius: 0 22px 22px 0;
    order: 2;
}

.tl-item.right .tl-pillar {
    border-radius: 22px 0 0 22px;
    order: 1;
}

/* ── GLASS PANEL ── */
.tl-glass {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 4px 28px rgba(0, 0, 0, 0.18);
    padding: 28px 36px 26px;
    position: relative;
    overflow: hidden;
    transition:
        background 0.18s ease,
        backdrop-filter 0.18s ease,
        -webkit-backdrop-filter 0.18s ease,
        box-shadow 0.30s cubic-bezier(.22, 1, .36, 1),
        border-color 0.25s ease;
}

.tl-item.left .tl-glass {
    border-radius: 22px 0 0 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-right: none;
    order: 1;
}

.tl-item.right .tl-glass {
    border-radius: 0 22px 22px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-left: none;
    order: 2;
}

.tl-card:hover .tl-glass {
    background: rgba(255, 255, 255, 0.042);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-top-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 16px 48px rgba(0, 0, 0, 0.36),
        0 0 36px rgba(var(--ac-rgb, 56, 189, 248), 0.14);
}

.tl-item.open .tl-glass {
    background: rgba(255, 255, 255, 0.058);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16),
        0 24px 60px rgba(0, 0, 0, 0.48),
        0 0 50px rgba(var(--ac-rgb, 56, 189, 248), 0.18);
}

/* Top accent bar */
.tl-item.left .tl-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to left,
            var(--ac, var(--primary)) 0%, rgba(var(--ac-rgb, 56, 189, 248), .3) 55%, transparent 100%);
    border-radius: 22px 0 0 0;
}

.tl-item.right .tl-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right,
            var(--ac, var(--primary)) 0%, rgba(var(--ac-rgb, 56, 189, 248), .3) 55%, transparent 100%);
    border-radius: 0 22px 0 0;
}

/* Shimmer sweep */
.tl-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg,
            transparent 38%, rgba(255, 255, 255, .032) 50%, transparent 62%);
    transform: translateX(-110%) skewX(-14deg);
    transition: transform 0s;
    pointer-events: none;
}

.tl-card:hover .tl-glass::after {
    transform: translateX(160%) skewX(-14deg);
    transition: transform .7s ease;
}

/* Deployed card background (covers spine) */
.tl-card-bg {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: var(--bg-color);
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
}

.tl-item.open .tl-card-bg {
    opacity: 0.98;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.tl-glass,
.tl-pillar {
    z-index: 1;
}

/* Border light sweep */
.tl-border-light {
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 2px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(var(--ac-rgb, 56, 189, 248), 0.05) 5%,
            rgba(var(--ac-rgb, 56, 189, 248), 0.6) 45%,
            rgba(255, 255, 255, 1) 50%,
            rgba(var(--ac-rgb, 56, 189, 248), 0.6) 55%,
            rgba(var(--ac-rgb, 56, 189, 248), 0.05) 95%,
            transparent 100%);
    background-size: 100% 300%;
    background-position: 0% -100%;
    filter: blur(2px) drop-shadow(0 0 10px rgba(var(--ac-rgb, 56, 189, 248), 1)) drop-shadow(0 0 30px rgba(var(--ac-rgb, 56, 189, 248), 0.8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    will-change: background-position, opacity;
    transform: translateZ(0);
}

.tl-item.open .tl-border-light {
    opacity: 1;
}

.tl-border-light.sweeping {
    animation: borderSweep var(--sweep-duration, 1.5s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

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

    100% {
        background-position: 0% 200%;
    }
}

/* ── CONTENT ── */
.tl-role {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ac, var(--primary));
    margin-bottom: 12px;
    white-space: nowrap;
    letter-spacing: .02em;
}

.tl-company-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
}

.tl-company {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.15;
}

.tl-li {
    color: #0a66c2;
    font-size: 1.1rem;
    transition: color .25s, transform .25s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tl-li:hover {
    color: var(--text-light);
    transform: scale(1.2);
}

.tl-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tl-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    color: var(--text-dim);
}

.tl-meta-item i {
    font-size: .78rem;
    color: var(--ac, var(--primary));
    opacity: .6;
}

.tl-div {
    height: 1px;
    margin-bottom: 14px;
}

.tl-item.left .tl-div {
    background: linear-gradient(to left,
            rgba(var(--ac-rgb, 56, 189, 248), .18) 0%, transparent 100%);
}

.tl-item.right .tl-div {
    background: linear-gradient(to right,
            rgba(var(--ac-rgb, 56, 189, 248), .18) 0%, transparent 100%);
}

.tl-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-dim);
    transition: color .3s;
    user-select: none;
}

.tl-hint i {
    font-size: .75rem;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.tl-item.open .tl-hint i {
    transform: rotate(180deg);
}

.tl-card:hover .tl-hint {
    color: var(--ac, var(--primary));
}

.tl-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .95s cubic-bezier(0.23, 1, 0.32, 1), opacity .6s ease;
    opacity: 0;
}

.tl-item.open .tl-body {
    max-height: 1000px;
    opacity: 1;
}

.tl-body-inner {
    padding-top: 18px;
}

.tl-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tl-ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .97rem;
    color: var(--text-dim);
    line-height: 1.65;
}

.tl-ul li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ac, var(--primary));
    flex-shrink: 0;
    margin-top: 9px;
    opacity: .7;
}

.tl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.tl-tag {
    padding: 5px 13px;
    border-radius: 8px;
    background: rgba(var(--ac-rgb, 56, 189, 248), .08);
    border: 1px solid rgba(var(--ac-rgb, 56, 189, 248), .2);
    font-size: .78rem;
    font-weight: 500;
    color: var(--ac, var(--primary));
    transition: background .25s;
}

.tl-tag:hover {
    background: rgba(var(--ac-rgb, 56, 189, 248), .17);
}

/* Deployed card z-index + marker repositioning */
.tl-item.open {
    z-index: 10;
}

.tl-item.left.open .tl-marker {
    left: calc(100% - 37px);
}

.tl-item.right.open .tl-marker {
    left: 37px;
}

/* ═══════════════════════════════════════
   PROJECTS CAROUSEL
═══════════════════════════════════════ */

/* ── SECTION ── */
.projects-section { position:relative; z-index:1; width:100%; padding:90px 0 80px; user-select:none; }
.proj-card.expanded .proj-body { user-select:text; cursor:auto; }

.projects-section .section-header { text-align:center; margin-bottom:0; }

.proj-section-sub { margin-top:10px; font-size:1.05rem; color:var(--text-dim); font-weight:300; }

/* ── BORDER SPIN (projects) ── */
.proj-border-spin {
    position: absolute; inset: -2px; border-radius: 22px; padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    overflow: hidden; pointer-events: none; z-index: 30; opacity: 0;
    transition: opacity .8s ease .2s;
}
.proj-card.expanded .proj-border-spin { opacity: 1; }
.proj-border-spin::before {
    content: ''; position: absolute;
    width: 300%; height: 300%; top: -100%; left: -100%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 82%, rgba(var(--card-rgb), .0) 86%, rgba(var(--card-rgb), .6) 89%, rgba(255,255,255, .92) 91%, rgba(var(--card-rgb), .6) 93%, rgba(var(--card-rgb), .0) 97%, transparent 100%);
    will-change: transform; transform-origin: 50% 50%;
    animation: spinComet 3s linear infinite; animation-play-state: paused;
}
.proj-card.expanded .proj-border-spin::before { animation-play-state: running; }

/* ── CAROUSEL ── */
#proj-expand-overlay {
    position:fixed; inset:0; z-index:5;
    background:rgba(8,12,24,0.45);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    opacity:0; pointer-events:none;
    transition:opacity 0.45s ease;
}
#proj-expand-overlay.active { opacity:1; pointer-events:auto; cursor:zoom-out; }

.carousel-outer {
    position:relative; z-index:10; width:100%;
    overflow-x:clip; overflow-y:visible;
    height:610px;
    transition:height 0.52s cubic-bezier(0.25,0.46,0.45,0.94);
    cursor:grab;
}
.carousel-outer.dragging { cursor:grabbing; }

/* fade edges */
.carousel-outer::before,
.carousel-outer::after {
    content:''; position:absolute; top:0; bottom:0; width:120px; z-index:10; pointer-events:none;
}
.carousel-outer::before { left:0;  background:linear-gradient(to right,var(--bg-color),transparent); }
.carousel-outer::after  { right:0; background:linear-gradient(to left, var(--bg-color),transparent); }

.carousel-track {
    display:flex; gap:24px;
    padding:16px 0 34px;
    will-change:transform;
    align-items:flex-start;
}

/* ── CARD ── */
.proj-card {
    flex-grow:0; flex-shrink:0;
    width:370px; height:520px;
    border-radius:20px; position:relative;
    background: rgba(255,255,255,0.028);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255,255,255,0.20);
    border-left: 1px solid rgba(255,255,255,0.09);
    border-right: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.11),
        inset 0 -1px 0 rgba(0,0,0,0.10),
        0 8px 32px rgba(0,0,0,.4);
    margin:0;
    transition:
        width  .52s cubic-bezier(0.25,0.46,0.45,0.94),
        height .52s cubic-bezier(0.25,0.46,0.45,0.94),
        margin .52s cubic-bezier(0.25,0.46,0.45,0.94),
        transform .5s cubic-bezier(0.25,0.46,0.45,0.94),
        box-shadow .45s ease, border-color .35s ease,
        background .45s ease, backdrop-filter .45s ease,
        opacity .45s ease, filter .45s ease;
    transform:scale(.93) translateY(10px) translateX(0);
    filter:blur(0px) brightness(1);
    cursor:pointer;
}
.proj-card.active { transform:scale(1.04) translateY(0) translateX(0); }
.proj-card.shift-left { transform:scale(.93) translateY(10px) translateX(-90px); }
.proj-card.shift-right { transform:scale(.93) translateY(10px) translateX(90px); }
.proj-card.expanded {
    width:540px; height:760px;
    margin:-170px -85px 40px -85px;
    transform:scale(1) translateY(0) translateX(0) !important;
    background: rgba(10,14,28,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color:rgba(var(--card-rgb),.3);
    box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 50px rgba(var(--card-rgb),.12), inset 0 1px 0 rgba(255,255,255,.08);
    z-index:20;
}

/* shimmer */
.proj-card::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);
    background-size:400% 100%;
    background-position:100% 0;
    pointer-events:none; border-radius:20px;
}
.proj-card:not(.expanded):hover::after { animation:projShimmer .7s ease forwards; }
@keyframes projShimmer { to { background-position:0% 0; } }

/* ── CARD VISUAL ── */
.proj-visual { position:relative; width:100%; height:240px; overflow:hidden; flex-shrink:0; border-radius:19px 19px 0 0; transition: filter 0.5s ease; }
.proj-visual.canvas-dim { filter: saturate(0.5) brightness(0.52); }
.proj-visual canvas {
    position:absolute; top:0;
    width:540px; height:240px;
    left:50%; transform:translateX(-50%);
}
.proj-visual-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to bottom,transparent 30%,rgba(8,14,28,.55) 70%,rgba(8,14,28,.82) 100%);
}
.proj-card.expanded .proj-visual-overlay {
    background:linear-gradient(to bottom,transparent 30%,rgba(8,12,24,.65) 70%,rgba(8,12,24,.95) 100%);
}

/* type badge */
.proj-type-badge {
    position:absolute; top:14px; left:14px;
    font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    padding:2px 8px 2px 9px; border-radius:3px;
    background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
    border:none; border-left:2px solid var(--card-accent); color:var(--card-accent);
}

/* year */
.proj-year {
    position:absolute; top:16px; right:14px;
    font-size:.76rem; font-weight:500; color:rgba(255,255,255,.42);
    letter-spacing:.04em;
}

/* ── CARD BODY ── */
.proj-body {
    padding:16px 20px 0;
    display:flex; flex-direction:column;
    height:calc(100% - 240px);
}

.proj-title-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:9px;
}
.proj-title { font-size:1.14rem; font-weight:600; line-height:1.35; flex:1; }

/* GitHub — plain icon, no box */
.proj-gh-link {
    font-size:1.08rem; color:rgba(255,255,255,.3);
    text-decoration:none; flex-shrink:0; margin-top:2px;
    transition:color .2s, transform .2s;
}
.proj-gh-link:hover { color:var(--card-accent); transform:scale(1.12); }

/* LinkedIn — same style */
.proj-li-link {
    font-size:1.08rem; color:#0a66c2;
    text-decoration:none; flex-shrink:0; margin-top:2px;
    transition:color .2s, transform .2s;
}
.proj-li-link:hover { color:var(--card-accent); transform:scale(1.12); }

/* SHORT desc */
.proj-desc-short {
    font-size:.88rem; color:var(--text-dim); line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* SHORT tags */
.proj-tags-short {
    display:flex; flex-wrap:wrap; gap:5px;
}

/* shared tag style */
.proj-tag {
    font-size:.76rem; font-weight:500; padding:3px 9px; border-radius:7px;
    background:rgba(var(--card-rgb),.08); border:1px solid rgba(var(--card-rgb),.2); color:var(--card-accent);
}

/* ── SMOOTH GRID TRANSITIONS ── */
.proj-grid-collapse-wrapper {
    display: grid; grid-template-rows: 1fr;
    opacity: 1; transition: grid-template-rows .52s cubic-bezier(0.25,0.46,0.45,0.94), opacity .3s ease .1s;
}
.proj-grid-collapse-wrapper > .proj-grid-inner { overflow: hidden; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.proj-card.expanded .proj-grid-collapse-wrapper {
    grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .52s cubic-bezier(0.25,0.46,0.45,0.94), opacity .2s ease;
}

.proj-grid-expand-wrapper {
    display: grid; grid-template-rows: 0fr;
    opacity: 0; transition: grid-template-rows .52s cubic-bezier(0.25,0.46,0.45,0.94), opacity .2s ease;
}
.proj-grid-expand-wrapper > .proj-grid-inner { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.proj-card.expanded .proj-grid-expand-wrapper {
    grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .52s cubic-bezier(0.25,0.46,0.45,0.94), opacity .45s ease .1s;
}

/* ── EXPANDED EXTRA CONTENT ── */
.proj-extra { display: block; }

.proj-meta-exp {
    display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; margin-bottom:12px;
}
.proj-meta-item {
    font-size:.84rem; color:var(--text-dim); display:flex; align-items:center; gap:5px;
}
.proj-meta-item i { font-size:.68rem; color:rgba(var(--card-rgb),.55); }

.proj-divider-exp {
    height:1px; margin-bottom:13px;
    background:linear-gradient(to right,rgba(var(--card-rgb),.22),rgba(var(--card-rgb),.04) 70%,transparent);
}

.proj-desc-full {
    font-size:.93rem; color:#adbdd1; line-height:1.6; margin-bottom:14px;
}
.proj-desc-full ul { list-style:none; padding-left:0; display:flex; flex-direction:column; gap:7px; }
.proj-desc-full ul li { padding-left:14px; position:relative; }
.proj-desc-full ul li::before {
    content:''; position:absolute; left:0; top:8px;
    width:4px; height:4px; border-radius:50%; background:var(--card-accent); opacity:.65;
}

.proj-tags-title-exp {
    font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
    color:rgba(var(--card-rgb),.5); margin-bottom:8px;
}
.proj-tags-exp { display:flex; flex-wrap:wrap; gap:5px; }

/* ── EXPAND HINT ── */
.proj-expand-hint {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 0 12px; font-size:.78rem; font-weight:500;
    color:rgba(var(--card-rgb),.38);
    border-top:1px solid rgba(var(--card-rgb),.08);
    margin-top:auto; letter-spacing:.03em;
    transition:color .25s, border-color .25s;
}
.proj-expand-hint .arrow {
    font-size:.68rem;
    transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);
}
.proj-card:hover .proj-expand-hint { color:rgba(var(--card-rgb),.85); border-color:rgba(var(--card-rgb),.2); }
.proj-card:hover:not(.expanded) .proj-expand-hint .arrow { transform:translateY(2px); }
.proj-card.expanded .proj-expand-hint .arrow { transform:rotate(180deg); }
.proj-expand-hint .hint-expand { display:block; }
.proj-expand-hint .hint-collapse { display:none; }
.proj-card.expanded .proj-expand-hint .hint-expand { display:none; }
.proj-card.expanded .proj-expand-hint .hint-collapse { display:block; }

/* ── ACCENTS (Experience gradient: #00f0ff → #4d88ff → #7b5aff → #a82ee6) ── */
.acc-c1      { --card-rgb:0,240,255;    --card-accent:#00f0ff; }
.acc-c1c2    { --card-rgb:38,188,255;    --card-accent:#26bcff; }
.acc-c2      { --card-rgb:77,136,255;    --card-accent:#4d88ff; }
.acc-c2c3    { --card-rgb:100,113,255;   --card-accent:#6471ff; }
.acc-c3      { --card-rgb:123,90,255;    --card-accent:#7b5aff; }
.acc-c3c4    { --card-rgb:146,68,243;    --card-accent:#9244f3; }
.acc-c4      { --card-rgb:168,46,230;    --card-accent:#a82ee6; }

/* ── DOTS ── */
.carousel-dots { display:flex; justify-content:center; gap:6px; margin-top:32px; }
.carousel-dots .dot {
    width:6px; height:6px; border-radius:3px;
    background:rgba(255,255,255,.15);
    transition:all .35s cubic-bezier(.4,0,.2,1); cursor:pointer;
}
.carousel-dots .dot.active { width:22px; background:var(--primary); box-shadow:0 0 8px rgba(56,189,248,.5); }

.proj-scroll-hint {
    text-align:center; margin-top:14px; font-size:.78rem;
    color:rgba(148,163,184,.35); display:flex; align-items:center; justify-content:center; gap:6px;
}

/* --- CONTACT --- */
#contact { padding-top: 130px; padding-bottom: 120px; }

.contact-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 0;
    padding-top: 80px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: var(--text-light);
    text-decoration: none;
    padding: 36px 28px;
    background: rgba(255,255,255,0.028);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 20px;
    border-top: 1px solid rgba(255,255,255,0.20);
    border-left: 1px solid rgba(255,255,255,0.09);
    border-right: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.11),
        inset 0 -1px 0 rgba(0,0,0,0.10),
        0 4px 24px rgba(0,0,0,0.22);
    width: 230px;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1),
        background 0.28s ease,
        box-shadow 0.28s ease,
        backdrop-filter 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease;
}

.contact-item:hover {
    background: rgba(56,189,248,0.10);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-color: rgba(56,189,248,0.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 32px rgba(56,189,248,0.12),
        0 0 0 1px rgba(56,189,248,0.08);
    transform: translateY(-4px);
    color: var(--primary);
}

.contact-item i {
    font-size: 2.4rem;
}

.back-to-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 180px;
    margin-bottom: -50px;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.back-to-top-label {
    color: var(--text-dim);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.back-to-top-label:hover {
    color: var(--primary);
}

.back-to-top i {
    color: var(--primary);
    animation: bounce 2s infinite;
    font-size: 1.9rem;
}

.back-to-top i:hover {
    color: var(--secondary);
}

footer {
    padding: 30px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- ANIMATIONS --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* --- SKILLS BENTO GLASS --- */
.skills-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-top: 40px;
}

/* Liquid glass card base */
.sk-card {
    background: rgba(255, 255, 255, 0.028);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 4px 28px rgba(0, 0, 0, 0.18);
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.30s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.30s cubic-bezier(.22, 1, .36, 1),
        background 0.30s ease,
        border-color 0.30s ease,
        backdrop-filter 0.30s ease;
}

/* Colored top accent line */
.sk-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--sk-accent), transparent);
    opacity: 0.5;
    border-radius: 0 0 4px 4px;
    transition: opacity 0.28s, left 0.28s, right 0.28s;
    pointer-events: none;
}

/* Light shimmer sweep on hover */
.sk-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.sk-card:hover::after {
    left: 130%;
}

.sk-card:hover {
    background: rgba(255, 255, 255, 0.042);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    transform: translateY(-6px);
    border-top-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14),
        0 16px 48px rgba(0, 0, 0, 0.36),
        0 0 36px rgba(var(--sk-rgb), 0.14);
}

.sk-card:hover::before {
    opacity: 1;
    left: 0;
    right: 0;
}

/* Color variants */
.c-cyan {
    --sk-accent: #38bdf8;
    --sk-rgb: 56, 189, 248;
}

.c-indigo {
    --sk-accent: #818cf8;
    --sk-rgb: 129, 140, 248;
}

.c-violet {
    --sk-accent: #a78bfa;
    --sk-rgb: 167, 139, 250;
}

.c-emerald {
    --sk-accent: #34d399;
    --sk-rgb: 52, 211, 153;
}

.c-rose {
    --sk-accent: #fb7185;
    --sk-rgb: 251, 113, 133;
}

.c-amber {
    --sk-accent: #fbbf24;
    --sk-rgb: 251, 191, 36;
}

.c-coral {
    --sk-accent: #f97316;
    --sk-rgb: 249, 115, 22;
}

/* Bento column spans */
.span-7 {
    grid-column: span 7;
}

.span-6 {
    grid-column: span 6;
}

.span-5 {
    grid-column: span 5;
}

.span-4 {
    grid-column: span 4;
}

.span-12 {
    grid-column: span 12;
}

/* Card header */
.sk-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sk-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(var(--sk-rgb), 0.12);
    color: var(--sk-accent);
    border: 1px solid rgba(var(--sk-rgb), 0.18);
}

.sk-head h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.01em;
    margin: 0;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 5px 13px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(var(--sk-rgb), 0.16);
    background: rgba(var(--sk-rgb), 0.07);
    color: var(--sk-accent);
    transition: all 0.2s ease;
    cursor: default;
}

.tag:hover {
    background: rgba(var(--sk-rgb), 0.18);
    border-color: rgba(var(--sk-rgb), 0.38);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--sk-rgb), 0.15);
}

.tag-hero {
    font-size: 0.93rem;
    font-weight: 600;
    padding: 6px 15px;
}

/* Certification tag — issuer distinguished from certification name by weight + hairline divider, no nested boxes */
.tag-issuer {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.tag-sep {
    width: 1px;
    height: 12px;
    background: rgba(var(--sk-rgb), 0.4);
    flex-shrink: 0;
}

.tag-cert-name {
    font-weight: 500;
    opacity: 0.88;
}

/* Language gauges */
.lang-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.lang-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-light);
}

.lang-level {
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(var(--sk-rgb), 0.10);
    color: var(--sk-accent);
    border: 1px solid rgba(var(--sk-rgb), 0.20);
}

.gauge-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Light sweep — travels only within the colored fill portion */
@keyframes sk-gauge-sweep {
    0% {
        left: -60px;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}

.gauge-fill {
    height: 100%;
    border-radius: 10px;
    width: 0;
    position: relative;
    overflow: hidden;
    transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* Sweep lives inside the fill — clipped to fill width */
.gauge-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60px;
    width: 50px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
    border-radius: 10px;
}

.c-rose:hover .lang-item:nth-child(1) .gauge-fill::after {
    animation: sk-gauge-sweep 0.75s ease forwards;
    animation-delay: 0.00s;
}

.c-rose:hover .lang-item:nth-child(2) .gauge-fill::after {
    animation: sk-gauge-sweep 0.75s ease forwards;
    animation-delay: 0.12s;
}

.c-rose:hover .lang-item:nth-child(3) .gauge-fill::after {
    animation: sk-gauge-sweep 0.75s ease forwards;
    animation-delay: 0.24s;
}

.c-rose:hover .lang-item:nth-child(4) .gauge-fill::after {
    animation: sk-gauge-sweep 0.75s ease forwards;
    animation-delay: 0.36s;
}

.fill-native {
    background: linear-gradient(90deg, rgba(251, 113, 133, 0.5), #fb7185);
}

.fill-c1 {
    background: linear-gradient(90deg, rgba(251, 113, 133, 0.35), rgba(251, 113, 133, 0.88));
}

.fill-b2 {
    background: linear-gradient(90deg, rgba(251, 113, 133, 0.25), rgba(251, 113, 133, 0.70));
}

.fill-a1 {
    background: linear-gradient(90deg, rgba(251, 113, 133, 0.15), rgba(251, 113, 133, 0.48));
}


/* --- MEDIA QUERIES --- */
@media (max-width: 1024px) {

    /* Bento: 2 cols */
    .skills-bento {
        grid-template-columns: repeat(6, 1fr);
    }

    .span-7,
    .span-5 {
        grid-column: span 6;
    }

    .span-4 {
        grid-column: span 3;
    }

    .span-12 {
        grid-column: span 6;
    }

    .hero-split {
        grid-template-columns: 1fr;
        padding: 80px 8% 0;
        justify-items: center;
        text-align: center;
    }

    .hero-left {
        align-items: center;
    }

    .hero-left p {
        max-width: 560px;
    }

    .hero-right {
        position: absolute;
        inset: 0;
        opacity: 0.2;
        z-index: 0;
    }
}

@media (max-width: 768px) {

    /* Bento: 1 col on mobile */
    .skills-bento {
        grid-template-columns: 1fr;
    }

    .span-7,
    .span-5,
    .span-4,
    .span-12 {
        grid-column: span 1;
    }

    .hero-left h1 {
        font-size: 2.8rem;
    }

    .about-card {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 28px;
    }

    .about-left {
        max-width: 220px;
        width: 100%;
        margin: 0 auto;
    }

    .nav-island {
        display: none;
    }

    nav {
        padding: 12px 20px;
    }

    /* Timeline responsive */
    .tl-glow,
    .tl-line,
    .tl-ticks,
    .tl-particles {
        left: 26px;
        transform: none;
    }

    .tl-item {
        margin-bottom: 48px;
        min-height: 60px;
    }

    .tl-marker {
        left: 0;
        transform: none;
        width: 52px;
        top: 22px;
    }

    .tl-marker::before,
    .tl-marker::after {
        display: none !important;
    }

    .tl-item.left .tl-card,
    .tl-item.right .tl-card {
        width: calc(100% - 52px) !important;
        margin-left: 52px !important;
    }

    .tl-item .tl-pillar {
        order: 2;
        border-radius: 0 22px 22px 0;
        width: 42px;
    }

    .tl-item .tl-glass {
        order: 1;
        border-radius: 22px 0 0 22px;
        border-right: none;
        border-left: 1px solid rgba(255, 255, 255, .075);
    }

    .tl-item.left.open .tl-marker,
    .tl-item.right.open .tl-marker {
        left: 0;
    }

    .tl-item.left .tl-card:hover,
    .tl-item.right .tl-card:hover {
        transform: translateY(-4px);
    }

    .tl-company {
        font-size: 1.35rem;
    }

    /* Projects carousel is responsive via JS centering */
}

/* ═══════════════════════════════════════
   EDUCATION SECTION V4
═══════════════════════════════════════ */
@keyframes spinComet {
    to { transform: rotate(360deg); }
}

@keyframes moveDotGrid {
    from { background-position: 0px 0px; }
    to   { background-position: 8px 8px; }
}

.edu-list {
    max-width: 940px;
    margin: 25px auto 0;
    display: flex; flex-direction: column;
    gap: 60px;
}

.edu-item {
    opacity: 0;
    transform: translateY(60px) scaleX(0.97) scaleY(0.84);
    transform-origin: bottom center;
    transition:
        opacity   .82s cubic-bezier(.22, 1, .36, 1),
        transform .82s cubic-bezier(.22, 1, .36, 1);
}

.edu-item.visible {
    opacity: 1;
    transform: translateY(0) scaleX(1) scaleY(1);
}

.edu-item:nth-child(odd)  { padding-right: clamp(0px, 8%, 110px); }
.edu-item:nth-child(even) { padding-left:  clamp(0px, 8%, 110px); }

.edu-item.open { z-index: 10; }
.edu-item.open .edu-card { transform: none !important; }

.edu-card {
    display: flex; align-items: stretch;
    cursor: pointer; position: relative;
    border-radius: 26px;
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        box-shadow .38s ease;
    will-change: transform;
}

.edu-card:hover { transform: translateY(-4px); }

.edu-border-spin {
    position: absolute;
    inset: -1.5px;
    border-radius: 27.5px;
    padding: 2px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    overflow: hidden;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity .65s ease;
}
.edu-item.open .edu-border-spin { opacity: 1; }

.edu-border-spin::before {
    content: '';
    position: absolute;
    width: 300%; height: 300%;
    top: -100%; left: -100%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 82%,
        rgba(var(--ac-rgb, 56,189,248), .0)  86%,
        rgba(var(--ac-rgb, 56,189,248), .6)  89%,
        rgba(255,255,255, .92)               91%,
        rgba(var(--ac-rgb, 56,189,248), .6)  93%,
        rgba(var(--ac-rgb, 56,189,248), .0)  97%,
        transparent 100%
    );
    will-change: transform;
    transform-origin: 50% 50%;
    animation: spinComet 3s linear infinite;
    animation-play-state: paused;
}
.edu-item.open .edu-border-spin::before {
    animation-play-state: running;
}

.edu-pillar {
    width: 48px; flex-shrink: 0;
    background: linear-gradient(to bottom,
        var(--ac, var(--primary)) 0%,
        rgba(var(--ac-rgb, 56,189,248), .58) 42%,
        rgba(var(--ac-rgb, 56,189,248), .20) 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 22px 0 14px; gap: 12px;
    position: relative; overflow: hidden; z-index: 1;
    transition: box-shadow .45s ease;
}

.edu-item.open .edu-pillar {
    animation: pillarPulse 2.8s ease-in-out infinite;
}
@keyframes pillarPulse {
    0%,100% { box-shadow: 0 0 14px rgba(var(--ac-rgb,56,189,248),.22), inset 0 0 6px rgba(255,255,255,.06); }
    50%     { box-shadow: 0 0 34px rgba(var(--ac-rgb,56,189,248),.50), inset 0 0 16px rgba(255,255,255,.13); }
}

.edu-pillar::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(15,23,42,.32) 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: 0px 0px;
    pointer-events: none;
    transition: animation .2s;
}
.edu-card:hover .edu-pillar::before {
    animation: moveDotGrid .7s linear infinite;
}

.edu-pillar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, transparent 50%);
    transform: translateY(-100%);
    transition: transform .82s ease;
    pointer-events: none;
}
.edu-card:hover .edu-pillar::after {
    transform: translateY(0);
    transition: transform .50s ease;
}

.edu-pillar-icon {
    font-size: 1.05rem; color: rgba(15,23,42,.5);
    position: relative; z-index: 1;
}

.edu-pillar-label {
    margin-top: auto;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .26em;
    color: rgba(15,23,42,.48);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    position: relative; z-index: 1;
    margin-bottom: 16px; line-height: 1;
}

.edu-item:nth-child(odd)  .edu-pillar { border-radius: 0 24px 24px 0; order: 2; }
.edu-item:nth-child(even) .edu-pillar { border-radius: 24px 0 0 24px; order: 1; }

.edu-glass {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.028);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border-top:    1px solid rgba(255,255,255,.20);
    border-bottom: 1px solid rgba(255,255,255,.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 6px 32px rgba(0,0,0,.20);
    padding: 28px 36px 26px;
    position: relative; overflow: hidden; z-index: 1;
    transition:
        background      .22s ease,
        backdrop-filter .22s ease,
        box-shadow      .36s cubic-bezier(.22,1,.36,1),
        border-color    .26s ease;
}
.edu-item:nth-child(odd)  .edu-glass { border-radius: 24px 0 0 24px; border-left:  1px solid rgba(255,255,255,.09); border-right: none; order: 1; }
.edu-item:nth-child(even) .edu-glass { border-radius: 0 24px 24px 0; border-right: 1px solid rgba(255,255,255,.09); border-left:  none; order: 2; }

.edu-card:hover .edu-glass {
    background: rgba(255,255,255,.048);
    backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
    border-top-color: rgba(255,255,255,.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -1px 0 rgba(0,0,0,.14),
        0 14px 44px rgba(0,0,0,.36),
        0 0 52px rgba(var(--ac-rgb), .18);
}
.edu-item.open .edu-glass {
    background: rgba(255,255,255,.062);
    backdrop-filter: blur(20px) saturate(178%); -webkit-backdrop-filter: blur(20px) saturate(178%);
    border-top-color: rgba(255,255,255,.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.26),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 28px 72px rgba(0,0,0,.54),
        0 0 64px rgba(var(--ac-rgb), .22);
}

.edu-item:nth-child(odd) .edu-glass::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to left, var(--ac,var(--primary)) 0%, rgba(var(--ac-rgb),.28) 60%, transparent 100%);
    border-radius: 24px 0 0 0;
    transition: filter .36s ease, opacity .36s ease;
}
.edu-item:nth-child(even) .edu-glass::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(to right, var(--ac,var(--primary)) 0%, rgba(var(--ac-rgb),.28) 60%, transparent 100%);
    border-radius: 0 24px 0 0;
    transition: filter .36s ease, opacity .36s ease;
}
.edu-card:hover .edu-glass::before {
    filter: drop-shadow(0 0 6px rgba(var(--ac-rgb),.9));
}

.edu-glass::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.034) 50%, transparent 62%);
    transform: translateX(-110%) skewX(-14deg);
    transition: transform 0s; pointer-events: none;
}
.edu-card:hover .edu-glass::after {
    transform: translateX(160%) skewX(-14deg);
    transition: transform .76s ease;
}

.edu-year-mark {
    position: absolute; right: 20px; bottom: 8px;
    font-size: 3rem;
    font-weight: 900; line-height: 1;
    color: rgba(var(--ac-rgb), .04);
    letter-spacing: -.04em;
    pointer-events: none; user-select: none;
    white-space: nowrap;
    z-index: 0;
    transition: opacity .4s ease, color .36s ease;
}
.edu-item:nth-child(even) .edu-year-mark { right: auto; left: 20px; }
.edu-card:hover  .edu-year-mark { color: rgba(var(--ac-rgb), .08); }
.edu-item.open   .edu-year-mark { opacity: 0; }

.edu-card-bg {
    position: absolute; inset: 0; border-radius: 26px;
    background: var(--bg-color); opacity: 0;
    transition: opacity .85s ease; z-index: 0;
}
.edu-item.open .edu-card-bg { opacity: .97; box-shadow: 0 30px 72px rgba(0,0,0,.54); }

.edu-role {
    font-size: 1.15rem; font-weight: 600;
    color: var(--ac, var(--primary));
    margin-bottom: 11px; letter-spacing: .02em; line-height: 1.4;
}
.edu-company-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.edu-company {
    font-size: 1.85rem; font-weight: 700;
    color: var(--text-light); line-height: 1.18;
}
.edu-li { color: #0a66c2; font-size: 1.18rem; transition: color .25s, transform .25s; display: flex; align-items: center; flex-shrink: 0; }
.edu-li:hover { color: var(--text-light); transform: scale(1.2); }

.edu-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.edu-meta-item { display: flex; align-items: center; gap: 7px; font-size: .97rem; color: var(--text-dim); }
.edu-meta-item i { font-size: .8rem; color: var(--ac, var(--primary)); opacity: .6; }

.edu-date { display: flex; align-items: center; gap: 8px; font-size: .97rem; font-weight: 600; color: var(--ac, var(--primary)); opacity: .75; }
.edu-date i { font-size: .8rem; opacity: .65; }

.edu-div { height: 1px; margin-bottom: 16px; }
.edu-item:nth-child(odd)  .edu-div { background: linear-gradient(to left,  rgba(var(--ac-rgb),.18) 0%, transparent 100%); width: calc(100% + 24px); }
.edu-item:nth-child(even) .edu-div { background: linear-gradient(to right, rgba(var(--ac-rgb),.18) 0%, transparent 100%); width: calc(100% + 24px); margin-left: -24px; }

.edu-hint { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 500; color: var(--text-dim); transition: color .3s; user-select: none; }
.edu-hint i { font-size: .78rem; transition: transform .44s cubic-bezier(.22,1,.36,1); }
.edu-item.open  .edu-hint i  { transform: rotate(180deg); }
.edu-card:hover .edu-hint    { color: var(--ac, var(--primary)); }

.edu-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows .78s cubic-bezier(.22, 1, .36, 1),
        opacity            .45s ease .08s;
}
.edu-item.open .edu-body {
    grid-template-rows: 1fr;
    opacity: 1;
}

.edu-body-inner {
    overflow: hidden;
    padding-top: 22px;
    position: relative; z-index: 1;
    transform: translateY(10px);
    transition: transform .68s cubic-bezier(.22, 1, .36, 1) .1s;
}
.edu-item.open .edu-body-inner { transform: translateY(0); }

.edu-desc { font-size: 1.01rem; color: var(--text-dim); line-height: 1.76; }
.edu-desc strong { color: rgba(var(--ac-rgb),.9); font-weight: 600; }
.edu-desc p + p { margin-top: 15px; }

.edu-ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.edu-ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.01rem; color: var(--text-dim); line-height: 1.68; }
.edu-ul li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ac,var(--primary)); flex-shrink: 0; margin-top: 10px; opacity: .7; }

.edu-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.edu-tag {
    padding: 6px 15px; border-radius: 9px;
    background: rgba(var(--ac-rgb),.07);
    border: 1px solid rgba(var(--ac-rgb),.20);
    font-size: .82rem; font-weight: 500; color: var(--ac,var(--primary));
    transition: background .25s, transform .22s, box-shadow .22s;
}
.edu-tag:hover {
    background: rgba(var(--ac-rgb),.16);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--ac-rgb),.18);
}

.edu-item:nth-child(even) .edu-glass { text-align: right; }
.edu-item:nth-child(even) .edu-company-row { flex-direction: row-reverse; }
.edu-item:nth-child(even) .edu-meta        { flex-direction: row-reverse; }
.edu-item:nth-child(even) .edu-ul li       { flex-direction: row-reverse; }
.edu-item:nth-child(even) .edu-tags        { justify-content: flex-end; }

@media (max-width: 768px) {
    .edu-item:nth-child(odd), .edu-item:nth-child(even) { padding: 0; }
    .edu-item { opacity: 1; transform: none; filter: none; }
    .edu-company { font-size: 1.5rem; }
    .edu-year-mark { font-size: 2.8rem; }
}