/* Page-specific styles */

#featured-projects .card--project {
    transition: transform 160ms ease;
}

#featured-projects .card--project:hover {
    transform: translateY(-4px);
}

.filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filters .chip.active {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

.contact-meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ============== Generic Page Hero Pattern ============== */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(4rem, 6.5vh, 5.5rem) clamp(1rem, 2vw, 1.6rem) clamp(1.9rem, 3.5vw, 2.9rem);
    margin-top: clamp(.9rem, 2.2vh, 1.4rem);
    margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
    border-radius: clamp(26px, 2.4vw, 44px);
    overflow: hidden;
    box-shadow: 0 18px 52px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    border: 1px solid color-mix(in srgb, var(--accent-2) 24%, var(--border));
}

:root.light .page-hero {
    box-shadow: 0 20px 54px -32px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--accent-2) 18%);
}

.projects-page,
.skills-page,
.certs-page,
.contact-page {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--bg-soft) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 96%, transparent) 65%),
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 64%),
        radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 68%);
    opacity: .90;
    pointer-events: none;
}

.ph-inner {
    width: min(100%, 960px);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.ph-heading {
    margin: 0 0 .25rem;
    font-size: clamp(2.4rem, 2.8vw + 1.1rem, 3.3rem);
    line-height: 1.14;
    letter-spacing: .6px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    z-index: 2;
}

.ph-tagline {
    margin: 0;
    max-width: 64ch;
    font-size: clamp(1rem, .85vw + .8rem, 1.25rem);
    line-height: 1.58;
    color: color-mix(in srgb, var(--text) 88%, white);
    position: relative;
    z-index: 2;
}

.ph-filters {
    margin-top: .65rem;
    position: relative;
    z-index: 2;
}

/* ===== Enhanced Hero Aesthetic Elements ===== */
.ph-decor {
    position: absolute;
    top: 50%;
    right: -8%;
    width: clamp(180px, 32vw, 360px);
    aspect-ratio: 1/1;
    transform: translateY(-50%);
    filter: blur(60px) saturate(180%);
    opacity: .55;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 65%, transparent) 0%, transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent-2) 65%, transparent) 0%, transparent 65%);
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: phFloat 18s linear infinite alternate;
}

.ph-badges {
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    position: relative;
    z-index: 2;
}

.ph-badges li {
    font-size: .6rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    padding: .45rem .7rem .5rem;
    border-radius: 999px;
    position: relative;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 24%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 50%, var(--accent) 40%);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
}

/* --- Projects Hero specific spacing to prevent heading / tagline crowding --- */
.ph-projects .ph-inner {
    gap: 1.55rem;
}

.ph-projects .ph-heading {
    margin-bottom: .6rem;
}

.ph-projects .ph-tagline {
    margin-top: 0;
}

@media (max-width: 700px) {
    .ph-projects .ph-heading {
        font-size: clamp(2.15rem, 6.2vw + .65rem, 2.85rem);
        line-height: 1.17;
    }

    .ph-projects .ph-inner {
        gap: 1.45rem;
    }

    /* Project hero tagline: tighten size & width slightly for earlier wrap */
    .ph-projects .ph-tagline {
        font-size: clamp(.92rem, 1vw + .62rem, 1.05rem);
        line-height: 1.48;
        max-width: 54ch;
        text-wrap: balance;
    }

    /* Certifications & Contact hero tagline mobile tuning */
    .ph-certs .ph-tagline,
    .ph-contact .ph-tagline {
        font-size: clamp(.92rem, 1vw + .6rem, 1.05rem);
        line-height: 1.5;
        max-width: 54ch;
        text-wrap: balance;
    }
}

/* Mobile refinement for Skills hero */
@media (max-width: 700px) {
    .ph-skills .ph-heading {
        font-size: clamp(2.1rem, 5.8vw + .7rem, 2.75rem);
        line-height: 1.18;
        margin-bottom: .5rem;
    }

    .ph-skills .ph-tagline {
        font-size: clamp(.95rem, .9vw + .7rem, 1.05rem);
        line-height: 1.5;
        max-width: 46ch;
    }

    .ph-skills .ph-inner {
        gap: 1.4rem;
    }

    .ph-skills .ph-badges {
        gap: .5rem;
    }
}

.ph-badges li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .22), transparent 60%);
    opacity: 0;
    transition: opacity .6s;
    pointer-events: none;
}

.ph-badges li:hover::after {
    opacity: .9;
}

@keyframes phFloat {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@media (max-width: 900px) {
    .ph-decor {
        right: -18%;
        width: clamp(160px, 48vw, 300px);
        filter: blur(70px);
    }
}

@media (max-width: 720px) {
    .ph-decor {
        display: none;
    }

    .ph-badges {
        justify-content: center;
    }
}

/* Mobile adjustments */
@media (max-width: 720px) {
    .page-hero {
        padding: clamp(3.2rem, 9vw, 4.2rem) 0 clamp(1.4rem, 4vw, 2.1rem);
    }

    .ph-inner {
        text-align: center;
        align-items: center;
    }

    .ph-heading {
        font-size: clamp(2rem, 7vw, 2.6rem);
    }

    .ph-tagline {
        font-size: clamp(.95rem, 1.1vw + .7rem, 1.1rem);
    }

    .ph-filters {
        justify-content: center;
    }
}

/* Light theme slight lift */
:root.light .page-hero::before {
    opacity: .93;
}

/* ============== Projects Page ============== */
.projects-grid-wrap {
    position: relative;
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.projects-grid {
    gap: 1.6rem;
}

.projects-page .card--project {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    transition: transform .65s cubic-bezier(.25, .8, .25, 1), box-shadow .7s, border-color .55s, background .7s;
}

.projects-page .card--project::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 65%), radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 70%), linear-gradient(140deg, rgba(255, 255, 255, .06), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .35;
    transition: opacity .6s;
    pointer-events: none;
}

.projects-page .card--project:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 64px -26px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.projects-page .card--project:hover::before {
    opacity: .6;
}

.projects-page .card--project .media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.projects-page .card--project img.thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.92) saturate(115%);
    transition: transform .9s cubic-bezier(.25, .8, .25, 1), filter .85s;
}

.projects-page .card--project:hover img.thumb {
    transform: scale(1.06);
    filter: brightness(1) saturate(130%);
}

.projects-page .project-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1rem 1.2rem;
}

.projects-page .project-title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .5px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.projects-page .project-desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--text) 88%, white);
}

.projects-page .tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.projects-page .badge {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: .35rem .55rem .4rem;
    border-radius: 999px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-2) 28%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--accent) 35%);
    position: relative;
    overflow: hidden;
}

.projects-page .project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .2rem;
}

:root.light .projects-page .card--project {
    background: linear-gradient(155deg, color-mix(in srgb, #ffffff 78%, var(--accent) 22%) 0%, color-mix(in srgb, #ffffff 80%, var(--accent-2) 20%) 55%, color-mix(in srgb, #ffffff 86%, var(--accent-2) 14%) 100%);
    box-shadow: 0 18px 46px -28px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--accent) 35%);
}

/* ============== Skills Page ============== */
.skills-groups {
    display: grid;
    gap: 1.8rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.skill-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem 1rem 1.2rem;
    border-radius: 26px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
    isolation: isolate;
    transition: transform .65s cubic-bezier(.25, .8, .25, 1), box-shadow .7s, border-color .55s, background .7s;
}

.skill-group::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 68%), radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .06), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .38;
    pointer-events: none;
    transition: opacity .6s;
}

.skill-group:hover {
    /* Removed vertical lift to avoid overlapping previous section */
    transform: none;
    box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.skill-group:hover::before {
    opacity: .6;
}

.sg-title {
    margin: 0;
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    background: linear-gradient(120deg, var(--accent), var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.skill-cloud {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.skill-cloud li {
    font-size: .7rem;
    letter-spacing: .8px;
    font-weight: 600;
    padding: .45rem .65rem .5rem;
    border-radius: 999px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 24%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

:root.light .skill-group {
    background: linear-gradient(155deg, color-mix(in srgb, #ffffff 78%, var(--accent) 22%) 0%, color-mix(in srgb, #ffffff 80%, var(--accent-2) 20%) 55%, color-mix(in srgb, #ffffff 86%, var(--accent-2) 14%) 100%);
    box-shadow: 0 18px 46px -28px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--accent) 35%);
}

/* ============== Certifications Page ============== */
.certs-timeline {
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.timeline li {
    position: relative;
    padding: 1rem 1rem 1.1rem 1.9rem;
    /* increased left padding to give bullet breathing room */
    border-radius: 22px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    font-size: .9rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--text) 90%, white);
    transition: transform .6s cubic-bezier(.25, .8, .25, 1), box-shadow .65s;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 8px;
    /* shift left slightly now that text moved right */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .05);
}

.timeline li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 52px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

:root.light .timeline li {
    background: linear-gradient(155deg, color-mix(in srgb, #ffffff 84%, var(--accent) 16%), color-mix(in srgb, #ffffff 86%, var(--accent-2) 14%));
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

/* ---------- About Page: Education list should appear as plain textual bullets, not timeline cards ---------- */
.about-side .timeline {
    /* Revert card/timeline layout to a normal list */
    display: block;
    list-style: disc;
    padding-left: 1.1rem;
    margin: .25rem 0 0;
    gap: 0;
    /* gap unused when display:block */
}

.about-side .timeline li {
    background: none !important;
    padding: 0;
    margin: .35rem 0;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
    border-radius: 0;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--text);
    list-style-position: outside;
}

.about-side .timeline li::before {
    /* remove decorative dot */
    display: none;
    content: none;
}

:root.light .about-side .timeline li {
    /* Force stronger, non-blended text for readability on light gradient cards */
    color: color-mix(in srgb, var(--text) 99%, #000);
    mix-blend-mode: normal;
}

/* Extra safeguard: if parent gradients create perceived washout, allow opting into ultra strong text */
@media (prefers-contrast: more) {
    :root.light .about-side .timeline li {
        color: #0a0a0a;
    }
}

/* ============== Contact Page ============== */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2rem, 5vw, 3.2rem);
    padding-bottom: clamp(2.4rem, 5vw, 4rem);
    align-items: start;
}

.contact-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 1.4rem 1.6rem;
    border-radius: 30px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    box-shadow: 0 16px 44px -24px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
    isolation: isolate;
}

/* Light theme refinement: soften stark white + infuse subtle accent tint */
:root.light .contact-panel {
    background:
        radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 18%, #ffffff 82%) 0%, transparent 62%),
        radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--accent-2) 18%, #ffffff 82%) 0%, transparent 70%),
        linear-gradient(155deg,
            color-mix(in srgb, #ffffff 86%, var(--accent) 14%) 0%,
            color-mix(in srgb, #ffffff 90%, var(--accent-2) 10%) 65%,
            color-mix(in srgb, #ffffff 94%, var(--accent-2) 6%) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--accent-2) 38%);
    box-shadow: 0 18px 46px -26px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}

:root.light .contact-panel::before {
    opacity: .55;
}

.contact-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 68%), radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--accent-2) 28%, transparent) 0%, transparent 72%), linear-gradient(150deg, rgba(255, 255, 255, .06), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .4;
    pointer-events: none;
}

.contact-panel .form-row {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.contact-panel label {
    font-size: .75rem;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 80%, var(--accent-2) 20%);
}

.contact-panel input,
.contact-panel textarea {
    border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border));
    background: color-mix(in srgb, var(--bg-soft) 94%, transparent);
    padding: .7rem .85rem;
    border-radius: 14px;
    font: inherit;
    color: var(--text);
    resize: vertical;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    transition: border-color .45s, background .45s, box-shadow .5s;
}

.contact-panel input:focus,
.contact-panel textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.contact-panel button {
    align-self: flex-start;
    margin-top: .3rem;
}

.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.contact-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem 1rem;
    border-radius: 22px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    text-decoration: none;
    color: color-mix(in srgb, var(--text) 90%, white);
    font-size: .85rem;
    line-height: 1.4;
    overflow: hidden;
    isolation: isolate;
    transition: transform .6s cubic-bezier(.25, .8, .25, 1), box-shadow .65s, background .6s;
}

:root.light .contact-card {
    background:
        radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent) 16%, #ffffff 84%) 0%, transparent 60%),
        radial-gradient(circle at 80% 76%, color-mix(in srgb, var(--accent-2) 16%, #ffffff 84%) 0%, transparent 65%),
        linear-gradient(150deg,
            color-mix(in srgb, #ffffff 87%, var(--accent) 13%) 0%,
            color-mix(in srgb, #ffffff 91%, var(--accent-2) 9%) 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--accent-2) 36%);
    box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .65) inset;
    color: color-mix(in srgb, var(--text) 94%, #000);
}

:root.light .contact-card::before {
    opacity: .52;
}

/* Inputs: slight tint & clearer border in light mode */
:root.light .contact-panel input,
:root.light .contact-panel textarea {
    background: linear-gradient(145deg, color-mix(in srgb, #ffffff 90%, var(--accent) 10%), color-mix(in srgb, #ffffff 93%, var(--accent-2) 7%));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--accent-2) 32%);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .65) inset;
}

:root.light .contact-panel input:focus,
:root.light .contact-panel textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--accent-2) 45%);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .7) inset;
}

.contact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 65%), radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 70%);
    mix-blend-mode: overlay;
    opacity: .42;
    pointer-events: none;
    transition: opacity .6s;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 52px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.contact-card:hover::before {
    opacity: .7;
}

.cc-label {
    font-size: .6rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent-2) 70%, var(--text));
}

.cc-value {
    font-size: .9rem;
    font-weight: 500;
}

@media (max-width: 920px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-aside {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        flex: 1;
    }
}

@media (max-width: 560px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .skills-groups {
        grid-template-columns: 1fr;
    }
}

/* ================= About Page Redesign ================= */
.about-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(2rem, 4vw, 3.2rem);
    align-items: center;
    margin-bottom: clamp(2.6rem, 6vw, 4rem);
    position: relative;
}

.ah-media {
    position: relative;
    width: min(320px, 70%);
    aspect-ratio: 1/1;
    border-radius: 34px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-2) 32%, transparent));
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    box-shadow: 0 18px 46px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    overflow: hidden;
}

.ah-media__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .8;
    pointer-events: none;
}

.ah-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
    filter: brightness(.95) saturate(110%);
    transition: transform .9s cubic-bezier(.25, .8, .25, 1), filter .8s ease;
}

.ah-media:hover img {
    transform: scale(1.04);
    filter: brightness(1) saturate(125%);
}

.ah-heading {
    font-size: clamp(2.2rem, 2.4vw + 1.2rem, 3.1rem);
    line-height: 1.15;
    margin: 0 0 .65rem;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: .75px;
}

.ah-tagline {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;
    max-width: 58ch;
    margin: 0 0 1.4rem;
    color: color-mix(in srgb, var(--text) 90%, white);
    text-wrap: balance;
}

.ah-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem clamp(.9rem, 1.4rem, 1.6rem);
    padding: 0;
    margin: 0 0 1.6rem;
}

.ah-stats li {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: .75rem 1.1rem .8rem;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-2) 30%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    min-width: 120px;
    position: relative;
    overflow: hidden;
}

.ah-stats li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 60%);
    opacity: 0;
    transition: opacity .6s;
}

.ah-stats li:hover::after {
    opacity: 1;
}

.ah-stat__value {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .5px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ah-stat__label {
    font-size: .65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent-2) 70%, var(--text));
    margin-top: .25rem;
}

.ah-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* Body layout */
.about-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}

/* Ensure sidebar cards have spacing and no overlap */
.about-side {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    position: relative;
}

.about-side__card {
    position: relative;
    z-index: 0;
}

.about-side__card:hover {
    z-index: 1;
}

@media (max-width: 920px) {
    .about-body {
        grid-template-columns: 1fr;
    }

    .about-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.4rem;
    }
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.about-block {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.about-subheading {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-block p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--text) 94%, white);
}

.about-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.about-feature {
    position: relative;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .98rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text) 90%, white);
    padding: .4rem .55rem .4rem .55rem;
    border-radius: 12px;
    transition: background .6s, transform .55s cubic-bezier(.25, .8, .25, 1), color .5s;
}

.about-feature::before,
.about-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.about-feature::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
    transform: scaleX(.25);
    transform-origin: left;
    transition: transform .7s cubic-bezier(.25, .8, .25, 1), opacity .55s ease;
}

.about-feature::after {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: overlay;
    transform: translateX(-120%);
    transition: transform 1s cubic-bezier(.25, .8, .25, 1), opacity .6s ease;
}

.about-feature:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.about-feature:hover::after {
    opacity: .9;
    transform: translateX(120%);
}

.about-feature:hover {
    transform: translateX(4px);
    color: color-mix(in srgb, var(--text) 96%, white);
}

.about-feature__icon {
    width: 14px;
    height: 14px;
    margin-top: .38em;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
}

.about-side__card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    overflow: hidden;
}

/* Light theme: tint sidebar cards so they aren't flat white */
:root.light .about-side__card {
    background: linear-gradient(145deg,
            color-mix(in srgb, #ffffff 88%, var(--accent) 12%) 0%,
            color-mix(in srgb, #ffffff 90%, var(--accent-2) 10%) 100%);
    border: 1px solid color-mix(in srgb, var(--accent-2) 45%, var(--border));
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .about-side__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%),
        radial-gradient(circle at 78% 80%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, transparent 68%);
    opacity: .55;
    pointer-events: none;
}

/* Light theme tweaks */
:root.light .ah-tagline {
    color: color-mix(in srgb, var(--text) 88%, #000);
}

:root.light .about-block p {
    color: color-mix(in srgb, var(--text) 90%, #000);
}

:root.light .about-feature {
    color: color-mix(in srgb, var(--text) 85%, #000);
}

:root.light .ah-stats li {
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .about-feature__icon {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 45%, transparent));
}

@media (prefers-reduced-motion: reduce) {

    .ah-media img,
    .about-feature,
    .about-feature::before,
    .about-feature::after {
        transition: none !important;
        animation: none !important;
    }

    .about-feature:hover {
        transform: none;
    }
}

/* ================= Mobile Refinements (About) ================= */
@media (max-width: 680px) {
    .about-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .ah-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ah-media {
        margin: 0 auto;
        width: clamp(180px, 55vw, 260px);
        padding: 8px;
        border-radius: 28px;
    }

    .ah-media img {
        border-radius: 22px;
    }

    .ah-heading {
        font-size: clamp(2rem, 8vw, 2.4rem);
    }

    .ah-tagline {
        font-size: 1.05rem;
        margin-bottom: 1.1rem;
    }

    .ah-stats {
        justify-content: center;
        gap: .75rem;
    }

    .ah-stats li {
        min-width: 108px;
        padding: .65rem .85rem .7rem;
    }

    .ah-stat__value {
        font-size: 1.15rem;
    }

    .ah-actions {
        width: 100%;
    }

    .ah-actions .btn {
        flex: 1 1 auto;
        min-width: 140px;
    }

    .about-body {
        gap: 2.2rem;
    }

    .about-content {
        gap: 1.9rem;
    }

    .about-block p {
        font-size: 1rem;
    }

    .about-side {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    .ah-actions {
        flex-direction: column;
    }

    .ah-actions .btn {
        width: 100%;
    }

    .ah-stats li {
        min-width: 100px;
    }

    .about-block {
        gap: .65rem;
    }
}

/* Finer mobile scaling for page heroes (all variants) */
@media (max-width: 520px) {
    .page-hero {
        padding: clamp(2.6rem, 9vw, 3.2rem) 0 clamp(1.15rem, 5vw, 1.8rem);
    }

    .ph-heading {
        font-size: clamp(1.9rem, 8vw, 2.4rem);
        line-height: 1.15;
        letter-spacing: .5px;
    }

    .ph-tagline {
        font-size: clamp(.9rem, 1vw + .6rem, 1rem);
        line-height: 1.5;
        max-width: 52ch;
    }

    .ph-badges {
        gap: .45rem;
    }

    .ph-badges li {
        font-size: .55rem;
        padding: .4rem .6rem .45rem;
        letter-spacing: 1px;
    }

    /* Further tighten project tagline on very small devices */
    .ph-projects .ph-tagline {
        font-size: clamp(.88rem, 1.2vw + .55rem, .98rem);
        max-width: 50ch;
        line-height: 1.48;
    }

    /* Further tighten cert/contact taglines */
    .ph-certs .ph-tagline,
    .ph-contact .ph-tagline {
        font-size: clamp(.88rem, 1.2vw + .55rem, .98rem);
        max-width: 50ch;
        line-height: 1.48;
    }
}

@media (max-width: 420px) {
    .ph-heading {
        font-size: clamp(1.78rem, 8.6vw, 2.18rem);
    }

    .ph-tagline {
        font-size: .9rem;
    }
}

@media (max-width: 360px) {
    .ph-heading {
        font-size: clamp(1.65rem, 9vw, 2rem);
    }

    .ph-tagline {
        font-size: .88rem;
        line-height: 1.48;
    }
}

/* About hero extra small refinements */
@media (max-width: 520px) {
    .ah-heading {
        font-size: clamp(1.9rem, 8.2vw, 2.3rem);
    }

    .ah-tagline {
        font-size: 1rem;
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .ah-heading {
        font-size: clamp(1.75rem, 9vw, 2.1rem);
    }

    .ah-tagline {
        font-size: .95rem;
    }
}