:root {

    --background: #0d0f0f;
    --surface: #151919;
    --surface-light: #1d2323;

    --text: #ededdf;
    --muted: #9ca39c;

    --accent: #9ad36a;
    --accent-dark: #6fa746;

    --border: rgba(154,211,106,0.18);

    --max-width: 1100px;

}



/* ------------------------------
   RESET
------------------------------ */


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

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at top,
            rgba(154,211,106,0.08),
            transparent 40%
        ),
        var(--background);

    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.6;

}



img {

    max-width: 100%;

    display: block;

}



a {

    color: var(--accent);

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;

}


a:hover {

    color: white;

}




/* ------------------------------
   HEADER
------------------------------ */


.site-header {

    width: 100%;

    max-width: var(--max-width);

    margin: auto;

    padding: 1.5rem 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}



.brand img {

    width: 65px;
    height: 65px;

}



.navigation {

    display: flex;

    gap: 2rem;

}



.navigation a {

    color: var(--muted);

    font-size: .95rem;

    letter-spacing: .05em;

    text-transform: uppercase;

}



.navigation a:hover,
.navigation .active {

    color: var(--accent);

}





/* ------------------------------
   MAIN
------------------------------ */


main {

    max-width: var(--max-width);

    margin:auto;

    padding:0 1.5rem;

}




/* ------------------------------
   HERO
------------------------------ */


.hero {

    min-height: 75vh;

    display:flex;

    align-items:center;

    padding:
        5rem
        0;

}



.hero.small {

    min-height:auto;

    padding:
        4rem
        0;

}



.hero-content {

    max-width:850px;

}



.eyebrow {

    color:var(--accent);

    font-family:
        "Courier New",
        monospace;

    letter-spacing:
        .25em;

    font-size:.8rem;

    margin-bottom:1rem;

}



h1 {

    font-size:
        clamp(
            2.5rem,
            6vw,
            4.8rem
        );

    line-height:1.05;

    margin:

        0
        1.5rem
        1.5rem
        0;

    letter-spacing:-.03em;

}



h2 {

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.6rem
        );

    margin-bottom:1rem;

}



h3 {

    font-size:1.4rem;

}



p {

    color:var(--muted);

    max-width:700px;

}



.hero-text {

    font-size:1.25rem;

    max-width:650px;

}





/* ------------------------------
   BUTTON
------------------------------ */


.button {

    display:inline-block;

    margin-top:1.5rem;

    background:var(--accent);

    color:#111;

    padding:
        .9rem
        1.8rem;

    border-radius:6px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

}



.button:hover {

    background:white;

    color:#111;

}





/* ------------------------------
   SECTIONS
------------------------------ */


.section {

    padding:
        4rem
        0;

}



.section-header {

    margin-bottom:2rem;

}



.feature-card {


    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-light)
        );


    border:

        1px solid

        var(--border);


    border-radius:14px;


    padding:3rem;


}



.two-column {

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:3rem;

}



.feature-card.with-image {

    display:flex;

    align-items:center;

    gap:2.5rem;

}



.feature-card.with-image > div {

    flex:1;

}



.feature-image {

    width:45%;

    max-width:420px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    object-fit:cover;

    flex-shrink:0;

}





/* ------------------------------
   CARDS
------------------------------ */


.cards {

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:1.5rem;

}



.card {

    background:

        var(--surface);

    border:

        1px solid

        rgba(255,255,255,.08);


    padding:2rem;

    border-radius:12px;


}



.card:hover {

    border-color:

        var(--border);

}



.about-me {

    display:flex;

    align-items:center;

    gap:2rem;

}



.about-me .avatar {

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}



.project-preview {

    display:flex;

    align-items:center;

    gap:2rem;

}



.project-thumb {

    width:160px;

    height:160px;

    border-radius:12px;

    object-fit:cover;

    flex-shrink:0;

}





/* ------------------------------
   CTA
------------------------------ */


.cta {

    margin:

        3rem
        0;


    padding:

        3rem;


    background:

        var(--surface);


    border-radius:12px;


    border:

        1px solid

        rgba(255,255,255,.08);

}





/* ------------------------------
   VIDEO HERO
------------------------------ */


.hero-video {

    position:relative;

    width:100vw;

    left:50%;

    right:50%;

    margin-left:-50vw;

    margin-right:-50vw;

    min-height:75vh;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    border-radius:0;

}



.hero-video .video-bg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}



.hero-video .video-bg iframe {

    position:absolute;

    top:50%;

    left:50%;

    width:177.77vh;

    min-width:100%;

    height:100vw;

    min-height:100%;

    transform:translate(-50%,-50%);

    pointer-events:none;

}



.hero-video .video-scrim {

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            0deg,

            rgba(13,15,15,.97) 0%,

            rgba(13,15,15,.75) 30%,

            rgba(13,15,15,.35) 65%,

            rgba(13,15,15,.55) 100%

        );

}



.hero-video .hero-content {

    position:relative;

    z-index:2;

    width:100%;

    max-width:calc(var(--max-width) + 3rem);

    margin:0 auto;

    padding:3rem 1.5rem 4rem;

    box-sizing:border-box;

}



.hero-actions {

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    align-items:center;

    margin-top:1.5rem;

}



/* ------------------------------
   IMAGE HERO
------------------------------ */


.hero-image {

    position:relative;

    width:100vw;

    left:50%;

    right:50%;

    margin-left:-50vw;

    margin-right:-50vw;

    min-height:75vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}



.hero-image .image-bg {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}



.hero-image .image-bg img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.hero-image .image-scrim {

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            100deg,

            rgba(13,15,15,.95) 0%,

            rgba(13,15,15,.8) 35%,

            rgba(13,15,15,.4) 75%,

            rgba(13,15,15,.6) 100%

        );

}



.hero-image .hero-content {

    position:relative;

    z-index:2;

    width:100%;

    max-width:calc(var(--max-width) + 3rem);

    margin:0 auto;

    padding:3rem 1.5rem;

    box-sizing:border-box;

}



.hero-actions .button {

    margin-top:0;

}



.watch-note {

    color:var(--muted);

    font-size:.85rem;

    margin-top:.75rem;

    max-width:none;

}





/* ------------------------------
   BUTTON VARIANTS
------------------------------ */


.button.secondary {

    background:transparent;

    color:var(--text);

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

}



.button.secondary:hover {

    background:var(--surface-light);

    color:var(--accent);

}



.button.small {

    padding:.6rem 1.2rem;

    font-size:.8rem;

    margin-top:0;

}





/* ------------------------------
   TAGS
------------------------------ */


.tag-list {

    display:flex;

    flex-wrap:wrap;

    gap:.6rem;

    margin:1rem 0 0;

}



.tag {

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

    color:var(--accent);

    font-family:"Courier New",monospace;

    font-size:.75rem;

    letter-spacing:.05em;

    text-transform:uppercase;

    padding:.4rem .8rem;

    border-radius:999px;

}





/* ------------------------------
   GALLERY
------------------------------ */


.gallery {

    display:grid;

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

    gap:1.5rem;

}



.gallery-item {

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;

    height:260px;

}



.gallery-item img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}





/* ------------------------------
   WISHLIST BANNER
------------------------------ */


.wishlist-banner {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:1.5rem;

}



.wishlist-banner p {

    max-width:520px;

    margin:0;

}



.status-pill {

    display:inline-block;

    background:rgba(154,211,106,.12);

    color:var(--accent);

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

    font-family:"Courier New",monospace;

    font-size:.75rem;

    letter-spacing:.05em;

    text-transform:uppercase;

    padding:.35rem .75rem;

    border-radius:999px;

    margin-bottom:1rem;

}





/* ------------------------------
   FOOTER
------------------------------ */


footer {

    max-width:var(--max-width);

    margin:auto;

    padding:

        3rem
        1.5rem;

    text-align:center;

}



footer p {

    margin:auto;

    color:#666;

}



.muted {

    font-size:.9rem;

    color:#777;

}




/* ------------------------------
   MOBILE
------------------------------ */


@media(max-width:800px){


.site-header {

    flex-direction:

        column;

    gap:1.5rem;

}



.navigation {

    gap:1rem;

    flex-wrap:wrap;

    justify-content:center;

}



.hero {

    min-height:auto;

    padding:

        3rem
        0;

}



.two-column,
.cards,
.gallery {

    grid-template-columns:

        1fr;

}



.feature-card,
.card,
.cta {

    padding:1.5rem;

}



.hero-video,
.hero-image {

    min-height:60vh;

}



.gallery-item {

    height:280px;

}



.wishlist-banner {

    flex-direction:column;

    align-items:flex-start;

}



.about-me,
.project-preview,
.feature-card.with-image {

    flex-direction:column;

    text-align:center;

}



.feature-image {

    width:100%;

    max-width:none;

}


}



@media(max-width:450px){


.brand img {

    width:150px;

    height:150px;

}



.navigation a {

    font-size:.8rem;

}


}