@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --brand-ink: #0f172a;
    --brand-soft: #334155;
    --brand-accent: #2563eb;
    --hero-ring-start: #2563eb;
    --hero-ring-mid: #a855f7;
    --hero-ring-end: #06b6d4;
    --hero-name-color: #1e3a8a;
    --hero-image-max-size: 260px;
    --brand-glass: rgba(255, 255, 255, 0.78);
    --brand-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --brand-shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.16);
    --brand-radius: 1.1rem;
    --depth-glow-a: rgba(37, 99, 235, 0.12);
    --depth-glow-b: rgba(245, 158, 11, 0.1);
    --depth-glow-c: rgba(16, 185, 129, 0.08);
    --hero-title-gradient-colors:
        #0f766e,
        #1d4ed8,
        #b45309,
        #7c3aed,
        #be123c,
        #0369a1,
        #b45309,
        #1d4ed8,
        #0f766e;
    --project-title-gradient: linear-gradient(100deg, #0f766e 0%, #1d4ed8 42%, #7c3aed 100%);
    --project-title-fallback: #1e3a8a;
    --project-title-icon: #1e40af;
    --project-link-repo: #475569;
    --project-link-repo-hover: #0f172a;
    --project-link-live: #1d4ed8;
    --project-link-live-hover: #1e3a8a;
    --project-link-icon-bg: rgba(37, 99, 235, 0.12);
    --project-link-icon-border: rgba(37, 99, 235, 0.28);
    --project-notch-bg-color: rgba(248, 250, 252, 0.97);
    --project-notch-text-color: #1e40af;
    --project-notch-shadow-a: rgba(148, 163, 184, 0.48);
    --project-notch-shadow-b: rgba(148, 163, 184, 0.2);
    --page-gradient:
        radial-gradient(1200px 650px at -5% -10%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 60%),
        radial-gradient(900px 520px at 105% -5%, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0) 56%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100%);
}

body {
    position: relative;
    isolation: isolate;
    background-image: var(--page-gradient);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-color .2s ease, color .2s ease, background-image .25s ease;
}

.page-shell {
    position: relative;
    z-index: 2;
}

.theme-backdrop-circle {
    position: fixed;
    width: 220vmax;
    height: 220vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center;
    transition: transform 1000ms ease-out;
    pointer-events: none;
    z-index: 1;
}

.theme-backdrop-circle.active {
    transform: translate(-50%, -50%) scale(1);
}

.theme-backdrop-circle.to-light {
    background:
        radial-gradient(1200px 650px at -5% -10%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 60%),
        radial-gradient(900px 520px at 105% -5%, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0) 56%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100%);
}

.theme-backdrop-circle.to-dark {
    background:
        radial-gradient(1200px 650px at -5% -10%, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0) 60%),
        radial-gradient(900px 520px at 105% -5%, rgba(217, 119, 6, 0.24) 0%, rgba(217, 119, 6, 0) 56%),
        linear-gradient(180deg, #020617 0%, #0b1220 50%, #111827 100%);
}

main.container.py-5 {
    position: relative;
    z-index: 0;
    border-radius: calc(var(--brand-radius) + 0.4rem);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

main.container.py-5::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(500px 180px at 86% -12%, var(--depth-glow-a) 0%, rgba(37, 99, 235, 0) 72%),
        radial-gradient(420px 170px at -8% 112%, var(--depth-glow-b) 0%, rgba(245, 158, 11, 0) 72%);
}

#tech-stack,
#work-experiences,
#my-projects,
#contact-me {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

#tech-stack>.container,
#work-experiences>.container,
#my-projects>.container,
#contact-me>.container {
    position: relative;
    z-index: 1;
}

#tech-stack::before,
#work-experiences::before,
#my-projects::before,
#contact-me::before,
#tech-stack::after,
#work-experiences::after,
#my-projects::after,
#contact-me::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 999px;
    filter: blur(1px);
    will-change: transform;
}

#tech-stack::before,
#work-experiences::before,
#my-projects::before,
#contact-me::before {
    width: clamp(260px, 34vw, 520px);
    height: clamp(260px, 34vw, 520px);
    top: -18%;
    right: -10%;
    background: radial-gradient(circle, var(--depth-glow-a) 0%, rgba(37, 99, 235, 0) 70%);
    transform: translate3d(var(--depth-shift-x, 0px), var(--depth-shift-y, 0px), 0);
}

#tech-stack::after,
#work-experiences::after,
#my-projects::after,
#contact-me::after {
    width: clamp(220px, 30vw, 460px);
    height: clamp(220px, 30vw, 460px);
    bottom: -20%;
    left: -10%;
    background: radial-gradient(circle, var(--depth-glow-b) 0%, rgba(245, 158, 11, 0) 72%);
    transform: translate3d(calc(var(--depth-shift-x, 0px) * -0.65), calc(var(--depth-shift-y, 0px) * -0.65), 0);
}

#my-projects::before {
    background: radial-gradient(circle, var(--depth-glow-c) 0%, rgba(16, 185, 129, 0) 70%);
}

#my-projects .project-media-mask {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --project-notch-size: clamp(54px, 14%, 74px);
    --project-notch-curve: clamp(24px, 6%, 34px);
    --project-notch-expand: min(46%, 190px);
}

#my-projects .project-media-mask .project-media-notch {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--project-notch-size);
    height: calc(var(--project-notch-size) * 0.7);
    border-top-left-radius: 0.95rem;
    background: var(--project-notch-bg-color);
    box-shadow:
        -1px -1px 0 var(--project-notch-shadow-a),
        0 0 0 1px var(--project-notch-shadow-b);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: clamp(0.85rem, 1.6vw, 1.1rem);
    pointer-events: none;
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#my-projects .project-media-mask .project-media-notch::before,
#my-projects .project-media-mask .project-media-notch::after {
    content: "";
    position: absolute;
    width: var(--project-notch-curve);
    aspect-ratio: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#my-projects .project-media-mask .project-media-notch::before {
    left: calc(var(--project-notch-curve) * -1);
    bottom: 0;
    background-image: radial-gradient(
        circle var(--project-notch-curve) at top left,
        transparent 97%,
        var(--project-notch-bg-color) 100%
    );
}

#my-projects .project-media-mask .project-media-notch::after {
    top: calc(var(--project-notch-curve) * -1);
    right: 0;
    background-image: radial-gradient(
        circle var(--project-notch-curve) at top left,
        transparent 97%,
        var(--project-notch-bg-color) 100%
    );
}

#my-projects .project-media-mask .project-media-notch .project-media-notch-label {
    color: var(--project-notch-text-color);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    width: 1.6ch;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#my-projects .project-media-mask:hover .project-media-notch {
    width: var(--project-notch-expand);
}

#my-projects .project-media-mask:hover .project-media-notch .project-media-notch-label {
    width: calc(100% - clamp(1.05rem, 1.8vw, 1.3rem));
}

#my-projects .project-media-mask .project-media-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1);
    transition: transform 420ms ease;
}

#my-projects .project-media-mask video {
    transform: scale(1);
    transition: transform 420ms ease;
}

#my-projects .project-media-mask:hover .project-media-bg {
    transform: scale(1.08);
}

#my-projects .project-media-mask:hover video {
    transform: scale(1.08);
}

#work-experiences .experience-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

#work-experiences .experience-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#work-experiences .experience-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
    background:
        linear-gradient(
            115deg,
            rgba(37, 99, 235, 0.06) 0%,
            rgba(37, 99, 235, 0) 42%,
            rgba(14, 165, 233, 0.2) 52%,
            rgba(37, 99, 235, 0) 62%,
            rgba(245, 158, 11, 0.08) 100%
        );
    background-size: 230% 230%;
    background-position: 100% 100%;
    opacity: 0.45;
    transition:
        background-position 620ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 280ms ease;
}

#work-experiences .experience-card:hover::before {
    background-position: 0% 0%;
    opacity: 0.78;
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
    line-height: 1.25;
    color: var(--project-title-icon);
    text-decoration: none;
    position: relative;
    padding-right: 2.4rem;
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]>span {
    background-image: var(--project-title-gradient);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: filter 220ms ease, transform 220ms ease;
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]:hover>span {
    filter: brightness(1.08) saturate(1.08);
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]::before {
    content: "";
    position: absolute;
    right: 0.62rem;
    top: 50%;
    width: 0.52rem;
    height: 0.52rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-62%) rotate(45deg);
    transition: transform 220ms ease;
    z-index: 1;
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.03));
    border: 1px solid rgba(37, 99, 235, 0.28);
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"][aria-expanded="true"]::before {
    transform: translateY(-40%) rotate(-135deg);
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.06));
    border-color: rgba(37, 99, 235, 0.42);
}

#my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-accent) 55%, white);
    outline-offset: 4px;
    border-radius: 0.35rem;
}

#my-projects .portfolio-card .d-flex.small a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--project-link-repo);
    font-weight: 600;
    transition: color 180ms ease, transform 180ms ease;
}

#my-projects .portfolio-card .d-flex.small a .bi {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--project-link-icon-bg);
    border: 1px solid var(--project-link-icon-border);
    font-size: 0.78rem;
}

#my-projects .portfolio-card .d-flex.small a .bi-github {
    color: var(--project-link-repo);
}

#my-projects .portfolio-card .d-flex.small a .bi-box-arrow-up-right {
    color: var(--project-link-live);
}

#my-projects .portfolio-card .d-flex.small a[href*="github.com"] {
    color: var(--project-link-repo);
}

#my-projects .portfolio-card .d-flex.small a[href*="github.com"]:hover {
    color: var(--project-link-repo-hover);
}

#my-projects .portfolio-card .d-flex.small a:not([href*="github.com"]) {
    color: var(--project-link-live);
}

#my-projects .portfolio-card .d-flex.small a:not([href*="github.com"]):hover {
    color: var(--project-link-live-hover);
}

#my-projects .portfolio-card .d-flex.small a:hover {
    transform: translateY(-1px);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    #my-projects .portfolio-card h3>button[data-bs-toggle="collapse"]>span {
        color: var(--project-title-fallback);
    }
}

@media (hover: none) {
    #my-projects .project-media-mask .project-media-bg {
        transform: none;
    }

    #my-projects .project-media-mask video {
        transform: none;
    }

    #work-experiences .experience-card::before {
        background-position: 0% 0%;
        opacity: 0.6;
    }
}

.section-title {
    font-family: "Libre Baskerville", serif;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

.navbar-smart {
    background: var(--brand-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.theme-toggle-btn {
    width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-nav .nav-link {
    position: relative;
    font-weight: 600;
    color: var(--brand-ink);
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.2rem;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-nav .nav-link.active {
    color: var(--brand-accent);
}

.btn-talk {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: transparent;
    color: #fff;
}

.btn-talk:hover {
    color: #fff;
    transform: translateY(-1px);
}

.btn-cv {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    color: #111827;
}

.btn-cv:hover {
    color: #111827;
    transform: translateY(-1px);
}

.hero-profile-image {
    width: min(100%, var(--hero-image-max-size));
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 3px solid rgba(226, 232, 240, 0.92);
    transition: transform 0.3s ease;
}

.hero-image-ring {
    position: relative;
    width: min(100%, var(--hero-image-max-size));
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    isolation: isolate;
}

.hero-image-ring::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    z-index: -1;
    background-image: conic-gradient(
        var(--hero-ring-start),
        var(--hero-ring-mid),
        var(--hero-ring-end),
        var(--hero-ring-start)
    );
    animation: hero-ring-spin 3s linear infinite;
}

.hero-profile-image:hover {
    transform: scale(1.06);
}

.font-brand {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.font-name {
    font-family: "Libre Baskerville", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.hero-name {
    color: var(--hero-name-color);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero-title-gradient {
    background-image: linear-gradient(to right, var(--hero-title-gradient-colors));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200%;
    animation: hero-title-gradient-shift 2s steps(5) infinite;
}

@keyframes hero-title-gradient-shift {
    to {
        background-position: 200%;
    }
}

.hero-meta {
    color: #475569;
}

.tech-stack-section {
    scroll-margin-top: 90px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0%, rgba(15, 23, 42, 0) 100%);
}

.tech-carousel-track {
    width: min(100%, 1100px);
    position: relative;
    isolation: isolate;
}

.tech-carousel-track::before,
.tech-carousel-track::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 2;
    pointer-events: none;
}

.tech-carousel-track::before {
    left: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0) 100%);
}

.tech-carousel-track::after {
    right: 0;
    background: linear-gradient(270deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0) 100%);
}

.tech-carousel-group {
    animation: tech-slide 16s linear infinite;
}

.tech-carousel-track:hover .tech-carousel-group {
    animation-play-state: paused;
}

.tech-icon-card {
    width: 7.2rem;
    border-radius: 0.95rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.tech-icon-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(241, 245, 249, 0.92);
}

.portfolio-card,
.experience-card,
.contact-form-card {
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.portfolio-card:hover,
.experience-card:hover,
.contact-form-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: var(--brand-shadow-hover);
}

.contact-form-card {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.45) 0%, rgba(248, 250, 252, 0) 100%);
}

.contact-form-card .form-control {
    border-radius: 0.8rem;
    border-color: rgba(148, 163, 184, 0.4);
}

.contact-form-card .form-control:focus {
    border-color: rgba(37, 99, 235, 0.65);
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.2);
}

.btn-contact-submit {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: #f8fafc;
    border: 0;
}

.btn-contact-submit:hover {
    color: #f8fafc;
    transform: translateY(-1px);
}

@property --footer-ring-fill {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

.footer-social-link {
    --footer-ring-fill: 0%;
    --footer-ring-color: #64748b;
    --footer-icon-idle: #64748b;
    --footer-icon-active: #0f172a;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.footer-social-link i {
    color: var(--footer-icon-idle);
    transition: color 180ms ease;
}

.footer-social-link::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from -90deg,
        var(--footer-ring-color) var(--footer-ring-fill),
        transparent 0
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
    transition: --footer-ring-fill 650ms linear;
    pointer-events: none;
}

.footer-social-link:hover {
    --footer-ring-fill: 100%;
}

.footer-social-link:hover i {
    color: var(--footer-icon-active);
    transition-delay: 650ms;
}

.footer-social-link:not(:hover) i {
    transition-delay: 0s;
}

.footer-social-link--github {
    --footer-ring-color: #2563eb;
    --footer-icon-active: #2563eb;
}

.footer-social-link--youtube {
    --footer-ring-color: #dc2626;
    --footer-icon-active: #dc2626;
}

[data-bs-theme="dark"] .navbar-smart {
    background: rgba(15, 23, 42, 0.78);
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

[data-bs-theme="dark"] {
    --depth-glow-a: rgba(96, 165, 250, 0.2);
    --depth-glow-b: rgba(251, 191, 36, 0.16);
    --depth-glow-c: rgba(52, 211, 153, 0.14);
    --hero-ring-start: #60a5fa;
    --hero-ring-mid: #c084fc;
    --hero-ring-end: #22d3ee;
    --hero-name-color: #bfdbfe;
    --hero-title-gradient-colors:
        #22c55e,
        #38bdf8,
        #fde047,
        #a78bfa,
        #fda4af,
        #facc15,
        #60a5fa,
        #34d399,
        #22c55e;
    --project-title-gradient: linear-gradient(100deg, #67e8f9 0%, #93c5fd 45%, #c4b5fd 100%);
    --project-title-fallback: #bfdbfe;
    --project-title-icon: #bfdbfe;
    --project-link-repo: #cbd5e1;
    --project-link-repo-hover: #f1f5f9;
    --project-link-live: #93c5fd;
    --project-link-live-hover: #bfdbfe;
    --project-link-icon-bg: rgba(148, 163, 184, 0.16);
    --project-link-icon-border: rgba(148, 163, 184, 0.34);
    --project-notch-bg-color: rgba(15, 23, 42, 0.96);
    --project-notch-text-color: #bfdbfe;
    --project-notch-shadow-a: rgba(148, 163, 184, 0.34);
    --project-notch-shadow-b: rgba(148, 163, 184, 0.22);
    --page-gradient:
        radial-gradient(1200px 650px at -5% -10%, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0) 60%),
        radial-gradient(900px 520px at 105% -5%, rgba(217, 119, 6, 0.24) 0%, rgba(217, 119, 6, 0) 56%),
        linear-gradient(180deg, #020617 0%, #0b1220 50%, #111827 100%);
}

[data-bs-theme="dark"] main.container.py-5 {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.15) 100%);
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.42);
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active {
    color: #93c5fd;
}

[data-bs-theme="dark"] .hero-title {
    color: #93c5fd;
}

[data-bs-theme="dark"] .hero-profile-image {
    border-color: rgba(15, 23, 42, 0.92);
}

[data-bs-theme="dark"] .hero-meta {
    color: #94a3b8;
}

[data-bs-theme="dark"] .contact-form-card {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.38) 0%, rgba(30, 41, 59, 0) 100%);
}

[data-bs-theme="dark"] .tech-icon-label {
    color: rgba(226, 232, 240, 0.95);
}

[data-bs-theme="dark"] .footer-social-link {
    --footer-icon-idle: #cbd5e1;
    background: rgba(148, 163, 184, 0.2);
}

@media (max-width: 991.98px) {
    .navbar-smart .container {
        row-gap: 0.75rem;
    }

    .navbar-smart .navbar-collapse {
        margin-top: 0.6rem;
        padding: 0.9rem;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 1rem;
        background: rgba(248, 250, 252, 0.92);
    }

    [data-bs-theme="dark"] .navbar-smart .navbar-collapse {
        background: rgba(15, 23, 42, 0.92);
        border-color: rgba(148, 163, 184, 0.25);
    }

    .navbar-smart .navbar-nav {
        gap: 0.3rem;
        margin-bottom: 0.65rem !important;
    }

    .navbar-smart .nav-link {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .navbar-smart .nav-link::after {
        left: 0.4rem;
        right: 0.4rem;
    }

    .navbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .navbar-actions .btn-talk,
    .navbar-actions .btn-cv {
        flex: 1 1 180px;
        text-align: center;
    }
}

@media (min-width: 992px) {
    body {
        background-attachment: fixed;
    }
}

@media (max-width: 767.98px) {
    .theme-backdrop-circle {
        width: 260vmax;
        height: 260vmax;
    }

    main.container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        border-radius: 0.95rem;
    }

    .hero-image-ring {
        width: min(72vw, 220px);
    }

    .hero-title {
        font-size: 1.35rem;
    }

    .tech-carousel-track::before,
    .tech-carousel-track::after {
        width: 36px;
    }

    #tech-stack::before,
    #work-experiences::before,
    #my-projects::before,
    #contact-me::before,
    #tech-stack::after,
    #work-experiences::after,
    #my-projects::after,
    #contact-me::after {
        opacity: 0.7;
    }

    .experience-card,
    .portfolio-card,
    .contact-form-card {
        border-radius: 0.9rem;
    }

    .experience-card {
        padding: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .section-title {
        font-size: 1.42rem;
    }

    .hero-meta {
        font-size: 0.95rem;
    }

    #my-projects .portfolio-card,
    #contact-me form.contact-form-card {
        padding: 0.95rem !important;
    }

    #my-projects .small,
    #work-experiences .text-secondary {
        font-size: 0.9rem !important;
    }

    .navbar-actions .btn-talk,
    .navbar-actions .btn-cv,
    .navbar-actions .theme-toggle-btn {
        width: 100%;
    }

    .tech-icon-card {
        width: 6.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .tech-carousel-group {
        animation: none;
    }

    .hero-profile-image:hover,
    .portfolio-card:hover,
    .experience-card:hover,
    .contact-form-card:hover,
    .btn-talk:hover,
    .btn-cv:hover,
    .btn-contact-submit:hover {
        transform: none;
    }

    .hero-image-ring::before {
        animation: none;
    }

    .footer-social-link:hover i {
        transition-delay: 0s;
    }
}

@keyframes tech-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes hero-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Scroll Reveal Trigger */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.985);
    filter: blur(6px);
    transition:
        opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 760ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.scroll-reveal--left {
    transform: translate3d(-22px, 14px, 0) scale(0.985);
}

.scroll-reveal--right {
    transform: translate3d(22px, 14px, 0) scale(0.985);
}

.scroll-reveal--up {
    transform: translate3d(0, 26px, 0) scale(0.985);
}

.scroll-reveal--soft {
    transform: translate3d(0, 14px, 0) scale(0.992);
    filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}