/* ============================================================
   APES OF AI - LUXURY CIGAR CONCIERGE PROPOSAL
   PREMIUM GOLF CLUB DESIGN SYSTEM
============================================================ */


/* ============================================================
   GLOBAL VARIABLES
============================================================ */

:root {

    --background:
        #07130d;

    --background-light:
        #0d2118;

    --card:
        rgba(255, 255, 255, 0.06);

    --gold:
        #c9a227;

    --gold-light:
        #f4d77b;

    --green:
        #123d25;

    --text:
        #f7f5ef;

    --text-muted:
        #c8c8c0;

    --border:
        rgba(201, 162, 39, 0.25);

}


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


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        'Inter', sans-serif;

    line-height:
        1.7;

}


h1,
h2,
h3 {

    font-family:
        'Cormorant Garamond', serif;

    font-weight:
        600;

    letter-spacing:
        1px;

}


p {

    color:
        var(--text-muted);

}


a {

    text-decoration: none;

    color: white;

}


.container {

    width:
        90%;

    max-width:
        1200px;

    margin:
        auto;

}


/* ============================================================
   GLOBAL SECTION STYLING
============================================================ */


section {

    padding:
        100px 0;

}


.small-title {

    color:
        var(--gold);

    font-size:
        13px;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    margin-bottom:
        20px;

}


section h2 {

    font-size:
        55px;

    line-height:
        1.1;

    margin-bottom:
        25px;

}


.divider {

    width:
        80px;

    height:
        3px;

    background:
        var(--gold);

    margin:
        25px 0 40px;

}



/* ============================================================
   OVERLAY
============================================================ */


.overlay {

    position:
        fixed;

    inset:
        0;

    background:

        linear-gradient(rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .45));

    pointer-events:
        none;

    z-index:
        -1;

}



/* ============================================================
   HEADER / NAVIGATION
============================================================ */


header {

    position:
        absolute;

    width:
        100%;

    top:
        0;

    z-index:
        10;

}



nav {

    width:
        90%;

    max-width:
        1200px;

    margin:
        auto;

    padding:
        35px 0;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.logo {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        32px;

    letter-spacing:
        4px;

    color:
        var(--gold);

}


nav ul {

    display:
        flex;

    list-style: none;

    gap:
        40px;

}


nav ul li a {

    font-size:
        14px;

    letter-spacing:
        1px;

    color:
        white;

    transition:
        .3s;

}


nav ul li a:hover {

    color:
        var(--gold);

}



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


.hero {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    position:
        relative;


    background:

        linear-gradient(rgba(0, 20, 10, .7),
            rgba(0, 20, 10, .85)),

        url("images/hero.jpg");


    background-size:
        cover;

    background-position:
        center;

        padding-left: 10%;


}


.hero-content {

    max-width:
        850px;

}


.proposal-tag {

    color:
        var(--gold-light);

    font-size:
        14px;

    letter-spacing:
        5px;

    margin-bottom:
        30px;

}



.hero h1 {

    font-size:
        85px;

    line-height:
        1;

    margin-bottom:
        20px;

}



.hero h2 {

    font-family:
        'Inter',
        sans-serif;

    font-size:
        26px;

    font-weight:
        300;

    color:
        var(--gold-light);

    margin-bottom:
        30px;

}



.hero-description {

    max-width:
        720px;

    font-size:
        18px;

    margin-bottom:
        45px;

}


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


.hero-buttons {

    display:
        flex;

    gap:
        20px;

}



.gold-button {

    display:
        inline-block;

    padding:
        16px 35px;

    background:
        linear-gradient(135deg,
            var(--gold),
            var(--gold-light));

    color:
        #111;

    font-weight:
        600;

    letter-spacing:
        1px;

    border-radius:
        3px;

    transition:
        .4s;

}


.gold-button:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(201, 162, 39, .35);

}



.outline-button {

    padding:
        16px 35px;

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

    color:
        var(--gold-light);

    transition:
        .4s;

}



.outline-button:hover {

    background:
        var(--gold);

    color:
        black;

}



/* ============================================================
   OVERVIEW SECTION
============================================================ */


.overview {

    background:
        var(--background-light);

}



.overview p {

    max-width:
        900px;

    font-size:
        18px;

    margin-bottom:
        25px;

}



/* ============================================================
   VALUE CARDS
============================================================ */


.value-section {

    background:
        #08150f;

}


.value-grid {

    display:
        grid;

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

    gap:
        30px;

}



.value-card {

    background:
        var(--card);

    padding:
        40px;

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

    backdrop-filter:
        blur(10px);

    transition:
        .4s;

}



.value-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--gold);

}



.value-card h3 {

    font-size:
        32px;

    margin-bottom:
        15px;

    color:
        var(--gold-light);

}



.value-card p {

    font-size:
        16px;

}

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


.pricing {

    background:
        linear-gradient(180deg,
            #07130d,
            #0b1d14);

}


.pricing>.container>h2 {

    max-width:
        750px;

}



.pricing-grid {

    display:
        grid;

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

    gap:
        35px;

    margin-top:
        60px;

}



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


.pricing-card {

    position:
        relative;

    background:
        rgba(255, 255, 255, .04);

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

    padding:
        50px 40px;

    backdrop-filter:
        blur(15px);

    transition:
        .5s;

}



.pricing-card:hover {

    transform:
        translateY(-12px);

    border-color:
        var(--gold);

}



.pricing-card.featured {

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

    background:

        linear-gradient(145deg,

            rgba(201, 162, 39, .15),

            rgba(255, 255, 255, .04));

}



.recommended {

    position:
        absolute;

    top:
        -15px;

    right:
        30px;

    background:
        var(--gold);

    color:
        #111;

    padding:
        8px 25px;

    font-size:
        12px;

    letter-spacing:
        2px;

    font-weight:
        700;

}



.package-name {

    font-size:
        34px;

    font-family:
        'Cormorant Garamond';

    color:
        var(--gold-light);

    margin-bottom:
        20px;

}



.price {

    font-size:
        70px;

    font-family:
        'Cormorant Garamond';

    color:
        white;

    margin-bottom:
        20px;

}



.price span {

    font-family:
        'Inter';

    font-size:
        20px;

    color:
        var(--text-muted);

}



.package-description {

    margin-bottom:
        35px;

    font-size:
        16px;

}



.pricing-card ul {

    list-style: none;

    margin-bottom:
        40px;

}



.pricing-card li {

    padding:
        10px 0;

    color:
        #ddd;

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

}



.card-button {

    display:
        inline-block;

    padding:
        15px 30px;

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

    color:
        var(--gold-light);

    transition:
        .3s;

}



.card-button:hover {

    background:
        var(--gold);

    color:
        black;

}



/* ============================================================
   COMPARISON TABLE
============================================================ */


.comparison {

    background:
        #06110c;

}



.comparison-table {

    width:
        100%;

    border-collapse:
        collapse;

    margin-top:
        50px;

    overflow:
        hidden;

}



.comparison-table th {

    background:
        rgba(201, 162, 39, .15);

    color:
        var(--gold-light);

    padding:
        20px;

    font-size:
        16px;

}



.comparison-table td {

    padding:
        18px;

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

    text-align:
        center;

    color:
        #ddd;

}



.comparison-table td:first-child {

    text-align:
        left;

    color:
        white;

    font-weight:
        500;

}



.comparison-table tr:hover {

    background:
        rgba(201, 162, 39, .05);

}



/* ============================================================
   WHY APES OF AI SECTION
============================================================ */


.why-us {

    background:
        var(--background-light);

}



.why-grid {

    display:
        grid;

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

    gap:
        25px;

}



.why-card {

    padding:
        35px;

    background:
        rgba(255, 255, 255, .04);

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

    transition:
        .4s;

}



.why-card:hover {

    border-color:
        var(--gold);

    transform:
        translateY(-8px);

}



.why-card h3 {

    color:
        var(--gold-light);

    font-size:
        28px;

    margin-bottom:
        15px;

}



/* ============================================================
   ROI SECTION
============================================================ */


.roi {

    background:

        linear-gradient(120deg,

            #0c2116,

            #07130d);

}



.roi-grid {

    display:
        grid;

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

    gap:
        30px;

}



.roi-grid>div {

    text-align:
        center;

    padding:
        40px;

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

}



.roi-grid h3 {

    color:
        var(--gold-light);

    font-size:
        30px;

}



.roi-grid h4 {

    font-size:
        45px;

    color:
        white;

    font-family:
        'Cormorant Garamond';

    margin-top:
        15px;

}



/* ============================================================
   MAINTENANCE PLANS
============================================================ */


.maintenance {

    background:
        #08150f;

}



.maintenance .pricing-card {

    min-height:
        500px;

}



.maintenance .price {

    font-size:
        60px;

}



/* ============================================================
   PREMIUM GOLD ACCENT LINE
============================================================ */


.pricing-card::after,
.why-card::after {

    content: "";

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    width:
        0%;

    height:
        3px;

    background:
        var(--gold);

    transition:
        .5s;

}



.pricing-card:hover::after,
.why-card:hover::after {

    width:
        100%;

}

/* ============================================================
   PROJECT TIMELINE
============================================================ */


.timeline {

    background:
        #06110c;

}


.timeline-grid {

    display:
        grid;

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

    gap:
        30px;

    margin-top:
        60px;

}



.timeline-grid>div {

    text-align:
        center;

    padding:
        35px 25px;

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

    position:
        relative;

    transition:
        .4s;

}



.timeline-grid>div:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--gold);

}



.timeline-grid span {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        black;

    font-size:
        22px;

    font-weight:
        700;

    margin-bottom:
        25px;

}



.timeline-grid h3 {

    color:
        var(--gold-light);

    font-size:
        30px;

    margin-bottom:
        15px;

}



/* ============================================================
   CALL TO ACTION
============================================================ */


.cta {

    text-align:
        center;

    background:

        linear-gradient(rgba(0, 20, 10, .8),

            rgba(0, 20, 10, .95)),

        url("images/hero.jpg");

    background-size:
        cover;

    background-position:
        center;

    padding:
        130px 0;

}



.cta h2 {

    font-size:
        70px;

    max-width:
        900px;

    margin:
        auto;

}



.cta p {

    max-width:
        750px;

    margin:
        30px auto 45px;

    font-size:
        18px;

}



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


footer {

    background:
        #030806;

    padding:
        50px 0;

    text-align:
        center;

}



footer h3 {

    color:
        var(--gold);

    font-size:
        35px;

    letter-spacing:
        4px;

}



footer p {

    margin-top:
        10px;

}



/* ============================================================
   ANIMATION EFFECTS
============================================================ */


.hero-content,
.pricing-card,
.value-card,
.why-card,
.timeline-grid>div {

    animation:
        fadeUp 1s ease forwards;

}



@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(40px);

    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}



/* ============================================================
   MOBILE RESPONSIVE DESIGN
============================================================ */


@media(max-width:1000px) {


    section {

        padding:
            70px 0;

    }



    section h2 {

        font-size:
            42px;

    }



    /* Navigation */

    nav {

        flex-direction:
            column;

        gap:
            25px;

    }



    nav ul {

        gap:
            20px;

    }


    /* Hero */

    .hero {

        min-height:
            900px;

    }


    .hero h1 {

        font-size:
            55px;

    }



    .hero h2 {

        font-size:
            22px;

    }



    .hero-buttons {

        flex-direction:
            column;

        width:
            100%;

    }



    .hero-buttons a {

        text-align:
            center;

    }



    /* Cards */


    .pricing-grid,
    .value-grid,
    .roi-grid,
    .why-grid,
    .timeline-grid {

        grid-template-columns:
            1fr;

    }



    .pricing-card {

        padding:
            35px 25px;

    }



    .price {

        font-size:
            55px;

    }



    /* Table */

    .comparison-table {

        display:
            block;

        overflow-x:
            auto;

    }



    .cta h2 {

        font-size:
            45px;

    }


}



@media(max-width:600px) {


    .logo {

        font-size:
            25px;

    }


    nav ul {

        display:
            none;

    }



    .hero h1 {

        font-size:
            44px;

    }



    .hero-description {

        font-size:
            16px;

    }



    .package-name {

        font-size:
            28px;

    }



    .cta h2 {

        font-size:
            36px;

    }


}

/* Scroll Animation States */

.value-card,
.pricing-card,
.why-card,
.timeline-grid>div,
.roi-grid>div {

    opacity: 0;

    transform:
        translateY(40px);

}


.active {

    opacity: 1 !important;

    transform:
        translateY(0) !important;

    transition:
        all .8s ease;

}

/* ============================================================
   AI / LLM / AGENT SERVICES
============================================================ */

.ai-services {

    background:
        linear-gradient(135deg,
            #06110c,
            #0d2417);

}


.ai-intro {

    max-width:
        800px;

    font-size:
        18px;

    margin-bottom:
        55px;

}


.ai-grid {

    display:
        grid;

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

    gap:
        25px;

}


.ai-card {

    position:
        relative;

    padding:
        45px 35px;

    background:
        rgba(255, 255, 255, .04);

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

    backdrop-filter:
        blur(15px);

    transition:
        .4s;

}


.ai-card:hover {

    transform:
        translateY(-10px);

    border-color:
        var(--gold);

}


.featured-ai {

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

    background:
        linear-gradient(145deg,
            rgba(201, 162, 39, .13),
            rgba(255, 255, 255, .04));

}


.ai-number {

    color:
        var(--gold);

    font-size:
        13px;

    letter-spacing:
        3px;

    margin-bottom:
        20px;

}


.ai-card h3 {

    font-size:
        38px;

    color:
        var(--gold-light);

    margin-bottom:
        5px;

}


.ai-subtitle {

    color:
        #aaa;

    font-size:
        14px;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}


.ai-price {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        60px;

    color:
        white;

    margin-top:
        25px;

}


.ai-price-note {

    font-size:
        13px;

    color:
        #999;

    margin-bottom:
        25px;

}


.ai-card ul {

    list-style:
        none;

    margin-bottom:
        30px;

}


.ai-card li {

    padding:
        10px 0;

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

    color:
        #ddd;

    font-size:
        14px;

}


.ai-monthly {

    padding:
        20px;

    background:
        rgba(201, 162, 39, .08);

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.ai-monthly strong {

    color:
        var(--gold-light);

    font-size:
        22px;

}


.ai-monthly span {

    color:
        #999;

    font-size:
        12px;

}


/* ============================================================
   AI PACKAGE BOX
============================================================ */

.ai-package-box {

    margin-top:
        60px;

    padding:
        45px;

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

    background:
        rgba(201, 162, 39, .05);

}


.ai-package-box h3 {

    font-size:
        38px;

    color:
        white;

    margin-bottom:
        15px;

}


.ai-package-box>p {

    max-width:
        800px;

}


.ai-package-options {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        30px;

}


.ai-package-options div {

    padding:
        25px;

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.ai-package-options span {

    color:
        #aaa;

}


.ai-package-options strong {

    color:
        var(--gold-light);

}


/* ============================================================
   MOBILE AI SECTION
============================================================ */

@media(max-width:1000px) {

    .ai-grid {

        grid-template-columns:
            1fr;

    }


    .ai-package-options {

        grid-template-columns:
            1fr;

    }

}