/* Vortex Portal — premium dark theme on Bootstrap 6 */

[data-bs-theme="dark"] {
    --vortex-radius: 0.5rem;
    --vortex-cyan: #6ee7ff;
    --vortex-violet: #a78bfa;
    --vortex-amber: #fbbf24;
    --bs-primary: #22d3ee;
    --bs-secondary: #94a3b8;
    --bs-body-bg: #030408;
    --bs-body-color: #eef1f8;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-link-color: var(--vortex-cyan);
    --bs-link-hover-color: #a5f3fc;
    --bs-border-radius: var(--vortex-radius);
    --bs-border-radius-sm: var(--vortex-radius);
    --bs-border-radius-lg: var(--vortex-radius);
    --bs-border-radius-xl: var(--vortex-radius);
    --bs-border-radius-xxl: var(--vortex-radius);
    --bs-border-radius-pill: var(--vortex-radius);
}

html {
    scroll-behavior: smooth;
}

#top,
#work,
#stack,
#experience,
#contacts {
    scroll-margin-top: 5.5rem;
}

body.vortex-portal {
    position: relative;
    min-height: 100vh;
    background: var(--bs-body-bg);
    overflow-x: clip;
}

.vortex-page {
    position: relative;
    z-index: 1;
}

/* —— Ambient backdrop (parallax layers + patterns) —— */
.vortex-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.vortex-backdrop__base {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, #0c1630 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 100% 30%, #1a0f2e 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 80%, #0a1a22 0%, transparent 55%),
        linear-gradient(180deg, #020308 0%, #05070f 38%, #030408 100%);
}

.vortex-backdrop__aurora {
    position: absolute;
    width: 140%;
    height: 70%;
    left: -20%;
    filter: blur(60px);
    opacity: 0.45;
    mix-blend-mode: screen;
}

.vortex-backdrop__aurora--a {
    top: -25%;
    background: conic-gradient(
        from 200deg at 30% 40%,
        transparent 0deg,
        rgba(34, 211, 238, 0.35) 55deg,
        transparent 120deg,
        rgba(167, 139, 250, 0.3) 200deg,
        transparent 300deg
    );
    animation: vortex-aurora-shift 24s ease-in-out infinite alternate;
}

.vortex-backdrop__aurora--b {
    bottom: -35%;
    background: conic-gradient(
        from 20deg at 70% 50%,
        transparent 0deg,
        rgba(99, 102, 241, 0.28) 80deg,
        transparent 160deg,
        rgba(34, 211, 238, 0.2) 260deg,
        transparent 360deg
    );
    animation: vortex-aurora-shift 32s ease-in-out infinite alternate-reverse;
}

@keyframes vortex-aurora-shift {
    0% {
        transform: translate3d(-2%, 0, 0) rotate(-2deg) scale(1);
    }
    100% {
        transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.06);
    }
}

.vortex-backdrop__mesh {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(ellipse 50% 40% at 18% 22%, rgba(34, 211, 238, 0.28), transparent 58%),
        radial-gradient(ellipse 45% 38% at 88% 12%, rgba(167, 139, 250, 0.26), transparent 55%),
        radial-gradient(ellipse 40% 32% at 52% 88%, rgba(251, 191, 36, 0.12), transparent 52%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.vortex-backdrop__wire {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop stop-color='%236ee7ff' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23a78bfa' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 120 Q200 40 400 140 T800 90 V600 H0Z' fill='none' stroke='url(%23g)' stroke-width='.6'/%3E%3Cpath d='M0 280 Q220 360 480 240 T800 320' fill='none' stroke='%236ee7ff' stroke-opacity='.12' stroke-width='.5'/%3E%3Cpath d='M0 420 Q180 300 360 460 T800 400' fill='none' stroke='%23a78bfa' stroke-opacity='.1' stroke-width='.5'/%3E%3Ccircle cx='120' cy='140' r='2' fill='%236ee7ff' fill-opacity='.5'/%3E%3Ccircle cx='400' cy='240' r='2' fill='%23a78bfa' fill-opacity='.45'/%3E%3Ccircle cx='640' cy='100' r='2' fill='%236ee7ff' fill-opacity='.4'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center top;
    mask-image: linear-gradient(180deg, black 0%, black 45%, transparent 92%);
}

.vortex-backdrop__hex {
    position: absolute;
    inset: -5%;
    opacity: 0.14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0 L56 16 V48 L28 64 L0 48 V16 Z' fill='none' stroke='%236ee7ff' stroke-opacity='.35' stroke-width='.5'/%3E%3C/svg%3E");
    background-size: 56px 100px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 10%, transparent 75%);
}

.vortex-backdrop__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 231, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 231, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 95% 75% at 50% 25%, black 8%, transparent 70%);
    opacity: 0.55;
}

.vortex-backdrop__dots {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 0.8px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 100% 85% at 50% 40%, black 5%, transparent 68%);
}

.vortex-backdrop__beam {
    position: absolute;
    width: 55vw;
    height: 140vh;
    top: -30%;
    filter: blur(40px);
    opacity: 0.2;
    transform: rotate(-18deg);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(110, 231, 255, 0.15) 35%,
        rgba(167, 139, 250, 0.12) 55%,
        transparent 85%
    );
}

.vortex-backdrop__beam--1 {
    left: -8%;
}

.vortex-backdrop__beam--2 {
    right: -12%;
    transform: rotate(14deg);
    opacity: 0.14;
}

.vortex-backdrop__particles {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.vortex-backdrop__noise {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vortex-backdrop__scanlines {
    position: absolute;
    inset: 0;
    z-index: 6;
    opacity: 0.04;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.45) 2px,
        rgba(0, 0, 0, 0.45) 3px
    );
    pointer-events: none;
}

.vortex-backdrop__vignette {
    position: absolute;
    inset: 0;
    z-index: 7;
    background:
        radial-gradient(ellipse 130% 95% at 50% 35%, transparent 25%, rgba(0, 0, 0, 0.65) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 75%, rgba(0, 0, 0, 0.5) 100%);
}

.vortex-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.65;
    will-change: transform;
}

.vortex-orb--cyan {
    width: min(48vw, 480px);
    height: min(48vw, 480px);
    top: 5%;
    left: -8%;
    background: rgba(34, 211, 238, 0.42);
}

.vortex-orb--violet {
    width: min(44vw, 440px);
    height: min(44vw, 440px);
    top: -2%;
    right: -6%;
    background: rgba(139, 92, 246, 0.38);
}

.vortex-orb--amber {
    width: min(32vw, 320px);
    height: min(32vw, 320px);
    bottom: 8%;
    left: 35%;
    background: rgba(251, 191, 36, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .vortex-backdrop__aurora--a,
    .vortex-backdrop__aurora--b {
        animation: none;
    }
}

.vortex-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.5rem;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--vortex-cyan), var(--vortex-violet));
}

.vortex-navbar {
    z-index: 10;
    background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent) !important;
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vortex-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.vortex-brand:hover {
    opacity: 0.92;
    color: inherit;
}

.vortex-brand__mark {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
    border-radius: var(--vortex-radius);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 24px color-mix(in srgb, var(--vortex-cyan) 18%, transparent);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.vortex-brand__mark img {
    display: block;
    width: 2.35rem;
    height: 2.35rem;
}

.vortex-brand:hover .vortex-brand__mark {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--vortex-cyan) 35%, transparent),
        0 14px 32px rgba(0, 0, 0, 0.5),
        0 0 32px color-mix(in srgb, var(--vortex-cyan) 28%, transparent);
}

.vortex-brand__wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    line-height: 1.1;
}

.vortex-brand__name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    background: linear-gradient(
        118deg,
        #fff 0%,
        #e8f6ff 42%,
        color-mix(in srgb, var(--vortex-cyan) 75%, #fff) 72%,
        #c4b5fd 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vortex-brand__suffix {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--bs-secondary);
}

.vortex-brand--compact .vortex-brand__mark img {
    width: 2rem;
    height: 2rem;
}

.vortex-brand--compact .vortex-brand__name {
    font-size: 0.98rem;
}

.vortex-footer .vortex-brand__mark {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.vortex-navbar .nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    padding-inline: 0.65rem;
}

.vortex-navbar-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    min-height: 3.25rem;
}

.vortex-navbar-menu {
    display: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vortex-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.vortex-navbar-toggler {
    display: inline-flex;
}

@media (min-width: 992px) {
    .vortex-navbar-menu {
        display: flex;
    }

    .vortex-navbar-toggler {
        display: none !important;
    }
}

/* Single segmented language switch */
.lang-switch {
    --lang-switch-pad: 0.22rem;
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-width: 5.75rem;
    padding: var(--lang-switch-pad);
    border-radius: var(--vortex-radius);
    border: 1px solid var(--bs-border-color);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    isolation: isolate;
}

.lang-switch__track {
    position: absolute;
    top: var(--lang-switch-pad);
    bottom: var(--lang-switch-pad);
    left: var(--lang-switch-pad);
    width: calc((100% - 2 * var(--lang-switch-pad)) / 2);
    border-radius: var(--vortex-radius);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.22s ease;
    transform: translateX(0);
    pointer-events: none;
    will-change: transform;
}

.lang-switch[data-locale="uk"] .lang-switch__track {
    transform: translateX(100%);
}

.lang-switch__option {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.4rem 0.65rem;
    text-align: center;
    color: var(--bs-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.lang-switch__option.is-active {
    color: var(--bs-body-color);
}

.lang-switch__option:not(.is-active):hover {
    color: var(--bs-body-color);
}

.vortex-hero {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.vortex-eyebrow {
    color: var(--vortex-cyan);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

.vortex-title {
    font-size: clamp(2.1rem, 4.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 650;
    margin: 0;
}

.vortex-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--bs-secondary);
    max-width: 38rem;
}

.vortex-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.vortex-hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--vortex-radius);
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
}

.vortex-hero-cta span {
    position: relative;
    z-index: 1;
}

.vortex-hero-cta::after {
    position: relative;
    z-index: 1;
    font-size: 1.05em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.vortex-hero-cta:hover::after {
    transform: translate(3px, -1px);
}

.vortex-hero-cta--primary {
    color: #031018;
    border: 1px solid color-mix(in srgb, var(--vortex-cyan) 55%, #fff);
    background: linear-gradient(
        128deg,
        #7ee8ff 0%,
        #22d3ee 42%,
        #38bdf8 72%,
        #a5f3fc 100%
    );
    box-shadow:
        0 0 0 1px rgba(110, 231, 255, 0.25),
        0 14px 36px rgba(34, 211, 238, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.vortex-hero-cta--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.42) 50%,
        transparent 62%
    );
    transform: translateX(-130%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.vortex-hero-cta--primary::after {
    content: "→";
}

.vortex-hero-cta--primary:hover {
    color: #020c12;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(167, 243, 252, 0.45),
        0 18px 44px rgba(34, 211, 238, 0.42),
        0 0 32px rgba(110, 231, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.vortex-hero-cta--primary:hover::before {
    transform: translateX(130%);
}

.vortex-hero-cta--secondary {
    color: color-mix(in srgb, var(--bs-body-color) 92%, var(--vortex-cyan));
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.02)
        );
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.vortex-hero-cta--secondary::after {
    content: "↗";
    opacity: 0.75;
}

.vortex-hero-cta--secondary:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--vortex-cyan) 42%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--vortex-cyan) 14%, rgba(255, 255, 255, 0.08)),
            rgba(167, 139, 250, 0.08)
        );
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 0 24px color-mix(in srgb, var(--vortex-cyan) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .vortex-hero-cta--primary::before {
        display: none;
    }

    .vortex-hero-cta,
    .vortex-hero-cta::after {
        transition: none;
    }
}

.vortex-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--vortex-radius);
    background: color-mix(in srgb, var(--bs-body-bg) 55%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.vortex-panel dt {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bs-secondary);
}

.vortex-section-title {
    position: relative;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vortex-project-card {
    --vortex-accent: var(--vortex-cyan);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--vortex-radius);
    overflow: hidden;
    background: color-mix(in srgb, var(--bs-body-bg) 50%, rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vortex-project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
}

.vortex-project-card::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--vortex-accent), transparent);
}

.vortex-project-card[data-accent="violet"] {
    --vortex-accent: var(--vortex-violet);
}

.vortex-project-card[data-accent="amber"] {
    --vortex-accent: var(--vortex-amber);
}

.vortex-project-card .card-media {
    background: rgba(0, 0, 0, 0.35);
    line-height: 0;
}

.vortex-project-card .card-media img {
    width: 100%;
    display: block;
}

.vortex-project-card .card-media--cover img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vortex-project-card .card-media--contain img {
    object-fit: contain;
    max-height: min(65vh, 480px);
}

.vortex-project-card .card-body {
    padding: 1.25rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Tech stack / tag chips */
.vortex-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.55rem;
}

.vortex-tag {
    --tag-accent: var(--vortex-accent, var(--vortex-cyan));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.7rem;
    border-radius: var(--vortex-radius);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: color-mix(in srgb, var(--bs-body-color) 88%, var(--tag-accent));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--tag-accent) 9%, rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.02)
        );
    border: 1px solid color-mix(in srgb, var(--tag-accent) 22%, rgba(255, 255, 255, 0.1));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vortex-tag::before {
    content: "";
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--tag-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tag-accent) 65%, transparent);
    flex-shrink: 0;
}

.vortex-tag--featured {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.62rem;
    padding: 0.3rem 0.55rem;
    border-color: color-mix(in srgb, var(--vortex-amber) 45%, rgba(255, 255, 255, 0.12));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vortex-amber) 18%, rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.02)
    );
    color: color-mix(in srgb, var(--vortex-amber) 35%, #fff);
}

.vortex-tag--featured::before {
    background: var(--vortex-amber);
    box-shadow: 0 0 8px color-mix(in srgb, var(--vortex-amber) 55%, transparent);
}

.vortex-project-card:hover .vortex-tag:not(.vortex-tag--featured) {
    border-color: color-mix(in srgb, var(--tag-accent) 38%, rgba(255, 255, 255, 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 14px color-mix(in srgb, var(--tag-accent) 12%, transparent);
}

.vortex-project-card .card-summary {
    color: var(--bs-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.vortex-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.vortex-card-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--vortex-radius);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.vortex-card-cta span {
    position: relative;
    z-index: 1;
}

.vortex-card-cta::after {
    position: relative;
    z-index: 1;
    font-size: 0.95em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.vortex-card-cta:hover::after {
    transform: translate(2px, -1px);
}

.vortex-card-cta--primary {
    color: #031018;
    border: 1px solid color-mix(in srgb, var(--vortex-accent) 50%, #fff);
    background: linear-gradient(
        125deg,
        color-mix(in srgb, var(--vortex-accent) 75%, #fff) 0%,
        var(--vortex-accent) 55%,
        color-mix(in srgb, var(--vortex-accent) 85%, #0ea5e9) 100%
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--vortex-accent) 28%, transparent),
        0 8px 22px color-mix(in srgb, var(--vortex-accent) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.vortex-card-cta--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 60%
    );
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

.vortex-card-cta--primary::after {
    content: "→";
}

.vortex-card-cta--primary:hover {
    color: #020c12;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--vortex-accent) 45%, transparent),
        0 12px 28px color-mix(in srgb, var(--vortex-accent) 35%, transparent),
        0 0 20px color-mix(in srgb, var(--vortex-accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.vortex-card-cta--primary:hover::before {
    transform: translateX(120%);
}

.vortex-card-cta--ghost {
    color: color-mix(in srgb, var(--bs-body-color) 90%, var(--vortex-accent));
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vortex-card-cta--ghost::after {
    content: "↗";
    opacity: 0.65;
    font-size: 0.85em;
}

.vortex-card-cta--ghost:hover {
    color: #fff;
    border-color: color-mix(in srgb, var(--vortex-accent) 38%, rgba(255, 255, 255, 0.18));
    background: color-mix(in srgb, var(--vortex-accent) 10%, rgba(255, 255, 255, 0.05));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .vortex-card-cta--primary::before {
        display: none;
    }

    .vortex-card-cta,
    .vortex-card-cta::after {
        transition: none;
    }
}

.vortex-stack-tile {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--vortex-radius);
    padding: 1.1rem 1.15rem;
    height: 100%;
    background: color-mix(in srgb, var(--bs-body-bg) 60%, rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(8px);
}

.vortex-stack-tile h3 {
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.vortex-stack-tile p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bs-secondary);
}

.vortex-contact-card {
    --contact-accent: var(--vortex-cyan);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 1rem 1.05rem;
    border-radius: var(--vortex-radius);
    border: 1px solid rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--contact-accent) 8%, rgba(255, 255, 255, 0.05)),
            rgba(255, 255, 255, 0.02)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.vortex-contact-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--contact-accent) 40%, rgba(255, 255, 255, 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 24px color-mix(in srgb, var(--contact-accent) 14%, transparent);
    color: inherit;
}

.vortex-contact-card__icon {
    flex-shrink: 0;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: var(--vortex-radius);
    background: color-mix(in srgb, var(--contact-accent) 16%, rgba(0, 0, 0, 0.35));
    border: 1px solid color-mix(in srgb, var(--contact-accent) 35%, rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.35rem 1.35rem;
}

.vortex-contact-card[data-channel="phone"] {
    --contact-accent: #34d399;
}

.vortex-contact-card[data-channel="phone"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="email"] {
    --contact-accent: #60a5fa;
}

.vortex-contact-card[data-channel="email"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="telegram"] {
    --contact-accent: #38bdf8;
}

.vortex-contact-card[data-channel="telegram"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2338bdf8'%3E%3Cpath d='M21.5 3.5L2.8 10.6c-.9.4-.9 1.6.1 1.9l4.8 1.5 1.8 5.6c.3.9 1.4 1.1 2 .4l2.6-3.1 5.1 3.8c.8.6 1.9.1 2.1-.9L22.5 5.2c.2-1.1-.9-2-2-1.7z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="discord"] {
    --contact-accent: #a78bfa;
}

.vortex-contact-card[data-channel="discord"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa'%3E%3Cpath d='M18.9 5.2A15.4 15.4 0 0 0 15.3 4a10 10 0 0 0-.5.9 14.2 14.2 0 0 0-4.2 0 9.5 9.5 0 0 0-.5-.9 15.2 15.2 0 0 0-3.6 1.2C3.5 8.4 2.6 11.6 3 14.7a15.5 15.5 0 0 0 4.7 2.4 11.6 11.6 0 0 0 1-1.6 7.6 7.6 0 0 1-1.6-.8l.4-.3a11 11 0 0 0 9.4 0l.4.3a7.4 7.4 0 0 1-1.6.8 11.4 11.4 0 0 0 1 1.6 15.4 15.4 0 0 0 4.7-2.4c.5-3.6-.8-6.7-3.3-9.5zM9.7 13.6c-.9 0-1.6-.8-1.6-1.8s.7-1.8 1.6-1.8 1.7.8 1.6 1.8-.7 1.8-1.6 1.8zm4.6 0c-.9 0-1.6-.8-1.6-1.8s.7-1.8 1.6-1.8 1.7.8 1.6 1.8-.7 1.8-1.6 1.8z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="teams"] {
    --contact-accent: #818cf8;
}

.vortex-contact-card[data-channel="teams"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23818cf8'%3E%3Cpath d='M6 8h8v8H6z' opacity='.35'/%3E%3Cpath d='M14 6h6v6h-6z'/%3E%3Cpath d='M4 12h6v6H4z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="viber"] {
    --contact-accent: #c084fc;
}

.vortex-contact-card[data-channel="viber"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='2'%3E%3Cpath d='M12 3c-4 0-7 2.5-7 6.5 0 2.2 1.2 4.1 3 5.2L7 21l4.2-2.2c.6.1 1.2.2 1.8.2 4 0 7-2.5 7-6.5S16 3 12 3z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="signal"] {
    --contact-accent: #3b82f6;
}

.vortex-contact-card[data-channel="signal"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="youtube"] {
    --contact-accent: #f87171;
}

.vortex-contact-card[data-channel="youtube"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f87171'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18 5 12 5 12 5s-6 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.8 1.8C6 19 12 19 12 19s6 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8zM10 15.5v-7l6 3.5-6 3.5z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="github"],
.vortex-contact-card[data-channel="linkedin"],
.vortex-contact-card[data-channel="website"],
.vortex-contact-card[data-channel="other"] {
    --contact-accent: var(--vortex-cyan);
}

.vortex-contact-card[data-channel="github"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eef1f8'%3E%3Cpath d='M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.8c-3 .7-3.6-1.4-3.6-1.4-.5-1.1-1.2-1.4-1.2-1.4-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1.7 1.7 2.5 2.4 1.6.9 2.8.6 3.5.5-.1-.9-.4-1.6-.7-2 2.3-.3 4.7-1.1 4.7-5 0-1.1-.4-2-1-2.7.1-.2.5-2.5-.2-5.2 0 0-.8-.3-2.7 1a9.2 9.2 0 0 0-5 0C6.8 4.7 6 5 6 5c-.7 2.7-.3 5-.2 5.2-.6.7-1 1.6-1 2.7 0 3.9 2.4 4.7 4.7 5-.3.8-.5 1.7-.5 2.6v2c0 .3.2.6.7.5A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="linkedin"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236ee7ff'%3E%3Cpath d='M6 9H2v13h4V9zm2-6a2.3 2.3 0 1 0 0 4.6A2.3 2.3 0 0 0 8 3zM22 22h-4v-6.5c0-1.5-.6-2.5-2-2.5-1.1 0-1.7.7-2 1.4-.1.3-.1.7-.1 1.1V22h-4V9h4v2.2c.5-.8 1.5-2 3.6-2 2.6 0 4.4 1.7 4.4 5.3V22z'/%3E%3C/svg%3E");
}

.vortex-contact-card[data-channel="website"] .vortex-contact-card__icon,
.vortex-contact-card[data-channel="other"] .vortex-contact-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
}

.vortex-contact-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.vortex-contact-card__title {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.vortex-contact-card__value {
    font-size: 0.78rem;
    color: var(--bs-secondary);
    word-break: break-word;
}

.vortex-contact-card__arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--contact-accent) 70%, var(--bs-secondary));
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.vortex-contact-card:hover .vortex-contact-card__arrow {
    transform: translateX(3px);
}

.vortex-experience-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.vortex-experience-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    align-items: stretch;
}

.vortex-experience-item__rail {
    position: relative;
    display: flex;
    justify-content: center;
    width: 1.25rem;
    padding-top: 1.35rem;
}

.vortex-experience-item__rail::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: -1.15rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--vortex-cyan), rgba(167, 139, 250, 0.35), transparent);
    opacity: 0.55;
}

.vortex-experience-item:last-child .vortex-experience-item__rail::before {
    bottom: 50%;
}

.vortex-experience-item__node {
    position: relative;
    z-index: 1;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--vortex-cyan);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vortex-cyan) 22%, transparent), 0 0 16px var(--vortex-cyan);
}

.vortex-experience-item__card {
    padding: 1.1rem 1.15rem;
}

.vortex-experience-item__duration {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vortex-cyan);
}

.vortex-experience-item__position {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.vortex-experience-item__company {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bs-secondary);
}

.vortex-experience-item__summary {
    margin: 0.85rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--bs-body-color) 90%, var(--bs-secondary));
}

.vortex-experience-item__description {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--bs-secondary);
}

.vortex-experience-item__tech {
    margin-top: 0.85rem;
}

@media (max-width: 575px) {
    .vortex-experience-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .vortex-experience-item__rail {
        display: none;
    }
}

.vortex-footer {
    border-top: 1px solid var(--bs-border-color);
    padding-block: 1.25rem;
    color: var(--bs-secondary);
    font-size: 0.88rem;
}

.project-page {
    --vortex-accent: var(--vortex-cyan);
}

.project-page[data-accent="violet"] {
    --vortex-accent: var(--vortex-violet);
}

.project-page[data-accent="amber"] {
    --vortex-accent: var(--vortex-amber);
}

.project-page .vortex-eyebrow {
    color: var(--vortex-accent);
}

/* —— Cinematic project hero —— */
.project-cinematic {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 3.5vw, 2.25rem) 0 clamp(1.1rem, 2.5vw, 1.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-cinematic__bg {
    position: absolute;
    inset: -20% -10%;
    background-image: var(--project-hero-image, none);
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.35) brightness(0.55);
    opacity: 0.55;
    transform: scale(1.08);
}

.project-cinematic__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 231, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 231, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, black 0%, transparent 85%);
    opacity: 0.4;
}

.project-cinematic__fade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in srgb, var(--vortex-accent) 22%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(167, 139, 250, 0.18), transparent 50%),
        linear-gradient(180deg, rgba(3, 4, 8, 0.35) 0%, rgba(3, 4, 8, 0.92) 78%, #030408 100%);
}

.project-cinematic__content {
    position: relative;
    z-index: 1;
    max-width: 52rem;
}

.project-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-secondary);
}

.project-crumb a {
    color: var(--vortex-accent);
    text-decoration: none;
}

.project-crumb a:hover {
    text-decoration: underline;
}

.project-crumb__sep {
    opacity: 0.45;
}

.project-crumb__current {
    color: var(--bs-body-color);
}

.project-lead {
    margin: 0 0 0.85rem;
    max-width: 42rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--bs-body-color) 88%, var(--bs-secondary));
}

.project-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    background: linear-gradient(
        120deg,
        #fff 0%,
        #e8f4ff 35%,
        color-mix(in srgb, var(--vortex-accent) 85%, #fff) 70%,
        #c4b5fd 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px color-mix(in srgb, var(--vortex-accent) 25%, transparent);
}

.project-meta-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-bottom: 0.85rem;
}

.project-meta-rail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.project-split-wrap {
    margin-top: 0;
    position: relative;
    z-index: 2;
    padding-top: 0.75rem;
}

@media (min-width: 992px) {
    .project-split-wrap .project-split-row {
        --bs-gutter-x: 2.75rem;
    }
}

.project-panel--main .project-prose {
    max-width: none;
}

.project-aside {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.project-aside > .project-showcase--aside,
.project-aside > .project-panel--aside {
    margin: 0;
}

.project-panel--links .project-panel__label {
    margin-bottom: 0.65rem;
}

.project-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.project-link-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.8rem;
    border-radius: var(--vortex-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--vortex-accent) 6%, rgba(255, 255, 255, 0.04)),
            rgba(0, 0, 0, 0.15)
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-link-card:hover {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--vortex-accent) 38%, rgba(255, 255, 255, 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 20px color-mix(in srgb, var(--vortex-accent) 12%, transparent);
    color: inherit;
}

.project-link-card--accent {
    border-color: color-mix(in srgb, var(--vortex-accent) 45%, rgba(255, 255, 255, 0.12));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--vortex-accent) 22%, rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--vortex-accent) 8%, rgba(0, 0, 0, 0.2))
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px color-mix(in srgb, var(--vortex-accent) 15%, transparent);
}

.project-link-card--accent:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 28px rgba(0, 0, 0, 0.4),
        0 0 28px color-mix(in srgb, var(--vortex-accent) 22%, transparent);
}

.project-link-card__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--vortex-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.15rem 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.project-link-card[data-link="site"] .project-link-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E");
}

.project-link-card[data-link="download"] .project-link-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v10M8 9l4 4 4-4'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

.project-link-card[data-link="demo"] .project-link-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 8l6 4-6 4V8z'/%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3C/svg%3E");
}

.project-link-card[data-link="source"] .project-link-card__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1f8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18c-4 0-4-4-4-4s0-4 4-4'/%3E%3Cpath d='M15 6c4 0 4 4 4 4s0 4-4 4'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

.project-link-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.project-link-card__title {
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.project-link-card__meta {
    font-size: 0.7rem;
    color: var(--bs-secondary);
    word-break: break-all;
    line-height: 1.35;
}

.project-link-card--accent .project-link-card__title {
    color: color-mix(in srgb, var(--vortex-accent) 25%, #fff);
}

.project-link-card__arrow {
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.5;
    color: var(--vortex-accent);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.project-link-card:hover .project-link-card__arrow {
    opacity: 1;
    transform: translateX(2px);
}

.project-showcase {
    margin: 0;
    padding: 0.35rem;
    border-radius: var(--vortex-radius);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.project-showcase--aside {
    margin: 0;
}

.project-showcase__inner {
    border-radius: var(--vortex-radius);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-showcase__inner img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.project-showcase--aside .project-showcase__inner,
.project-showcase--aside .project-showcase__inner img {
    max-height: 180px;
}

.project-panel--aside {
    padding: 1rem 1rem;
}

.project-host-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--vortex-radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    color: var(--bs-secondary);
}

.project-host-chip__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--vortex-accent);
    box-shadow: 0 0 10px var(--vortex-accent);
}

.project-host-chip code {
    color: inherit;
    font-size: inherit;
}

.project-panel {
    padding: 0.9rem 1rem;
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px color-mix(in srgb, var(--vortex-accent) 12%, transparent);
}

.project-panel__label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-secondary);
    font-weight: 600;
}

.project-prose {
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--bs-body-color) 92%, var(--bs-secondary));
    max-width: 44rem;
}

.project-prose p {
    margin: 0 0 0.5rem;
}

.project-prose p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .project-host-chip {
        width: auto;
        justify-content: flex-start;
    }

    .project-showcase--aside .project-showcase__inner,
    .project-showcase--aside .project-showcase__inner img {
        max-height: 200px;
    }
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
}