:root {

    --bg: #070707;

    --surface: #111111;

    --surface-2: #171717;

    --text: #f5f5f5;

    --muted: #8d8d8d;

    --muted-2: #666;

    --border: rgba(255, 255, 255, 0.09);

    --border-hover: rgba(255, 255, 255, 0.20);

    --accent: #ff4d67;

    --accent-2: #735cff;

    --radius: 22px;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: var(--text);

    background:

        radial-gradient(
            circle at 80% -10%,
            rgba(115, 92, 255, 0.20),
            transparent 35%
        ),

        radial-gradient(
            circle at 0% 30%,
            rgba(255, 77, 103, 0.12),
            transparent 30%
        ),

        var(--bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


body.modal-open {
    overflow: hidden;
}


img {
    max-width: 100%;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   HERO
========================================================= */

.hero {

/*    min-height: 76vh;*/

    display: flex;

    align-items: center;

    padding:
        30px
        7vw
        30px;
        
        

}


.hero-inner {

    width: 100%;

    max-width: 950px;

}


.eyebrow {


    display: flex;

    align-items: center;

    gap: 10px;

    color: #aaa;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 22px;

}


.eyebrow::before {

    content: "";

    width: 30px;

    height: 1px;

    flex: 0 0 30px;

    background: var(--accent);

}


.hero h1 {

    margin: 0;

    font-size:
        clamp(52px, 9vw, 115px);

    line-height: 0.88;

    letter-spacing: -6px;

    font-weight: 800;

}


.hero h1 span {

    color: transparent;

    -webkit-text-stroke: 1px #fff;

}


.hero p {

    max-width: 650px;

    margin: 32px 0 0;

    color: var(--muted);

    font-size:
        clamp(16px, 2vw, 20px);

    line-height: 1.7;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 32px;

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 21px;

    border:
        1px solid
        var(--border);

    border-radius: 100px;

    color: white;

    background:
        rgba(255, 255, 255, 0.05);

    text-decoration: none;

    font-size: 14px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;

}


.button:hover {

    transform: translateY(-2px);

    background: white;

    color: black;

    border-color: white;

}


.button-light {

    color: black;

    background: white;

    border-color: white;

}


.button-light:hover {

    background: transparent;

    color: white;

}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio {

    padding:
        40px
        7vw
        110px;

}


.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

}


.section-heading h2 {

    margin: 0;

    font-size:
        clamp(34px, 5vw, 58px);

    line-height: 0.95;

    letter-spacing: -3px;

}


.project-count {

    flex: 0 0 auto;

    color: var(--muted);

    font-size: 14px;

}


/* =========================================================
   FILTERS
========================================================= */

.filters {

    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    margin-bottom: 30px;

    padding-bottom: 10px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

}


.filters::-webkit-scrollbar {
    display: none;
}


.filter {

    flex: 0 0 auto;

    padding: 10px 18px;

    border:
        1px solid
        var(--border);

    border-radius: 100px;

    color: #999;

    background:
        rgba(255, 255, 255, 0.04);

    text-decoration: none;

    font-size: 14px;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.filter:hover {

    color: white;

    border-color:
        rgba(255, 255, 255, 0.2);

}


.filter.active {

    color: #000;

    background: white;

    border-color: white;

}


/* =========================================================
   PORTFOLIO GRID
========================================================= */

/*
 * We use CSS Grid here rather than forcing the entire
 * collection into equal-height rows.
 *
 * Each card has its own aspect ratio:
 *
 * horizontal = 16:10
 * vertical   = 9:16
 *
 * This keeps Shorts narrow instead of giving them
 * a wide horizontal parent.
 */

.portfolio-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: start;

    gap: 18px;

}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {
    position: relative;
    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/*
 * LANDSCAPE PROJECTS
 * Take two columns
 */

.project-card:has(.project-preview.horizontal) {
    grid-column: span 2;
}


/*
 * SHORTS
 * Stay at one column
 */

.project-card:has(.project-preview.vertical) {
    grid-column: span 1;
}


.project-card:hover {

    transform: translateY(-5px);

    background: var(--surface-2);

    border-color: var(--border-hover);

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.25);

}


/*
 * Featured projects get a slightly stronger border.
 *
 * IMPORTANT:
 * We do NOT make them span 2 columns.
 * That keeps vertical Shorts properly sized.
 */

.project-card.is-featured {

    border-color:
        rgba(255, 255, 255, 0.15);

}


.project-card.is-featured:hover {

    border-color:
        rgba(255, 255, 255, 0.28);

}


/* =========================================================
   VIDEO PREVIEW
========================================================= */

.project-preview {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #050505;

}


/*
 * LANDSCAPE
 */

.project-preview.horizontal {

    aspect-ratio: 16 / 10;

}


/*
 * YOUTUBE SHORTS / VERTICAL
 *
 * IMPORTANT:
 *
 * No max-height.
 * No fixed width.
 *
 * The card column determines the width.
 * 9:16 determines the height.
 */

.project-preview.vertical {

    aspect-ratio: 9 / 16;

}


/* =========================================================
   THUMBNAIL
========================================================= */

.project-preview img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.55s
        cubic-bezier(.2,.7,.2,1);

}


.project-card:hover
.project-preview img {

    transform: scale(1.045);

}


/* =========================================================
   NO THUMBNAIL
========================================================= */

.no-thumbnail {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(115, 92, 255, 0.30),
            transparent 50%
        ),

        linear-gradient(
            135deg,
            #141414,
            #080808
        );

}


.no-thumbnail::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    filter: blur(2px);

}


.no-thumbnail span {

    position: relative;

    z-index: 1;

    color: #555;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}


/* =========================================================
   PREVIEW GRADIENT
========================================================= */

.preview-gradient {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0, 0, 0, 0.65) 100%
        );

}


/* =========================================================
   PLAY BUTTON
========================================================= */

.play-button {

    position: absolute;

    inset: 0;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}


.play-button::before {

    content: "";

    position: absolute;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.45);

    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


.play-button::after {

    content: "▶";

    position: absolute;

    margin-left: 3px;

    color: #000;

    font-size: 14px;

    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


.project-card:hover
.play-button::before,
.project-card:hover
.play-button::after {

    opacity: 1;

    transform: scale(1);

}


/*
 * External web projects
 */

.project-card[data-platform="web"]
.play-button::after {

    content: "↗";

    margin-left: 0;

    font-size: 21px;

}


/* =========================================================
   PLATFORM BADGE
========================================================= */

.platform-badge {

    position: absolute;

    left: 14px;

    bottom: 14px;

    z-index: 5;

    padding:
        6px
        9px;

    border-radius: 8px;

    color: white;

    background:
        rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 1.5px;

}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {

    padding:
        17px
        18px
        19px;

}


.project-info h3 {

    margin: 0;

    color: var(--text);

    font-size: 17px;

    line-height: 1.25;

    font-weight: 650;

}


.project-info p {

    margin:
        6px
        0
        0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.4;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {

    grid-column: 1 / -1;

    padding:
        80px
        20px;

    color: var(--muted);

    text-align: center;

    line-height: 1.7;

}


.empty-state a {

    display: inline-block;

    margin-top: 10px;

    color: white;

}


/* =========================================================
   VIDEO MODAL
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.modal.show {

    display: flex;

}


.modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.94);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}


/* =========================================================
   MODAL CONTAINER
========================================================= */

.modal-container {

    position: relative;

    z-index: 2;

    width:
        min(1100px, 96vw);

    max-height: 94vh;

}


/* =========================================================
   LANDSCAPE PLAYER
========================================================= */

.modal-player {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    border-radius: 16px;

}


/* =========================================================
   VERTICAL PLAYER
========================================================= */

.modal-player.vertical {

    width:
        min(400px, 82vw);

    height:
        min(72vh, 650px);

    aspect-ratio: 9 / 16;

    margin:
        0
        auto;

}


/* =========================================================
   IFRAME
========================================================= */

.modal-player iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

}


/* =========================================================
   MODAL CLOSE
========================================================= */

.modal-close {

    position: absolute;

    right: 0;

    bottom:
        calc(100% + 12px);

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    color: white;

    background:
        rgba(255, 255, 255, 0.1);

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.modal-close:hover {

    background: white;

    color: black;

    transform: rotate(90deg);

}


/* =========================================================
   MODAL INFO
========================================================= */

.modal-info {

    margin-top: 12px;

    color: #aaa;

    font-size: 14px;

    text-align: center;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        45px
        7vw;

    border-top:
        1px solid
        var(--border);

    color: var(--muted-2);

    font-size: 13px;

}


footer strong {

    color: white;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero {

        padding-left: 6vw;

        padding-right: 6vw;

    }


    .portfolio {

        padding-left: 6vw;

        padding-right: 6vw;

    }


    .portfolio-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 15px;

    }


    footer {

        padding-left: 6vw;

        padding-right: 6vw;

    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 750px) {

    .hero {

        min-height: auto;
        padding:
            70px
            6vw
            55px;

    }


    .hero h1 {

        font-size: clamp(42px, 13vw, 64px);

        line-height: 0.95;

        letter-spacing: -2.5px;

        word-break: normal;

        overflow-wrap: normal;

    }
    
     .hero h1 span {
        display: block;

        margin-top: 5px;

        -webkit-text-stroke: 0.7px #fff;
    }
    
    .hero p {
        max-width: 100%;

        margin-top: 26px;

        font-size: 15px;

        line-height: 1.65;
    }


    .portfolio {

        padding:
            40px
            6vw
            80px;

    }
	

    .section-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    .portfolio-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;

    }
	
	.project-card:has(.project-preview.horizontal) {
        grid-column: span 2;
    }

    .project-card:has(.project-preview.vertical) {
        grid-column: span 1;
    }

    .project-info {

        padding:
            14px;

    }


    .project-info h3 {

        font-size: 15px;

    }


    .project-info p {

        font-size: 12px;

    }


    .platform-badge {

        left: 10px;

        bottom: 10px;

        padding:
            5px
            7px;

        font-size: 8px;

    }


    .play-button::before {

        width: 48px;

        height: 48px;

    }


    .hero-actions {

        margin-top: 28px;

    }


    .button {

        padding:
            13px
            17px;

    }


    footer {

        padding:
            35px
            6vw;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

    .hero h1 {
        font-size: 48px;
        line-height: 0.98;
        letter-spacing: -2px;
    }

    .hero h1 span {
        margin-top: 8px;
    }


    .hero h1 {

        font-size: 52px;

        letter-spacing: -4px;

    }


    .hero p {

        margin-top: 25px;

        font-size: 15px;

        line-height: 1.6;

    }


    .portfolio {

        padding:
            35px
            5vw
            70px;

    }


    .portfolio-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;

    }


    .project-card {

        border-radius: 15px;

    }


    .project-info {

        padding:
            11px
            12px
            13px;

    }


    .project-info h3 {

        font-size: 13px;

    }


    .project-info p {

        margin-top: 4px;

        font-size: 10px;

    }


    .platform-badge {

        left: 8px;

        bottom: 8px;

        padding:
            5px
            6px;

        border-radius: 6px;

        font-size: 7px;

        letter-spacing: 1px;

    }


    /*
     * Always show play button slightly on mobile
     * because there is no hover state.
     */

    .play-button::before {

        width: 42px;

        height: 42px;

        opacity: 0.95;

        transform: scale(0.8);

    }


    .play-button::after {

        opacity: 1;

        transform: scale(0.8);

        font-size: 11px;

    }


    /*
     * Vertical modal on small phones.
     */

    .modal {

        padding: 12px;

    }


    .modal-player.vertical {

        width:
            min(360px, 88vw);

        height:
            min(72vh, 600px);

    }


    .modal-close {

        right: 0;

        bottom:
            calc(100% + 8px);

        width: 38px;

        height: 38px;

        font-size: 21px;

    }


    footer {

        display: block;

        padding:
            30px
            5vw;

    }


    footer div + div {

        margin-top: 8px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;

    }

}