.portfolio-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 90px 1.5rem 110px;
        position: relative;
        z-index: 4;
    }

    .portfolio-hero {
        top: -80px;
        margin: 0 auto 3rem;
        padding: clamp(1.5rem, 3.2vw, 3rem);
        border-radius: 42px;
        background: linear-gradient(120deg, rgba(255, 126, 224, 0.08), rgba(111, 125, 255, 0.08)),
                    radial-gradient(circle at top right, rgba(111, 125, 255, 0.2), transparent 65%);
        border: 1px solid rgba(111, 125, 255, 0.2);
        box-shadow: 0 50px 110px rgba(16, 0, 63, 0.08);
        position: relative;
        overflow: hidden;
    }

    .portfolio-hero > * {
        position: relative;
        z-index: 1;
    }

    .portfolio-hero::before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        width: 12px;
        border-radius: 999px;
        background: linear-gradient(180deg, #ff7ee0, #6f7dff);
        box-shadow: 0 10px 30px rgba(111, 125, 255, 0.4);
        z-index: 0;
    }

    .portfolio-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -40px;
        bottom: -60px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 70%);
        filter: blur(10px);
        opacity: 0.8;
        z-index: 0;
    }

    .hero-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem;
        align-items: center;
    }

    .hero-content {
        flex: 1 1 340px;
        max-width: 560px;
    }

    .hero-showcase {
        flex: 1 1 320px;
        display: flex;
        justify-content: center;
    }
    
    .hero-showcase img {
        width: 100%;
        max-width: 420px;
        border-radius: 28px;
        object-fit: cover;
        box-shadow: 0 30px 80px rgba(16, 0, 63, 0.25);
    }

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

    .portfolio-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.9rem;
        border-radius: 999px;
        border: 1px solid rgba(111, 125, 255, 0.4);
        background: rgba(111, 125, 255, 0.12);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 700;
        color: #5d52ff;
    }

    .hero-season-label {
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(111, 125, 255, 0.2);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.7rem;
        font-weight: 700;
        color: #5d52ff;
    }

    .portfolio-hero h1 {
        font-size: clamp(2.2rem, 3.2vw, 3.4rem);
        margin: 1rem 0 0.5rem;
    }

    .hero-lead {
        color: rgba(0, 0, 0, 0.7);
        margin-bottom: 1.5rem;
    }

    .hero-actions {
        display: flex;
        justify-content: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }

    .cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.95rem 1.75rem;
        border-radius: 999px;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .cta-btn:hover {
        opacity: 0.3;
        transition: 0.5s;
        scale: 1.03;
    }
    .cta-btn.primary {
        background: linear-gradient(135deg, #ff7ee0, #6f7dff);
        color: #fff;
        box-shadow: 0 15px 30px rgba(111, 125, 255, 0.4);
    }

    .cta-btn.ghost {
        border: 2px solid rgba(0, 0, 0, 0.851);
        color: inherit;
        background: rgba(255, 255, 255, 0.608);
    }

    .cta-btn--black-text {
        color: #000000;
    }

    .cta-btn.ghost.cta-btn--black-text {
        color: #000000;
    }

    .cta-btn img {
        width: 22px;
        height: 22px;
    }

    .cta-btn.ghost img {
        filter: invert();
    }
    [data-theme="dark"] {
    .cta-btn.ghost img {
        filter: none;
    }
}

    [data-theme="dark"] .cta-btn--black-text {
        color: #000000;
    }

    [data-theme="dark"] .cta-btn.ghost.cta-btn--black-text {
        color: #000000;
    }
    .cta-btn:hover {
        transform: translateY(-2px);
    }

    .hero-meta {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
    }

    .hero-trust {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 0.5rem;
        color: rgba(0, 0, 0, 0.75);
    }

    .avatar-stack {
        display: inline-flex;
        align-items: center;
    }

    .avatar-stack .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid #f5f5f5;
        margin-left: -26px;
        object-fit: cover;
        filter: grayscale(1) contrast(1.05);
        box-shadow: 0 6px 14px rgba(15, 12, 41, 0.2);
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .avatar-stack .avatar:first-child {
        margin-left: 0;
    }

    .avatar-stack .avatar:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(15, 12, 41, 0.25);
    }

    .avatar-stack .avatar:nth-child(1) {
        z-index: 1;
    }

    .avatar-stack .avatar:nth-child(2) {
        z-index: 2;
    }

    .avatar-stack .avatar:nth-child(3) {
        z-index: 3;
    }

    .avatar-stack .avatar:nth-child(4) {
        z-index: 4;
    }

    .avatar-one,
    .avatar-two,
    .avatar-three,
    .avatar-four {
        background: #000;
    }

    .avatar-two {
        background: linear-gradient(135deg, #6f7dff, #c95bff);
        --avatar-tilt: -2deg;
        z-index: 3;
    }

    .avatar-three {
        background: linear-gradient(135deg, #23d5ab, #23a6d5);
        --avatar-tilt: 3deg;
        z-index: 2;
    }

    .avatar-four {
        background: linear-gradient(135deg, #ff6cab, #7366ff);
        --avatar-tilt: 8deg;
        z-index: 1;
    }

    .hero-trust-copy p {
        margin: 0;
        font-weight: 600;
    }

    .hero-trust-copy span {
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.6);
    }

    .hero-badges {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.85rem 0.3rem 0.3rem;
        border-radius: 999px;
        border: 1px solid rgba(111, 125, 255, 0.25);
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 25px rgba(16, 0, 63, 0.08);
    }

    .badge-letter {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
    }

    .hero-badge:nth-child(1) .badge-letter {
        background: linear-gradient(135deg, #ff7ee0, #6f7dff);
    }

    .hero-badge:nth-child(2) .badge-letter {
        background: linear-gradient(135deg, #46c2ff, #6f7dff);
    }

    .hero-badge:nth-child(3) .badge-letter {
        background: linear-gradient(135deg, #23d5ab, #23a6d5);
    }

    .hero-badge:nth-child(4) .badge-letter {
        background: linear-gradient(135deg, #fed766, #ff8e53);
    }

    .badge-caption {
        font-weight: 600;
        font-size: 0.85rem;
        color: rgba(0, 0, 0, 0.7);
    }

    .hero-meta-note {
        margin: 0;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.75);
    }

    .showcase-card {
        border-radius: 24px;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(12px);
        box-shadow: 0 15px 45px rgba(16, 0, 63, 0.18);
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .showcase-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 18px;
    }

    .showcase-card.large {
        grid-column: span 2;
    }

    .showcase-card.stat-card {
        align-items: flex-start;
        justify-content: center;
        min-height: 180px;
    }

    .showcase-label {
        font-weight: 700;
        color: #5d52ff;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }

    .stat-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.72rem;
        color: rgba(0, 0, 0, 0.55);
        margin-bottom: 0.25rem;
        font-weight: 700;
    }

    .hero-showcase-frame {
        position: relative;
        width: min(420px, 100%);
    }

    .hero-showcase-frame img {
        display: block;
    }

    .floating-card {
        position: absolute;
        border-radius: 20px;
        padding: 1.1rem 1.35rem;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(111, 125, 255, 0.2);
        box-shadow: 0 25px 60px rgba(16, 0, 63, 0.15);
        width: 210px;
    }

    .floating-card strong {
        font-size: 1.8rem;
        color: #5d52ff;
        margin: 0.2rem 0;
    }

    .floating-card span,
    .floating-card small {
        color: rgba(0, 0, 0, 0.65);
        display: block;
    }

    .stat-card {
        top: 14px;
        right: -40px;
    }

    .note-card {
        bottom: 10px;
        left: -30px;
        width: 230px;
    }

    .floating-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        background: rgba(111, 125, 255, 0.12);
        font-size: 0.8rem;
        font-weight: 600;
        color: #5d52ff;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .floating-progress {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: rgba(111, 125, 255, 0.15);
        margin: 0.75rem 0;
        overflow: hidden;
    }

    .floating-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(135deg, #ff7ee0, #6f7dff);
    }

    .hero-highlights {
        list-style: none;
        padding: 0;
        margin: 1.75rem 0 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    .hero-highlights li {
        padding: 1.35rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(111, 125, 255, 0.2);
        box-shadow: 0 20px 50px rgba(16, 0, 63, 0.08);
        display: flex;
        gap: 0.9rem;
        align-items: center;
    }

    .hero-highlights li strong {
        display: block;
        font-size: 1.45rem;
        color: #5d52ff;
        margin: 0.15rem 0;
    }

    .hero-highlights li span:not(.highlight-icon) {
        color: rgba(0, 0, 0, 0.6);
    }

    .highlight-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.04em;
        background: linear-gradient(135deg, #ff7ee0, #6f7dff);
        box-shadow: 0 15px 35px rgba(111, 125, 255, 0.4);
    }

    .highlight-icon img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .hero-highlights li:nth-child(2) .highlight-icon {
        background: linear-gradient(135deg, #46c2ff, #6f7dff);
    }

    .hero-highlights li:nth-child(3) .highlight-icon {
        background: linear-gradient(135deg, #23d5ab, #23a6d5);
    }

    .hero-nav {
        margin-top: 1.75rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        justify-content: space-between;
    }

    .hero-nav-label {
        font-weight: 600;
    }

    .hero-nav-chips {
        display: flex;
        gap: 0.65rem;
        flex-wrap: wrap;
    }

    .chip {
        padding: 0.5rem 1.1rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        text-decoration: none;
        color: inherit;
        background: rgba(255, 255, 255, 0.05);
        font-weight: 600;
        transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .chip:hover {
        transform: translateY(-2px);
        border-color: rgba(111, 125, 255, 0.6);
    }

    .portfolio-section {
        margin-top: 4rem;
    }

    .portfolio-intro {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 2.5rem;
    }

    .portfolio-intro-card {
        padding: clamp(1.5rem, 3vw, 2.5rem);
        border-radius: 32px;
        border: 1px solid rgba(111, 125, 255, 0.2);
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.9), rgba(255, 245, 252, 0.92) 45%, rgba(237, 241, 255, 0.9) 100%);
        box-shadow: 0 35px 90px rgba(16, 0, 63, 0.12);
        position: relative;
        overflow: hidden;
    }

    .portfolio-intro-card::after {
        content: "";
        position: absolute;
        inset: 18px;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        pointer-events: auto;
    }

    .portfolio-intro-card::before {
        content: "";
        position: absolute;
        inset: -40% 55% auto -35%;
        height: 140%;
        background: radial-gradient(circle, rgba(111, 125, 255, 0.18), transparent 70%);
        opacity: 0.6;
        z-index: 0;
    }

    .portfolio-intro h2 {
        font-size: clamp(2rem, 2.6vw, 3rem);
        margin: 0.75rem 0;
        position: relative;
        z-index: 1;
    }

    .portfolio-intro p {
        color: rgba(0, 0, 0, 0.65);
        font-size: clamp(1rem, 1.2vw, 1.1rem);
        position: relative;
        z-index: 1;
    }

    .portfolio-intro p a {
        color: #4b2bbf;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
        position: relative;
        z-index: 2;
    }

    .portfolio-intro p a:hover,
    .portfolio-intro p a:focus-visible {
        color: #2e1496;
        text-shadow: 0 6px 16px rgba(75, 43, 191, 0.2);
    }

    .portfolio-instagram-callout {
        max-width: 980px;
        margin: 2.5rem auto 0;
        padding: clamp(1.2rem, 2.4vw, 1.8rem);
        border-radius: 28px;
        border: 1px solid rgba(111, 125, 255, 0.2);
        background: linear-gradient(120deg, rgba(255, 126, 224, 0.14), rgba(111, 125, 255, 0.1));
        box-shadow: 0 22px 60px rgba(16, 0, 63, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .insta-callout-preview {
        flex: 0 0 auto;
        width: clamp(180px, 22vw, 240px);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(16, 0, 63, 0.18);
        border: 1px solid rgba(111, 125, 255, 0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
    }

    .insta-callout-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .insta-callout-preview:hover,
    .insta-callout-preview:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 22px 50px rgba(98, 40, 215, 0.28);
    }

    .insta-callout-content {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        flex: 1 1 320px;
        align-items: flex-start;
    }

    .insta-callout-text {
        max-width: 620px;
    }

    .insta-callout-label {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.7rem;
        font-weight: 700;
        color: #5d52ff;
    }

    .insta-callout-text h3 {
        margin: 0.45rem 0 0.6rem;
        font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    }

    .insta-callout-text p {
        margin: 0;
        color: rgba(0, 0, 0, 0.65);
    }

    .insta-handle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        font-weight: 700;
        color: #2b1055;
        background: linear-gradient(135deg, rgba(249, 206, 52, 0.18), rgba(238, 42, 123, 0.2), rgba(98, 40, 215, 0.2));
        border: 1px solid rgba(238, 42, 123, 0.25);
        box-shadow: 0 10px 20px rgba(238, 42, 123, 0.12);
        letter-spacing: 0.01em;
        white-space: nowrap;
        text-decoration: none;
        animation: insta-handle-float 2.8s ease-in-out infinite;
    }

    @keyframes insta-handle-float {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-3px);
        }
    }

    .insta-callout-cta {
        border: none;
        color: #fff;
        padding: 0.85rem 1.4rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
        box-shadow: 0 18px 40px rgba(238, 42, 123, 0.35), 0 0 0 4px rgba(238, 42, 123, 0.12);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        position: relative;
        overflow: hidden;
    }

    .insta-callout-cta::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
        opacity: 0.8;
        mix-blend-mode: screen;
    }

    .insta-callout-cta-text {
        position: relative;
        z-index: 1;
    }

    .insta-callout-cta-icon {
        position: relative;
        z-index: 1;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }

    .insta-callout-cta-icon img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(1);
    }

    .insta-callout-cta:hover,
    .insta-callout-cta:focus-visible {
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0 22px 50px rgba(98, 40, 215, 0.4), 0 0 0 6px rgba(249, 206, 52, 0.15);
    }

    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.75rem;
    }

    .portfolio-projects-shell {
        margin: -30px;
        scale: 0.92;
        position: relative;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .projects-controls {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
        z-index: 2;
        padding: 0;
    }

    .projects-controls .carousel-btn:first-child {
        margin-left: clamp(-3rem, -5vw, -1.5rem);
    }

    .projects-controls .carousel-btn:last-child {
        margin-right: clamp(-3rem, -5vw, -1.5rem);
    }

    .portfolio-projects-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        position: relative;
        order: 1;
    }

    .portfolio-projects-track {
        display: flex;
        gap: 1.75rem;
    }

    .portfolio-projects-track .portfolio-card {
        flex: 0 0 calc(33.333% - 1.2rem);
        min-width: 280px;
    }

    .reference-carousel-section {
        margin-top: 4rem;
        padding: clamp(1.5rem, 3vw, 2.5rem);
        border-radius: 32px;
        background: linear-gradient(120deg, rgba(255, 126, 224, 0.08), rgba(111, 125, 255, 0.08));
        border: 1px solid rgba(111, 125, 255, 0.2);
        box-shadow: 0 30px 80px rgba(16, 0, 63, 0.08);
    }

    .reference-carousel-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .reference-carousel-header h2 {
        margin: 0.5rem 0;
        font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    }

    .reference-carousel-header p {
        max-width: 620px;
        color: rgba(0, 0, 0, 0.65);
    }

    .carousel-controls {
        display: inline-flex;
        gap: 0.75rem;
    }

    .carousel-btn {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        border: 2px solid #666fec00;
        background: #989dff00;
        filter:  drop-shadow(0px 0px 5px rgba(0, 0, 255, 0.419));
        font-size: 1.55rem;
        font-weight: 600;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        pointer-events: auto;
    }

    .carousel-icon {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .carousel-btn:hover {
        transition: 0.5s;
        box-shadow: 0 1px 35px rgba(121, 90, 207, 0.703);
    }

    .carousel-btn.is-disabled {
        opacity: 0.4;
        pointer-events: none;
        box-shadow: none;
    }

    .reference-carousel-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 2rem;
        scroll-behavior: smooth;
    }

    .reference-carousel-track {
        display: flex;
        gap: 1.5rem;
    }

    .reference-card {
        flex: 0 0 calc(33.333% - 1rem);
        min-width: 260px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(111, 125, 255, 0.18);
        box-shadow: 0 25px 60px rgba(16, 0, 63, 0.08);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        transform: scale(1);
        display: flex;
        flex-direction: column;
    }

    .reference-card:hover {
        transform: scale(0.95);
        box-shadow: 0 30px 70px rgba(16, 0, 63, 0.12);
    }

    .reference-thumb {
        position: relative;
        overflow: visible;
        aspect-ratio: 16 / 9;
    }

    .reference-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .reference-thumb iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

    .reference-duration {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        background: rgba(9, 9, 13, 0.75);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .reference-play {
        position: absolute;
        right: 20px;
        bottom: -62px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
        pointer-events: auto;
        cursor: pointer;
        z-index: 2;
    }

.reference-play::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #5d52ff;
}

    .reference-play-hint {
        position: absolute;
        right: 1.5rem;
        bottom: 0.75rem;
        padding: 0.35rem 0.75rem;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.82);
        color: #fff;
        font-size: 0.85rem;
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 3;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    }

.reference-play-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reference-thumb.is-playing .reference-play {
    opacity: 0;
    visibility: hidden;
}

    .reference-info {
        padding: 1.25rem 1.5rem 1.5rem;
        padding-right: 4.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        flex: 1;
        position: relative;
    }

    .reference-tag {
        font-size: 0.95rem;
        font-weight: 600;
        color: #5d52ff;
        text-shadow: #7a72ff 0px 0px 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .reference-info h3 {
        margin: 0;
        font-size: 1.1rem;
    }

    .reference-info p {
        margin: 0;
        color: rgba(0, 0, 0, 0.65);
    }

    .photo-carousel-section {
        margin-top: 4rem;
        padding: clamp(1.5rem, 3vw, 2.5rem);
        border-radius: 32px;
        background: linear-gradient(120deg, rgba(111, 125, 255, 0.08), rgba(16, 0, 63, 0.04));
        border: 1px solid rgba(111, 125, 255, 0.15);
        box-shadow: 0 25px 70px rgba(16, 0, 63, 0.08);
    }

    .photo-carousel-header {
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .photo-carousel-header h2 {
        margin: 0.5rem 0;
        font-size: clamp(1.8rem, 2.3vw, 2.5rem);
    }

    .photo-carousel-header p {
        max-width: 620px;
        color: rgba(0, 0, 0, 0.7);
    }

    .photo-carousel-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 2rem;
        scroll-behavior: smooth;
    }

    .portfolio-projects-viewport,
    .reference-carousel-viewport,
    .photo-carousel-viewport {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .portfolio-projects-viewport::-webkit-scrollbar,
    .reference-carousel-viewport::-webkit-scrollbar,
    .photo-carousel-viewport::-webkit-scrollbar {
        display: none;
    }

    [data-carousel-track] > * {
        scroll-snap-align: start;
    }

    .photo-carousel-track {
        display: flex;
        gap: 1.5rem;
    }

    .photo-card-wrapper {
        flex: 0 0 calc(33.333% - 1rem);
        min-width: 260px;
        position: relative;
    }

    .photo-card-hint {
        position: absolute;
        top: 56px;
        left: 12px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        color: #6f7dff;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        box-shadow: 0 10px 22px rgba(16, 0, 63, 0.18), 0 0 0 rgba(51, 209, 122, 0.4);
        border: 2px solid transparent;
        z-index: 4;
        pointer-events: none;
        animation: photo-hint-float 2.6s ease-in-out infinite, photo-hint-border 3s ease-in-out infinite;
    }

    .photo-card-hint-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .photo-card-hint-arrow img {
        width: 16px;
        height: 16px;
        max-width: 16px;
        max-height: 16px;
        object-fit: contain;
        display: block;
        filter: drop-shadow(0 6px 12px rgba(16, 0, 63, 0.2));
    }

    @keyframes photo-hint-float {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-4px);
        }
    }

    @keyframes photo-hint-border {
        0%,
        70%,
        100% {
            border-color: transparent;
            box-shadow: 0 10px 22px rgba(16, 0, 63, 0.18), 0 0 0 rgba(51, 209, 122, 0.4);
            color: #6f7dff;
        }
        80%,
        90% {
            border-color: #33d17a;
            box-shadow: 0 10px 22px rgba(16, 0, 63, 0.18), 0 0 18px rgba(51, 209, 122, 0.45);
            color: #33d17a;
        }
    }

    .photo-card {
        display: block;
        width: 100%;
        border: none;
        padding: 0;
        border-radius: 26px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        background: transparent;
        box-shadow: 0 20px 60px rgba(16, 0, 63, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        transform: scale(1);
    }

    .photo-card-cta {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 3;
        padding: 0.4rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #110034;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        box-shadow: 0 12px 30px rgba(16, 0, 63, 0.18);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .photo-card-cta:hover,
    .photo-card-cta:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(16, 0, 63, 0.25);
        outline: none;
        background: #ffffff;
    }

    .photo-card-cta[data-target] {
        background: linear-gradient(120deg, #6f7dff, #c084fc);
        color: #fff;
        box-shadow: 0 18px 35px rgba(131, 93, 255, 0.4);
    }

    .photo-card-cta[data-target]:hover,
    .photo-card-cta[data-target]:focus-visible {
        background: linear-gradient(120deg, #5d6cf7, #ae6df4);
    }

    .photo-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5, 0, 20, 0) 30%, rgba(5, 0, 20, 0.85) 100%);
        opacity: 0.9;
        transition: opacity 0.3s ease;
        z-index: 1;
        pointer-events: none;
    }

    .photo-card img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

    .photo-card-overlay {
        position: absolute;
        inset: auto 0 0 0;
        padding: 1.25rem 1.5rem;
        background: linear-gradient(180deg, transparent, rgba(5, 0, 20, 0.85));
        color: #ffffff;
        text-align: left;
        z-index: 2;
    }

    .photo-card h3 {
        margin: 0.35rem 0 0.25rem;
    }

    .photo-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
    }

    .photo-card:hover {
        transform: scale(0.95);
        box-shadow: 0 30px 80px rgba(16, 0, 63, 0.18);
    }

    .photo-card:hover::before {
        opacity: 0;
    }

    .photo-card:hover img {
        transform: none;
    }

    .photo-modal {
        position: fixed;
        inset: 0;
        background: rgba(5, 0, 20, 0.65);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        z-index: 3000;
    }

    .photo-modal.is-open {
        display: flex;
    }

    .photo-modal-backdrop {
        position: absolute;
        inset: 0;
    }

    .photo-modal-dialog {
        background: #fff;
        border-radius: 28px;
        width: min(960px, 100%);
        max-height: 90vh;
        overflow: hidden;
        position: relative;
        z-index: 1;
        box-shadow: 0 40px 120px rgba(16, 0, 63, 0.35);
    }

    .photo-modal-close {
        position: absolute;
        top: 0.9rem;
        right: 1rem;
        border: none;
        background: rgba(16, 0, 63, 0.039);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.9rem;
        cursor: pointer;
        color: #6a5cec;
        z-index: 2;
    }

    .photo-modal-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
    }

    .photo-modal-image {
        position: relative;
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
        height: 470px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        background: #ffffff00;
        border: 1px solid rgba(16, 0, 63, 0.08);
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(16, 0, 63, 0.15);
    }

    .photo-modal-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(15, 12, 41, 0.7);
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        transition: opacity 0.2s ease, background 0.2s ease;
        z-index: 3;
    }

    .photo-modal-nav-btn[data-photo-modal-prev] {
        left: 0.75rem;
    }

    .photo-modal-nav-btn[data-photo-modal-next] {
        right: 0.75rem;
    }

    .photo-modal-nav-btn:hover {
        background: rgba(15, 12, 41, 0.9);
    }

    .photo-modal-nav-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .photo-modal-image img {
        height: 100%;
        max-height: 470px;
        width: fit-content;
        display: block;
        object-fit: contain;
        border-radius: 18px;
        background: #f7f7fc00;
        box-shadow: 0 12px 40px rgba(16, 0, 63, 0.1);
    }

    .photo-modal-image.is-landscape img {
        width: 100%;
        height: auto;
    }

    .photo-modal-info h3 {
        margin: 0.35rem 0;
    }

    .photo-modal-thumbs {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .photo-thumb {
        border: none;
        background: transparent;
        padding: 0;
        border-radius: 12px;
        overflow: hidden;
        width: 110px;
        height: 70px;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s ease, transform 0.2s ease;
        flex: 0 0 auto;
    }

    .photo-thumb.is-active {
        opacity: 1;
        box-shadow: 0 10px 25px rgba(16, 0, 63, 0.2);
        transform: translateY(-2px);
    }

    .photo-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    body.photo-modal-open {
        overflow: hidden;
    }

    .portfolio-card {
        scale: 0.94;
        padding: 1.75rem;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(103, 90, 255, 0.18);
        box-shadow: 0 30px 80px rgba(16, 0, 63, 0.08);
        backdrop-filter: blur(18px);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .portfolio-card:hover {
        box-shadow: 0 35px 90px rgba(16, 0, 63, 0.496);
    }

    .project-media {
        margin: 0 0 1rem;
        border-radius: 18px;
        overflow: hidden;
    }

    .project-media img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

    .portfolio-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.8rem;
        gap: 0.5rem;
    }

    .portfolio-tag {
        padding: 0.25rem 0.8rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        background: rgba(255, 126, 220, 0.16);
        color: #ff7ee0;
    }

    .portfolio-date {
        font-size: 0.85rem;
    }

    .portfolio-context {
        color: rgba(0, 0, 0, 0.7);
        margin-bottom: 1rem;
    }

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

    .value-list li {
        padding-left: 1.5rem;
        position: relative;
        color: rgba(0, 0, 0, 0.8);
        line-height: 1.4;
    }

    .value-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff7ee0, #6f7dff);
        box-shadow: 0 0 10px rgba(255, 126, 224, 0.6);
    }

    .case-data {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 1rem 0;
        border-top: 1px solid rgba(111, 125, 255, 0.15);
        border-bottom: 1px solid rgba(111, 125, 255, 0.15);
        padding: 1rem 0;
    }

    .deliverables {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .deliverables span {
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        background: rgba(111, 125, 255, 0.08);
        font-size: 0.8rem;
        font-weight: 600;
    }

    .case-impact strong {
        font-size: 1.35rem;
        color: #5d52ff;
        display: block;
    }

    .case-impact span {
        color: rgba(0, 0, 0, 0.65);
    }

    .portfolio-cta {
        margin-top: 4rem;
        border-radius: 32px;
        padding: 2.5rem;
        background: radial-gradient(circle at top left, rgba(255, 126, 224, 0.3), rgba(16, 0, 63, 0.8));
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-between;
        align-items: center;
    }

    .portfolio-cta .cta-actions {
        flex: 0 0 auto;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .portfolio-testimonial {
        margin: 4rem 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
        align-items: stretch;
    }

    .testimonial-quote {
        border-radius: 28px;
        padding: 2rem;
        background: radial-gradient(circle at top left, rgba(255, 126, 224, 0.35), rgba(16, 0, 63, 0.9));
        color: #fff;
    }

    .testimonial-author {
        margin-top: 1.5rem;
        font-weight: 600;
    }

    .testimonial-details {
        border-radius: 24px;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(111, 125, 255, 0.18);
        box-shadow: 0 20px 60px rgba(16, 0, 63, 0.08);
    }

    .testimonial-details ul {
        margin: 1.25rem 0 1.5rem;
        padding-left: 1rem;
        color: rgba(0, 0, 0, 0.8);
        line-height: 1.5;
    }

    .cta-btn.small {
        padding: 0.8rem 1.6rem;
    }

    @media (min-width: 1100px) {
        .portfolio-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

@media (max-width: 900px) {
        .portfolio-page {
            padding-top: 140px;
        }

        .hero-grid {
            gap: 2rem;
        }

        .hero-content {
            flex-basis: 100%;
        }

        .portfolio-cta {
            flex-direction: column;
            text-align: center;
        }

        .portfolio-cta .cta-actions {
            justify-content: center;
        }

        .portfolio-instagram-callout {
            flex-direction: column;
            text-align: center;
            align-items: center;
        }

        .insta-callout-content {
            align-items: center;
        }

        .insta-callout-preview {
            width: min(260px, 80%);
        }

        .insta-callout-text {
            max-width: 100%;
        }

        .insta-callout-cta {
            justify-content: center;
            width: 100%;
        }

        .carousel-controls {
            width: 100%;
            justify-content: flex-end;
        }

        .reference-card,
        .photo-card-wrapper {
            flex: 0 0 calc(50% - 0.75rem);
        }

  

        .projects-controls .carousel-btn:first-child {
            margin-left: -1rem;
        }

        .projects-controls .carousel-btn:last-child {
            margin-right: -1rem;
        }
    }

    @media (max-width: 600px) {
        .portfolio-card {
            scale : 0.8;
            margin: -20px;
        }

        .project-media img {
            height: 180px;
        }

        .cta-btn {
            width: 100%;
        }

        .hero-nav {
            flex-direction: column;
            align-items: flex-start;
        }

        .hero-showcase {
            margin-top: 1rem;
        }

        .projects-controls {
            position: static;
            order: 2;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 1rem;
            pointer-events: auto;
            padding: 0;
        }

        .projects-controls .carousel-btn:first-child,
        .projects-controls .carousel-btn:last-child {
            margin-left: 0;
            margin-right: 0;
        }

        .portfolio-projects-track .portfolio-card {
            flex: 0 0 100%;
            min-width: 100%;
        }

        .stat-card {
            position: static;
            width: 100%;
        }

        .note-card {
            position: static;
            width: 100%;
        }

        .hero-showcase-frame {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
        }

        .floating-card {
            width: 90%;
        }

        .hero-badges {
            justify-content: flex-start;
        }

        .reference-carousel-header {
            flex-direction: column;
        }

        .reference-card,
        .photo-card-wrapper {
            flex: 0 0 100%;
            min-width: 100%;
        }

        .portfolio-projects-track .portfolio-card {
            flex: 0 0 100%;
            min-width: 100%;
        }

        .photo-modal-dialog {
            max-height: 95vh;
        }

        .photo-modal-body {
            padding: 1.5rem;
        }

        .photo-modal-image {
            min-height: 220px;
            max-height: 360px;
        }
    }

    [data-theme="dark"] .portfolio-page {
        color: #f2f2ff;
    }

    [data-theme="dark"] .portfolio-hero {
        background: linear-gradient(120deg, rgba(20, 10, 70, 0.9), rgba(6, 2, 28, 0.95));
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 60px 110px rgba(0, 0, 0, 0.6);
    }

    [data-theme="dark"] .hero-lead,
    [data-theme="dark"] .portfolio-intro p,
    [data-theme="dark"] .portfolio-context,
    [data-theme="dark"] .value-list li,
    [data-theme="dark"] .hero-highlights,
    [data-theme="dark"] .proof-card ul,
    [data-theme="dark"] .proof-card ol {
        color: rgba(242, 242, 255, 0.8);
    }

    [data-theme="dark"] .portfolio-card {
        background: rgba(16, 0, 63, 0.78);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    }

    [data-theme="dark"] .portfolio-intro-card {
        background: radial-gradient(circle at top right, rgba(25, 12, 70, 0.95), rgba(8, 3, 32, 0.92) 45%, rgba(4, 2, 20, 0.95) 100%);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 50px 110px rgba(0, 0, 0, 0.65);
    }

    [data-theme="dark"] .portfolio-intro-card::after {
        border-color: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .portfolio-intro-card::before {
        opacity: 0.25;
    }

    [data-theme="dark"] .portfolio-intro p a {
        color: #c0b5ff;
    }

    [data-theme="dark"] .portfolio-intro p a:hover,
    [data-theme="dark"] .portfolio-intro p a:focus-visible {
        text-shadow: 0 6px 18px rgba(192, 181, 255, 0.25);
    }

[data-theme="dark"] .portfolio-instagram-callout {
    background: linear-gradient(120deg, rgba(16, 0, 63, 0.82), rgba(5, 0, 22, 0.9));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .insta-callout-text p {
    color: rgba(242, 242, 255, 0.8);
}

[data-theme="dark"] .insta-callout-label {
    color: rgba(242, 242, 255, 0.8);
}

[data-theme="dark"] .insta-callout-preview {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .insta-handle {
    color: #fff;
    background: linear-gradient(135deg, rgba(249, 206, 52, 0.28), rgba(238, 42, 123, 0.28), rgba(98, 40, 215, 0.3));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .insta-callout-cta {
    color: #fff;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(238, 42, 123, 0.2);
}

[data-theme="dark"] .testimonial-details {
    background: rgba(8, 2, 32, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}

    [data-theme="dark"] .testimonial-details,
    [data-theme="dark"] .testimonial-details h3,
    [data-theme="dark"] .testimonial-details p {
        color: #f5f5ff;
    }

    [data-theme="dark"] .testimonial-details ul {
        color: rgba(242, 242, 255, 0.85);
    }

    [data-theme="dark"] .testimonial-details a {
        color: #fff;
    }

[data-theme="dark"] .hero-highlights li,
[data-theme="dark"] .case-data {
    border-color: rgba(255, 255, 255, 0.15);
}


[data-theme="dark"] .photo-carousel-section {
    background: linear-gradient(120deg, rgba(16, 0, 63, 0.8), rgba(5, 0, 20, 0.92));
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .photo-carousel-header h2,
[data-theme="dark"] .photo-carousel-header p {
    color: rgba(242, 242, 255, 0.85);
}

[data-theme="dark"] .photo-card {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .photo-card-hint {
    background: rgba(10, 4, 40, 0.92);
    color: #f7f1ff;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .photo-card-overlay {
    background: linear-gradient(180deg, rgba(6, 2, 28, 0) 0%, rgba(6, 2, 28, 0.85) 100%);
}

[data-theme="dark"] .photo-card-overlay h3,
[data-theme="dark"] .photo-card-overlay .reference-tag {
    color: #fff;
}

[data-theme="dark"] .reference-carousel-section {
    background: linear-gradient(120deg, rgba(12, 0, 40, 0.92), rgba(4, 0, 18, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .reference-carousel-header h2,
[data-theme="dark"] .reference-carousel-header p {
    color: rgba(242, 242, 255, 0.85);
}

[data-theme="dark"] .reference-card {
    background: rgba(16, 0, 63, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 90px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .reference-info h3,
[data-theme="dark"] .reference-info p {
    color: rgba(248, 248, 255, 0.9);
}

[data-theme="dark"] .reference-tag,
[data-theme="dark"] .reference-duration {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

[data-theme="dark"] .reference-info {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .photo-card-cta {
    background: rgba(6, 2, 28, 0.88);
    color: #f8f8ff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .photo-modal-dialog {
    background: rgb(214, 207, 255);
    color: #f4f4ff;
}

[data-theme="dark"] .photo-modal-info p {
    color: rgba(242, 242, 255, 0.85);
}

[data-theme="dark"] .chip {
    border-color: rgba(255, 255, 255, 0.3);
    color: #f2f2ff;
}

[data-theme="dark"] .stat-eyebrow,
[data-theme="dark"] .hero-highlights li span,
[data-theme="dark"] .hero-trust,
[data-theme="dark"] .case-impact span,
[data-theme="dark"] .hero-trust-copy span,
[data-theme="dark"] .hero-meta-note {
    color: rgba(242, 242, 255, 0.7);
}

    [data-theme="dark"] .project-media img {
        filter: saturate(1.1) brightness(0.9);
    }

    [data-theme="dark"] .portfolio-hero h1,
    [data-theme="dark"] .portfolio-intro h2 {
        color: #fff;
    }

    [data-theme="dark"] .hero-season-label,
    [data-theme="dark"] .hero-badge {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .badge-caption {
        color: rgba(242, 242, 255, 0.85);
    }

    [data-theme="dark"] .portfolio-hero .cta-btn.ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.08);
    }

    [data-theme="dark"] .floating-card {
        background: rgba(3, 1, 22, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    }

    [data-theme="dark"] .highlight-icon {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65);
    }
.gestionback-to-top {
    margin-top: 100px !important;
    margin-bottom: -70px !important;
}
.notinverh {
    filter: none !important;
}