.home-portfolio-area {
    background: #fff;
}

.home-portfolio-area .portfolio-container {
    max-width: 1660px;
    padding-right: 24px;
    padding-left: 24px;
}

.portfolio-card {
    --portfolio-accent: #ff6434;
    --portfolio-tint: #ffe7df;
    --portfolio-glow: 255, 100, 52;
    position: relative;
    isolation: isolate;
    height: 100%;
    overflow: hidden;
    border: 1px solid #edf0f3;
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 12px 38px rgba(15, 23, 42, .07),
        0 0 24px rgba(var(--portfolio-glow), .10);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-card:hover {
        transform: translateY(-8px);
        border-color: var(--portfolio-accent);
        box-shadow:
            0 24px 48px rgba(15, 23, 42, .15),
            0 0 36px rgba(var(--portfolio-glow), .28),
            0 0 70px rgba(var(--portfolio-glow), .10);
    }
}

.portfolio-card:focus-within {
    border-color: var(--portfolio-accent);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, .15),
        0 0 36px rgba(var(--portfolio-glow), .28);
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-card { transition: none; }
    .portfolio-card:hover { transform: none; }
}

.portfolio-card--franklin {
    --portfolio-accent: #1688f5;
    --portfolio-tint: #dcedfe;
    --portfolio-glow: 22, 136, 245;
}

.portfolio-card--gayatri {
    --portfolio-accent: #dc242b;
    --portfolio-tint: #f8dfe0;
    --portfolio-glow: 220, 36, 43;
}

.portfolio-card--blue { --portfolio-glow: 8, 123, 240; }
.portfolio-card--green { --portfolio-glow: 10, 167, 122; }
.portfolio-card--purple { --portfolio-glow: 120, 72, 220; }
.portfolio-card--amber { --portfolio-glow: 242, 138, 20; }
.portfolio-card--pink { --portfolio-glow: 231, 67, 139; }

.portfolio-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 19px 20px;
    background: #0b182a;
}

.portfolio-card--oranz .portfolio-preview {
    background: #1d1719;
}

.portfolio-preview::before {
    position: absolute;
    z-index: -1;
    top: 4px;
    right: 18px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: #133659;
    content: "";
}

.portfolio-card--oranz .portfolio-preview::before {
    background: #55291f;
}

.portfolio-browser {
    overflow: hidden;
    border: 5px solid #f6f7f8;
    border-radius: 11px;
    background: #e5e9ee;
    box-shadow: 4px 6px 0 rgba(0, 0, 0, .3);
}

.portfolio-browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 14px;
    padding: 0 5px;
}

.portfolio-browser-dots {
    display: flex;
    gap: 3px;
}

.portfolio-browser-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff6058;
}

.portfolio-browser-dots span:nth-child(2) { background: #ffbd2e; }
.portfolio-browser-dots span:nth-child(3) { background: #28c840; }

.portfolio-browser-address {
    color: #7b8796;
    font-size: 6px;
    line-height: 1;
}

.portfolio-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}

.portfolio-info {
    position: relative;
    z-index: 1;
    padding: 20px 22px 48px;
}

.portfolio-info::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 92% 8%, rgba(var(--portfolio-glow), .14), transparent 38%);
    opacity: .65;
    transition: opacity .3s ease;
}

.portfolio-card:hover .portfolio-info::before,
.portfolio-card:focus-within .portfolio-info::before {
    opacity: 1;
}

.portfolio-info .portfolio-category {
    margin: 0 0 7px;
    color: var(--portfolio-accent);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.1px;
    line-height: 1.5;
    text-transform: uppercase;
}

.portfolio-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.portfolio-icon {
    display: inline-flex;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--portfolio-tint);
    color: var(--portfolio-accent);
    font-size: 21px;
}

.portfolio-heading h3 {
    margin: 0;
    color: #101523;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.portfolio-heading h3 a {
    color: inherit;
}

.portfolio-heading h3 a:hover {
    color: var(--portfolio-accent);
    text-shadow: 0 0 18px rgba(var(--portfolio-glow), .28);
}

.portfolio-heading h3 a:focus-visible {
    outline: 2px solid var(--portfolio-accent);
    outline-offset: 4px;
}

.portfolio-info .portfolio-description {
    margin: 0;
    color: #6c7e9b;
    font-size: 18px;
    line-height: 1.5;
}

.portfolio-visit {
    position: absolute;
    right: 22px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #e3e6ec;
    border-radius: 50%;
    background: #fff;
    color: #101523;
    font-size: 20px;
    transition: background .2s, color .2s;
}

.portfolio-visit:hover,
.portfolio-visit:focus-visible {
    background: var(--portfolio-accent);
    color: #fff;
}

.portfolio-visit:focus-visible {
    outline: 3px solid var(--portfolio-accent);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .home-portfolio-area .portfolio-container { padding-inline: 16px; }
    .portfolio-heading h3 { font-size: 22px; }
    .portfolio-info .portfolio-description { font-size: 17px; }
    .portfolio-preview { padding: 16px; }
}