:root {
    --bg: #070707;
    --bg2: #0d0d0d;
    --card: #121212;

    --gold: #d6b36a;
    --gold-light: #f1d99b;

    --white: #ffffff;
    --muted: #999999;

    --line: rgba(255,255,255,0.10);
}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ================= NAVBAR ================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 7%;

    background: rgba(7,7,7,0.82);

    backdrop-filter: blur(18px);

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

    z-index: 1000;
}


.logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
}

.logo span,
.footer-logo span {
    color: var(--gold);
}


nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav a {
    color: #aaa;
    font-size: 13px;
    transition: 0.3s;
}

nav a:hover {
    color: var(--gold);
}

.nav-cta {
    border:
        1px solid var(--gold);

    color:
        var(--gold) !important;

    padding:
        11px 20px;
}


.menu-btn {
    display: none;

    background: none;

    color: white;

    border: none;

    font-size: 25px;

    cursor: pointer;
}


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

.hero {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    align-items: center;

    gap: 70px;

    padding:
        150px 8% 100px;

    background:

        radial-gradient(
            circle at 80% 40%,
            rgba(214,179,106,0.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #070707,
            #111
        );
}


.hero-content {
    position: relative;
    z-index: 2;
}


.eyebrow {
    color: var(--gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 22px;
}


.hero h1 {
    font-family:
        "Playfair Display", serif;

    font-size:
        clamp(48px, 7vw, 92px);

    line-height:
        0.98;

    max-width:
        850px;
}


.hero h1 span {
    color:
        var(--gold);

    display:
        block;
}


.hero-text {
    color:
        var(--muted);

    line-height:
        1.8;

    max-width:
        610px;

    margin:
        30px 0;
}


.hero-buttons {
    display:
        flex;

    gap:
        15px;

    flex-wrap:
        wrap;
}


.btn {
    display:
        inline-block;

    padding:
        15px 25px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        0.3s;
}


.primary {
    background:
        var(--gold);

    color:
        #080808;
}


.primary:hover {
    background:
        var(--gold-light);

    transform:
        translateY(-3px);
}


.secondary {
    border:
        1px solid var(--line);
}


.secondary:hover {
    border-color:
        var(--gold);

    color:
        var(--gold);
}


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

.hero-card {
    position:
        relative;

    min-height:
        530px;

    overflow:
        hidden;

    border:
        1px solid rgba(214,179,106,0.35);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.6);

    animation:
        floating 5s ease-in-out infinite;
}


.hero-card img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.8s ease;
}


.hero-card:hover img {
    transform:
        scale(1.06);
}


.hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.93)
        );
}


.hero-card-content {
    position:
        absolute;

    inset:
        0;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;
}


.card-top {
    position:
        absolute;

    top:
        35px;

    left:
        35px;

    right:
        35px;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        11px;

    letter-spacing:
        2px;
}


.card-line {
    height:
        1px;

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

    margin-bottom:
        30px;
}


.hero-card h2 {
    font-family:
        "Playfair Display", serif;

    font-size:
        48px;

    line-height:
        1;
}


.hero-card em {
    color:
        var(--gold);

    font-style:
        normal;
}


.hero-card p {
    color:
        #ccc;

    margin-top:
        20px;

    font-size:
        12px;
}


@keyframes floating {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }
}


/* ================= TRUST ================= */

.trust {
    border-top:
        1px solid var(--line);

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

    padding:
        25px 8%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;
}


.trust p {
    font-size:
        11px;

    color:
        var(--muted);

    letter-spacing:
        2px;
}


.trust div {
    display:
        flex;

    gap:
        35px;
}


.trust span {
    font-size:
        11px;

    letter-spacing:
        2px;

    color:
        var(--gold);
}


/* ================= GENERAL SECTIONS ================= */

.section {
    padding:
        120px 8%;
}


.section-heading {
    max-width:
        750px;

    margin-bottom:
        60px;
}


.section-heading h2 {
    font-family:
        "Playfair Display", serif;

    font-size:
        clamp(40px,6vw,70px);

    line-height:
        1;
}


.section-heading h2 span {
    color:
        var(--gold);

    display:
        block;
}


.center {
    text-align:
        center;

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ================================================= */
/* ================= SERVICES ====================== */
/* ================================================= */

.services-grid {
    display:
        grid;

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

    gap:
        20px;
}


.service-card {
    position:
        relative;

    min-height:
        480px;

    overflow:
        hidden;

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

    background:
        #111;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}


.service-card > img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform 0.8s ease;
}


.service-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.10),
            rgba(0,0,0,0.42) 40%,
            rgba(0,0,0,0.97) 100%
        );

    z-index:
        1;
}


.service-content {
    position:
        absolute;

    inset:
        0;

    padding:
        32px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    z-index:
        2;
}


.number {
    position:
        absolute;

    top:
        30px;

    left:
        32px;

    color:
        var(--gold);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.service-icon {
    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    border:
        1px solid rgba(214,179,106,0.6);

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

    color:
        var(--gold);

    font-size:
        24px;

    backdrop-filter:
        blur(8px);
}


.service-content h3 {
    font-family:
        "Playfair Display", serif;

    font-size:
        30px;

    margin-bottom:
        12px;
}


.service-content p {
    color:
        #ddd;

    line-height:
        1.7;

    font-size:
        13px;

    max-width:
        390px;

    margin-bottom:
        20px;
}


.service-content a {
    color:
        var(--gold);

    font-size:
        12px;

    font-weight:
        700;
}


.service-card:hover {
    transform:
        translateY(-10px);

    border-color:
        rgba(214,179,106,0.7);
}


.service-card:hover > img {
    transform:
        scale(1.08);
}


.service-card.featured {
    border-color:
        rgba(214,179,106,0.5);
}


/* ================= WORK ================= */

.work-section {
    background:
        var(--bg2);
}


.work-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;
}


.project {
    min-height:
        430px;

    position:
        relative;

    overflow:
        hidden;

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

    background:
        #111;
}


.project-large {
    grid-column:
        span 2;

    min-height:
        500px;
}


.project img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.8s ease;
}


.project:hover img {
    transform:
        scale(1.08);
}


.project::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.95),
            rgba(0,0,0,0.05) 75%
        );
}


.project-overlay {
    position:
        absolute;

    left:
        30px;

    right:
        30px;

    bottom:
        30px;

    z-index:
        3;
}


.project-overlay p {
    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.project-overlay h3 {
    font-family:
        "Playfair Display", serif;

    font-size:
        34px;

    margin:
        8px 0;
}


.project-overlay span {
    color:
        #ccc;

    font-size:
        12px;
}


/* ================= PROCESS ================= */

.process-section {
    background:
        #090909;
}


.process-grid {
    display:
        grid;

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

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

    border-left:
        1px solid var(--line);
}


.process-item {
    min-height:
        250px;

    padding:
        30px;

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

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

    transition:
        0.3s;
}


.process-item:hover {
    background:
        #111;
}


.process-item > span {
    color:
        var(--gold);

    font-size:
        12px;

    letter-spacing:
        2px;
}


.process-item h3 {
    font-family:
        "Playfair Display", serif;

    font-size:
        28px;

    margin:
        50px 0 15px;
}


.process-item p {
    color:
        var(--muted);

    line-height:
        1.7;

    font-size:
        13px;
}


/* ================= PRICING ================= */

.pricing-section {
    background:
        #0d0d0d;
}


.pricing-grid {
    display:
        grid;

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

    gap:
        20px;
}


.price-card {
    position:
        relative;

    background:
        var(--card);

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

    padding:
        40px 30px;
}


.price-card.popular {
    border-color:
        var(--gold);

    transform:
        scale(1.03);
}


.popular-label {
    position:
        absolute;

    top:
        0;

    right:
        0;

    background:
        var(--gold);

    color:
        #000;

    padding:
        8px 14px;

    font-size:
        9px;

    font-weight:
        800;
}


.plan {
    color:
        var(--gold);

    font-size:
        11px;

    letter-spacing:
        2px;
}


.price-card h3 {
    font-family:
        "Playfair Display", serif;

    font-size:
        45px;

    margin:
        20px 0;
}


.description {
    color:
        var(--muted);

    line-height:
        1.6;

    font-size:
        13px;
}


.price-card ul {
    list-style:
        none;

    margin:
        30px 0;
}


.price-card li {
    padding:
        10px 0;

    color:
        #ccc;

    font-size:
        13px;

    border-bottom:
        1px solid var(--line);
}


.price-btn {
    display:
        block;

    text-align:
        center;

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

    color:
        var(--gold);

    padding:
        14px;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        0.3s;
}


.price-btn:hover {
    background:
        var(--gold);

    color:
        #000;
}


/* ================= CTA ================= */

.cta {
    padding:
        130px 8%;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(214,179,106,0.14),
            transparent 45%
        ),

        #080808;
}


.cta h2 {
    font-family:
        "Playfair Display", serif;

    font-size:
        clamp(40px,6vw,70px);

    line-height:
        1;
}


.cta h2 span {
    display:
        block;

    color:
        var(--gold);
}


.cta-text {
    color:
        var(--muted);

    margin:
        25px auto 35px;
}


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

footer {
    padding:
        60px 8% 25px;

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


.footer-logo {
    font-size:
        18px;

    font-weight:
        800;

    letter-spacing:
        3px;
}


footer > p {
    color:
        var(--muted);

    font-size:
        13px;

    margin:
        15px 0 50px;
}


.footer-bottom {
    border-top:
        1px solid var(--line);

    padding-top:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    color:
        #666;

    font-size:
        11px;
}


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

@media (max-width: 850px) {

    .navbar {
        padding:
            0 5%;
    }


    .menu-btn {
        display:
            block;
    }


    nav {
        position:
            absolute;

        top:
            80px;

        left:
            0;

        width:
            100%;

        display:
            none;

        flex-direction:
            column;

        padding:
            30px;

        background:
            #0b0b0b;

        border-bottom:
            1px solid var(--line);
    }


    nav.active {
        display:
            flex;
    }


    .hero {
        grid-template-columns:
            1fr;

        padding:
            130px 6% 70px;
    }


    .hero-card {
        min-height:
            420px;
    }


    .services-grid,
    .pricing-grid {
        grid-template-columns:
            1fr;
    }


    .service-card {
        min-height:
            450px;
    }


    .price-card.popular {
        transform:
            none;
    }


    .work-grid {
        grid-template-columns:
            1fr;
    }


    .project-large {
        grid-column:
            auto;

        min-height:
            430px;
    }


    .process-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .trust {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .trust div {
        flex-wrap:
            wrap;

        gap:
            15px;
    }


    .section {
        padding:
            80px 6%;
    }


    .footer-bottom {
        flex-direction:
            column;

        gap:
            10px;
    }

}


@media (max-width: 500px) {

    .hero h1 {
        font-size:
            48px;
    }


    .hero-card {
        min-height:
            380px;
    }


    .process-grid {
        grid-template-columns:
            1fr;
    }


    .hero-card h2 {
        font-size:
            38px;
    }


    .project {
        min-height:
            350px;
    }


    .service-card {
        min-height:
            440px;
    }

  }