:root {
    --brand: #7c5cff;
    --brand-2: #00d4ff;
    --surface: rgba(255, 255, 255, 0.055);
    --surface-strong: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.11);
    --muted: #9fa8ba;
    --page: #070b14;
    --page-2: #0b1120;
}

[data-bs-theme="light"] {
    --page: #f7f8fc;
    --page-2: #ffffff;
    --surface: rgba(12, 19, 34, 0.045);
    --surface-strong: rgba(12, 19, 34, 0.07);
    --border: rgba(12, 19, 34, 0.10);
    --muted: #667085;
}

html { scroll-behavior: smooth; }
body {
    background: var(--page);
    color: var(--bs-body-color);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.page-glow { position: fixed; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; z-index: -1; }
.page-glow-one { background: var(--brand); top: -14rem; right: -12rem; }
.page-glow-two { background: var(--brand-2); bottom: -18rem; left: -14rem; opacity: .09; }

/* Animated header */
.portfolio-nav {
    position: fixed;
    overflow: hidden;
    isolation: isolate;
    background: rgba(7, 11, 20, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
[data-bs-theme="light"] .portfolio-nav { background: rgba(247, 248, 252, .8); }
.portfolio-nav.scrolled { border-color: var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.portfolio-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgba(124,92,255,.09) 43%, rgba(0,212,255,.09) 52%, transparent 68%);
    transform: translateX(-120%);
    animation: navSweep 9s ease-in-out infinite;
}
.nav-ambient { position: absolute; width: 160px; height: 70px; border-radius: 50%; filter: blur(42px); opacity: .13; pointer-events: none; z-index: -1; }
.nav-ambient-one { background: var(--brand); top: -40px; left: 12%; animation: navFloatOne 8s ease-in-out infinite alternate; }
.nav-ambient-two { background: var(--brand-2); top: -42px; right: 16%; animation: navFloatTwo 10s ease-in-out infinite alternate; }
.nav-progress { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 0 14px rgba(0,212,255,.42); transition: width .08s linear; }
.navbar-brand { position: relative; color: var(--bs-body-color); letter-spacing: -.02em; }
.navbar-brand:hover { color: var(--bs-body-color); }
.brand-mark {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 8px 26px rgba(0,212,255,.16);
    transform: rotate(-4deg);
    animation: brandFloat 4.8s ease-in-out infinite;
}
.brand-mark::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 72px;
    top: -17px;
    left: -30px;
    background: rgba(255,255,255,.5);
    filter: blur(4px);
    transform: rotate(25deg);
    animation: brandShine 5.2s ease-in-out infinite;
}
.brand-mark span { color: #fff; font-size: .74rem; font-weight: 900; letter-spacing: -.04em; }
.brand-label { transition: transform .25s ease, letter-spacing .25s ease; }
.navbar-brand:hover .brand-label { transform: translateX(2px); letter-spacing: .01em; }
.nav-link { position: relative; color: var(--muted); font-weight: 600; transition: color .25s ease; }
.nav-link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .22rem; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin: center; transition: transform .28s ease; }
.nav-link:hover, .nav-link.active { color: var(--bs-body-color); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.theme-toggle { border: 1px solid var(--border); color: var(--bs-body-color); border-radius: 12px; width: 42px; height: 42px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.theme-toggle:hover { transform: rotate(10deg) translateY(-1px); border-color: rgba(0,212,255,.35); box-shadow: 0 8px 22px rgba(0,212,255,.10); }
@keyframes navSweep { 0%, 58% { transform: translateX(-120%); } 76%, 100% { transform: translateX(120%); } }
@keyframes navFloatOne { to { transform: translateX(85px) scale(1.08); } }
@keyframes navFloatTwo { to { transform: translateX(-75px) scale(.92); } }
@keyframes brandFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(0deg); } }
@keyframes brandShine { 0%, 66% { left: -30px; opacity: 0; } 72% { opacity: .85; } 88%, 100% { left: 58px; opacity: 0; } }

.hero-section { padding-top: 5.5rem; }
.eyebrow, .section-kicker { color: var(--brand-2); font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.hero-title { letter-spacing: -.045em; line-height: .95; margin-top: .85rem; }
.hero-role { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 650; margin-top: 1.35rem; }
.hero-role span:first-child { background: linear-gradient(90deg, var(--brand-2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.typed-cursor { color: var(--brand-2); animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-copy, .section-copy { color: var(--muted) !important; max-width: 760px; line-height: 1.85; }
.btn-primary { background: linear-gradient(135deg, var(--brand), #6542f5); border: 0; box-shadow: 0 12px 30px rgba(124,92,255,.25); }
.btn-primary:hover { transform: translateY(-2px); }
.btn { border-radius: 14px; font-weight: 700; transition: .25s ease; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--muted); font-size: .93rem; }
.hero-meta i { color: var(--brand-2); margin-right: .4rem; }

.profile-card { position: relative; padding: 2rem; border: 1px solid var(--border); border-radius: 32px; background: linear-gradient(160deg, var(--surface-strong), var(--surface)); min-height: 430px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.18); }
.profile-orbit { position: absolute; width: 330px; height: 330px; border: 1px solid var(--border); border-radius: 50%; top: 18px; right: -40px; box-shadow: 0 0 0 48px rgba(124,92,255,.03), 0 0 0 96px rgba(0,212,255,.02); }
.profile-mark { position: relative; z-index: 1; width: 170px; height: 170px; margin: 0 auto; display: grid; place-items: center; border-radius: 36px; font-size: 3.3rem; font-weight: 900; letter-spacing: -.07em; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); transform: rotate(-4deg); box-shadow: 0 24px 65px rgba(0,212,255,.18); }
.profile-status { position: relative; z-index: 1; margin: 2rem auto 0; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; background: var(--surface); }
.profile-status span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2bd576; box-shadow: 0 0 0 5px rgba(43,213,118,.12); margin-right: .5rem; }
.profile-stats { position: relative; z-index: 1; }
.stat-box { padding: 1rem; border: 1px solid var(--border); background: var(--surface); border-radius: 18px; height: 100%; }
.stat-box strong, .stat-box span { display: block; }
.stat-box strong { font-size: 1.25rem; }
.stat-box span { color: var(--muted); font-size: .78rem; margin-top: .2rem; }

.section-padding { padding: 7rem 0; }
.section-surface { background: linear-gradient(180deg, transparent, var(--surface), transparent); }
.section-heading { max-width: 760px; }
.section-title { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; margin-top: .8rem; }
.info-card, .skill-card, .service-card, .experience-card { border: 1px solid var(--border); background: var(--surface); border-radius: 22px; }
.info-card { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.2rem; }
.info-card i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--brand-2); background: rgba(0,212,255,.08); }
.info-card small, .info-card strong { display: block; }
.info-card small { color: var(--muted); }

.skill-card { padding: 1.5rem; transition: .25s ease; }
.skill-card:hover, .service-card:hover { transform: translateY(-6px); border-color: rgba(124,92,255,.35); }
.skill-card h3, .service-card h3, .experience-card h3 { font-size: 1.15rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.skill-tags span { padding: .45rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: .82rem; background: rgba(255,255,255,.025); }

.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: .38rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(var(--brand-2), var(--brand)); opacity: .45; }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-dot { position: absolute; left: -2rem; top: 1.8rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 7px rgba(0,212,255,.10); }
.experience-card { padding: 1.7rem; }
.experience-card .company { color: var(--brand-2); font-weight: 700; }
.experience-card ul { margin: 1rem 0 0; color: var(--muted); line-height: 1.75; padding-left: 1.2rem; }
.experience-card li + li { margin-top: .45rem; }
.period-badge { align-self: flex-start; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .82rem; white-space: nowrap; }

.service-card { padding: 1.6rem; transition: .25s ease; }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(0,212,255,.12)); color: var(--brand-2); font-size: 1.35rem; margin-bottom: 1.2rem; }
.service-card p { color: var(--muted); line-height: 1.7; margin-bottom: 0; }

.contact-panel { padding: clamp(1.6rem, 5vw, 3.5rem); border: 1px solid var(--border); border-radius: 32px; background: radial-gradient(circle at top right, rgba(124,92,255,.15), transparent 36%), var(--surface); }
.contact-actions { display: grid; gap: .8rem; }
.contact-link { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--bs-body-color); background: rgba(255,255,255,.025); }
.contact-link:hover { border-color: rgba(0,212,255,.35); }
.contact-link i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,212,255,.08); color: var(--brand-2); }
.contact-link small, .contact-link span { display: block; }
.contact-link small { color: var(--muted); font-size: .75rem; }
/* Animated footer */
.portfolio-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid var(--border);
    color: var(--muted);
    background: linear-gradient(180deg, transparent, rgba(124,92,255,.035));
}
.portfolio-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -35%;
    width: 35%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
    filter: drop-shadow(0 0 8px rgba(0,212,255,.4));
    animation: footerBeam 6.5s ease-in-out infinite;
}
.footer-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    animation: footerGridMove 18s linear infinite;
}
.footer-orb { position: absolute; z-index: -1; width: 190px; height: 190px; border-radius: 50%; filter: blur(68px); opacity: .10; pointer-events: none; }
.footer-orb-one { left: 8%; bottom: -150px; background: var(--brand); animation: footerOrbOne 8s ease-in-out infinite alternate; }
.footer-orb-two { right: 8%; top: -155px; background: var(--brand-2); animation: footerOrbTwo 10s ease-in-out infinite alternate; }
.footer-inner { position: relative; z-index: 1; }
.footer-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 28px rgba(0,212,255,.14);
    transform: translateY(8px) rotate(-5deg);
    opacity: 0;
}
.portfolio-footer.is-visible .footer-logo { animation: footerLogoIn .75s cubic-bezier(.2,.8,.2,1) forwards, footerLogoFloat 4.5s ease-in-out .8s infinite; }
.footer-name { color: var(--bs-body-color); font-weight: 750; }
.footer-brand small, .footer-copy { font-size: .82rem; }
.back-top { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--muted); font-weight: 700; transition: color .25s ease, transform .25s ease; }
.back-top-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--brand-2); background: var(--surface); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.back-top:hover { color: var(--bs-body-color); transform: translateY(-1px); }
.back-top:hover .back-top-icon { transform: translateY(-4px); border-color: rgba(0,212,255,.4); box-shadow: 0 9px 22px rgba(0,212,255,.13); }
@keyframes footerBeam { 0% { left: -35%; } 52%, 100% { left: 110%; } }
@keyframes footerGridMove { to { background-position: 34px 34px, 34px 34px; } }
@keyframes footerOrbOne { to { transform: translate(70px, -24px) scale(1.12); } }
@keyframes footerOrbTwo { to { transform: translate(-64px, 22px) scale(.92); } }
@keyframes footerLogoIn { to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@keyframes footerLogoFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(0deg); } }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal .7s ease forwards; }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .16s; } .delay-3 { animation-delay: .24s; } .delay-4 { animation-delay: .32s; }
@keyframes reveal { to { opacity: 1; transform: none; } }


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .footer-logo { opacity: 1; transform: rotate(-4deg); }
}

@media (max-width: 991.98px) {
    .portfolio-nav { background: rgba(7,11,20,.92); }
    [data-bs-theme="light"] .portfolio-nav { background: rgba(247,248,252,.95); }
    .nav-link::after { left: 0; right: auto; width: 34px; bottom: .1rem; transform-origin: left; }
    .hero-title { font-size: clamp(3.2rem, 12vw, 5.5rem); }
    .profile-card { min-height: 360px; }
    .section-padding { padding: 5rem 0; }
}

@media (max-width: 575.98px) {
    .hero-meta { flex-direction: column; gap: .6rem; }
    .profile-card { padding: 1.35rem; }
    .profile-mark { width: 135px; height: 135px; font-size: 2.7rem; }
    .timeline { padding-left: 1.6rem; }
    .timeline-dot { left: -1.6rem; }
    .brand-label { font-size: .95rem; }
    .footer-right { text-align: center; }
}


/* =========================================================
   WOW MOTION LAYER
   Interactive effects are progressively enhanced by main.js.
   ========================================================= */

body.intro-active { overflow: hidden; }

.intro-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(124,92,255,.18), transparent 32%),
        radial-gradient(circle at 58% 52%, rgba(0,212,255,.12), transparent 26%),
        #050812;
    transition: opacity .55s ease, visibility .55s ease;
}
.intro-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-loader-inner { width: min(360px, 78vw); text-align: center; }
.intro-logo {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.6rem;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: 26px;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.08em;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 70px rgba(0,212,255,.20);
    animation: introLogo 1.05s cubic-bezier(.2,.8,.2,1) both;
}
.intro-logo::before,
.intro-logo::after {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(0,212,255,.22);
    border-radius: 34px;
    animation: introRing 1.8s ease-out infinite;
}
.intro-logo::after { animation-delay: .55s; border-color: rgba(124,92,255,.24); }
.intro-line { height: 2px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.intro-line span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--brand), var(--brand-2)); animation: introProgress 1.15s ease both; }
.intro-loader small { display: block; margin-top: .9rem; color: #8290a8; font-size: .68rem; letter-spacing: .18em; }
@keyframes introLogo { 0% { opacity: 0; transform: scale(.72) rotate(-12deg); filter: blur(10px); } 65% { opacity: 1; transform: scale(1.05) rotate(2deg); filter: blur(0); } 100% { transform: scale(1) rotate(-4deg); } }
@keyframes introRing { 0% { transform: scale(.72); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes introProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.page-noise {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .025;
    background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.8) 0 1px, transparent 1px 4px);
    background-size: 5px 5px;
    mix-blend-mode: soft-light;
}
[data-bs-theme="light"] .page-noise { opacity: .018; mix-blend-mode: multiply; }

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 360px;
    height: 360px;
    z-index: 998;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    background: radial-gradient(circle, rgba(0,212,255,.09), rgba(124,92,255,.045) 34%, transparent 68%);
    transition: opacity .25s ease;
}
.cursor-glow.is-visible { opacity: 1; }

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.hero-content { z-index: 3; }
.hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .34;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 4%, #000 22%, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 22%, #000 75%, transparent 100%);
}
.hero-grid {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -28%;
    height: 58%;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(0,212,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,92,255,.14) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(580px) rotateX(62deg);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000, transparent 82%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 82%);
    animation: heroGridDrift 13s linear infinite;
}
@keyframes heroGridDrift { to { background-position: 0 58px, 58px 0; } }

.hero-floating-tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tech-float {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 46px;
    min-height: 36px;
    padding: .45rem .65rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    color: rgba(202,224,242,.55);
    background: rgba(10,15,27,.42);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    animation: techFloat 7s ease-in-out infinite;
}
[data-bs-theme="light"] .tech-float { color: rgba(30,45,68,.52); background: rgba(255,255,255,.5); }
.tech-float-1 { left: 7%; top: 27%; animation-delay: -.7s; }
.tech-float-2 { left: 46%; top: 18%; animation-delay: -3.1s; }
.tech-float-3 { right: 7%; top: 24%; animation-delay: -1.8s; }
.tech-float-4 { right: 13%; bottom: 19%; animation-delay: -4.3s; }
.tech-float-5 { left: 39%; bottom: 14%; animation-delay: -2.2s; }
@keyframes techFloat { 0%,100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-18px,0) rotate(3deg); } }

.gradient-shimmer {
    color: transparent;
    background: linear-gradient(100deg, var(--bs-body-color) 0%, var(--bs-body-color) 32%, var(--brand-2) 48%, #fff 56%, var(--brand) 64%, var(--bs-body-color) 78%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleShimmer 7s ease-in-out infinite;
}
[data-bs-theme="light"] .gradient-shimmer { background-image: linear-gradient(100deg, #111827 0%, #111827 32%, #00a9d0 48%, #6c4af4 60%, #111827 78%); }
@keyframes titleShimmer { 0%,58% { background-position: 115% 0; } 85%,100% { background-position: -110% 0; } }

.hero-scroll-cue {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    text-decoration: none;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .22em;
    opacity: .8;
}
.hero-scroll-cue i { color: var(--brand-2); font-size: 1rem; animation: scrollCue 1.7s ease-in-out infinite; }
@keyframes scrollCue { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(7px); opacity: 1; } }

.profile-card { transform-style: preserve-3d; }
.profile-scan {
    position: absolute;
    z-index: 2;
    left: 4%;
    right: 4%;
    height: 1px;
    top: -3%;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.8), rgba(124,92,255,.75), transparent);
    box-shadow: 0 0 16px rgba(0,212,255,.45);
    animation: profileScan 5.8s ease-in-out infinite;
    opacity: .65;
}
@keyframes profileScan { 0%,12% { top: 4%; opacity: 0; } 22% { opacity: .75; } 78% { opacity: .55; } 90%,100% { top: 95%; opacity: 0; } }
.profile-orbit { animation: orbitSpin 20s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.profile-mark {
    transform-style: preserve-3d;
    animation: profileMarkFloat 4.2s ease-in-out infinite;
}
@keyframes profileMarkFloat { 0%,100% { transform: translateZ(38px) translateY(0) rotate(-4deg); } 50% { transform: translateZ(48px) translateY(-8px) rotate(1deg); } }
.orbit-dot {
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-2);
    box-shadow: 0 0 16px rgba(0,212,255,.75);
}
.orbit-dot-one { right: 27%; top: 14%; animation: orbitDotOne 6s ease-in-out infinite; }
.orbit-dot-two { left: 17%; bottom: 26%; width: 7px; height: 7px; background: var(--brand); box-shadow: 0 0 15px rgba(124,92,255,.8); animation: orbitDotTwo 7.5s ease-in-out infinite; }
@keyframes orbitDotOne { 50% { transform: translate(-24px, 26px) scale(1.35); } }
@keyframes orbitDotTwo { 50% { transform: translate(26px, -28px) scale(.75); } }
.profile-status span { animation: statusPulse 1.8s ease-in-out infinite; }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 9px rgba(43,213,118,0); } }

/* Mouse-position spotlight for interactive surfaces */
.spotlight-card {
    --spot-x: 50%;
    --spot-y: 50%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.spotlight-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(0,212,255,.11), rgba(124,92,255,.055) 28%, transparent 63%);
    transition: opacity .3s ease;
}
.spotlight-card:hover::before { opacity: 1; }
.spotlight-card > * { position: relative; z-index: 1; }

.tilt-card {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    transform: perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .18s ease-out, border-color .25s ease, box-shadow .25s ease;
}
.tilt-card:hover {
    --lift: -6px;
    border-color: rgba(0,212,255,.25);
    box-shadow: 0 22px 55px rgba(0,0,0,.12), 0 0 0 1px rgba(124,92,255,.05) inset;
}

/* Scroll-enter animations */
.js-ready .scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    filter: blur(6px);
    transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.js-ready .scroll-reveal.from-left { transform: translate3d(-38px,0,0) scale(.985); }
.js-ready .scroll-reveal.from-right { transform: translate3d(38px,0,0) scale(.985); }
.js-ready .scroll-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }

.skill-tags span {
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease;
}
.skill-tags span:hover {
    transform: translateY(-3px) scale(1.035);
    color: var(--bs-body-color);
    border-color: rgba(0,212,255,.35);
    background: rgba(0,212,255,.07);
}
.skill-card.is-visible .skill-tags span { animation: tagPop .55s cubic-bezier(.2,.8,.2,1) both; }
.skill-card.is-visible .skill-tags span:nth-child(2) { animation-delay: .04s; }
.skill-card.is-visible .skill-tags span:nth-child(3) { animation-delay: .08s; }
.skill-card.is-visible .skill-tags span:nth-child(4) { animation-delay: .12s; }
.skill-card.is-visible .skill-tags span:nth-child(5) { animation-delay: .16s; }
.skill-card.is-visible .skill-tags span:nth-child(6) { animation-delay: .20s; }
.skill-card.is-visible .skill-tags span:nth-child(7) { animation-delay: .24s; }
.skill-card.is-visible .skill-tags span:nth-child(8) { animation-delay: .28s; }
@keyframes tagPop { 0% { opacity: .3; transform: translateY(8px) scale(.92); } 100% { opacity: 1; transform: none; } }

.timeline::after {
    content: "";
    position: absolute;
    left: .38rem;
    top: .5rem;
    width: 2px;
    height: var(--timeline-progress, 0%);
    transform: translateX(-.5px);
    background: linear-gradient(var(--brand-2), var(--brand));
    box-shadow: 0 0 12px rgba(0,212,255,.35);
    transition: height .12s linear;
}
.timeline-item.is-visible .timeline-dot { animation: timelinePulse 1.6s ease-out 2; }
@keyframes timelinePulse { 50% { box-shadow: 0 0 0 13px rgba(0,212,255,0), 0 0 20px rgba(0,212,255,.65); } }

.info-card i,
.service-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.info-card:hover i { transform: rotate(-8deg) scale(1.1); box-shadow: 0 10px 26px rgba(0,212,255,.12); }
.service-card:hover .service-icon { transform: translateY(-6px) rotate(6deg) scale(1.08); box-shadow: 0 12px 28px rgba(124,92,255,.13); }

.contact-panel::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -90px;
    width: 260px;
    height: 260px;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,.12);
    box-shadow: 0 0 0 38px rgba(124,92,255,.025), 0 0 0 76px rgba(0,212,255,.018);
    animation: contactRings 9s linear infinite;
}
@keyframes contactRings { to { transform: rotate(360deg) scale(1.08); } }
.contact-panel > * { position: relative; z-index: 1; }
.contact-link { transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.contact-link:hover { transform: translateX(5px); background: rgba(0,212,255,.045); box-shadow: 0 12px 34px rgba(0,0,0,.06); }

.magnetic-btn,
.magnetic-link { will-change: transform; }
.btn { position: relative; overflow: hidden; }
.btn-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    transform: translate(-50%,-50%) scale(0);
    animation: buttonRipple .65s ease-out forwards;
}
@keyframes buttonRipple { to { transform: translate(-50%,-50%) scale(20); opacity: 0; } }

@media (hover: none), (pointer: coarse) {
    .cursor-glow { display: none; }
    .tech-float { opacity: .55; }
    .tilt-card { transform: none !important; }
}

@media (max-width: 991.98px) {
    .tech-float-2, .tech-float-5 { display: none; }
    .hero-network { opacity: .22; }
    .hero-grid { bottom: -18%; opacity: .14; }
    .hero-scroll-cue { display: none; }
}

@media (max-width: 575.98px) {
    .tech-float { transform: scale(.86); opacity: .38; }
    .tech-float-1 { left: 3%; top: 19%; }
    .tech-float-3 { right: 4%; top: 25%; }
    .tech-float-4 { right: 5%; bottom: 13%; }
    .intro-loader small { font-size: .58rem; letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-loader { display: none !important; }
    .cursor-glow, .hero-network, .hero-floating-tags { display: none !important; }
    .js-ready .scroll-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    .tilt-card { transform: none !important; }
}

/* Preserve absolute decorative layers inside the 3D profile card. */
.profile-card > .profile-orbit,
.profile-card > .profile-scan,
.profile-card > .orbit-dot { position: absolute; }