/* ============================================
   PAGE.CSS - GEO Page Specific Styles Only
   Contains: Hero, Chat, GEO-specific sections that are NOT in master
   ============================================ */

/* ========== GEO SPECIFIC VARIABLES ========== */
:root {
    --burgundy-primary: #800020;
    --burgundy-dark: #5c0018;
    --burgundy-light: #b3385e;
    --chat-bg-dark: #343541;
    --chat-sidebar-bg: #202123;
    --chat-input-bg: #40414f;
    --chat-user-bubble: #0d6efd;
    --chat-assistant-bubble: #6c757d;
    --chat-text-light: #f8f9fa;
    --chat-text-dark: #212529;
    --chat-border-color: #454653;
    /* Theme Variables - only for GEO page */
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Poppins", sans-serif;
    --background-color: #ffffff;
    --default-color: #444444;
    --heading-color: #5a011b;
    --accent-color: #c1033a;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --text-color: #000000
}

.light-background {
    --background-color: #f2f2f2;
    --surface-color: #ffffff
}

.dark-background {
    --background-color: #56040b;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #0c0091;
    --contrast-color: #ffffff;
    --text-color: #000000
}

/* ========== DEMO HEADER ========== */
.demo-header {
    background: linear-gradient(to right, var(--burgundy-primary), var(--burgundy-dark));
    color: #fff;
    position: relative
}

.demo-header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .1
}

    .demo-header-decoration > div {
        position: absolute;
        background-color: #fff;
        border-radius: 50%
    }

/* ========== CHAT INTERFACE ========== */
.chatbox-container-wrapper {
    height: 70vh;
    max-height: 600px;
    min-height: 450px;
    border-radius: 0 0 .5rem .5rem;
    overflow: hidden
}

.chatbox-body {
    font-family: Inter, sans-serif;
    background-color: var(--chat-bg-dark);
    color: var(--chat-text-light);
    height: 100%;
    display: flex
}

.chat-sidebar {
    background-color: var(--chat-sidebar-bg);
    border-right: 1px solid var(--chat-border-color);
    width: 250px
}

    .chat-sidebar .nav-link {
        color: #adb5bd;
        border-radius: .25rem;
        transition: background-color .2s ease, color .2s ease
    }

        .chat-sidebar .nav-link:hover {
            background-color: #495057;
            color: var(--chat-text-light)
        }

        .chat-sidebar .nav-link.active {
            background-color: var(--chat-bg-dark);
            color: var(--chat-text-light);
            font-weight: 500
        }

    .chat-sidebar .btn-new-chat {
        background-color: var(--chat-bg-dark);
        border: 1px solid var(--chat-border-color)
    }

        .chat-sidebar .btn-new-chat:hover {
            background-color: #495057
        }

.chat-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.chat-header {
    background: linear-gradient(to right, #10a37f, #0d8f6f);
    color: #fff;
    border-bottom: 1px solid var(--chat-border-color)
}

.chat-header-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .15
}

    .chat-header-decoration > div {
        position: absolute;
        background-color: #10a37f;
        border-radius: 50%
    }

#chatContainer {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--chat-bg-dark);
    padding: 1rem
}

.message-wrapper {
    margin-bottom: 1rem;
    display: flex
}

    .message-wrapper.user {
        justify-content: flex-end
    }

    .message-wrapper.assistant {
        justify-content: flex-start
    }

.message-bubble {
    padding: .75rem 1rem;
    border-radius: .75rem;
    max-width: 75%;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,.1)
}

    .message-bubble.user {
        background-color: var(--chat-user-bubble);
        color: #fff;
        border-bottom-right-radius: .25rem
    }

    .message-bubble.assistant {
        background-color: var(--chat-assistant-bubble);
        color: #fff;
        border-bottom-left-radius: .25rem
    }

    .message-bubble.loading {
        background-color: var(--chat-assistant-bubble);
        color: #fff;
        border-bottom-left-radius: .25rem
    }

.chat-footer {
    background-color: var(--chat-input-bg);
    border-top: 1px solid var(--chat-border-color)
}

#messageInput {
    background-color: var(--chat-input-bg);
    color: var(--chat-text-light);
    border-color: #6c757d;
    resize: none
}

    #messageInput::placeholder {
        color: #adb5bd
    }

    #messageInput:focus {
        background-color: var(--chat-input-bg);
        color: var(--chat-text-light);
        border-color: #0d6efd;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
    }

#sendButton {
    background-color: #198754;
    border-color: #198754
}

    #sendButton:hover {
        background-color: #157347;
        border-color: #146c43
    }

.message-bubble .prose-custom-html img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem
}

.message-bubble .prose-custom-html h3, .message-bubble .prose-custom-html h4 {
    color: var(--chat-text-light);
    margin-bottom: .5rem
}

.message-bubble .prose-custom-html p {
    color: #e9ecef;
    margin-bottom: .75rem
}

.message-bubble .prose-custom-html ul {
    list-style: none;
    padding-left: 0
}

.message-bubble .prose-custom-html li {
    color: #e9ecef;
    margin-bottom: .25rem
}

.message-bubble .prose-custom-html a {
    color: #60a5fa;
    text-decoration: underline
}

    .message-bubble .prose-custom-html a:hover {
        color: #93c5fd
    }

.message-bubble .card {
    background-color: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--chat-text-light)
}

.message-bubble .card-title {
    color: var(--chat-text-light)
}

.message-bubble .card-text {
    color: #e0e0e0;
    font-size: .875rem
}

.message-bubble .list-group-item {
    background-color: transparent;
    border-color: rgba(255,255,255,.15);
    color: #e0e0e0;
    font-size: .875rem
}

.message-bubble .btn-link-website {
    font-size: .875rem;
    color: #90cdf4
}

    .message-bubble .btn-link-website:hover {
        color: #63b3ed
    }

.message-enter {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease-out, transform .3s ease-out
}

.message-enter-active {
    opacity: 1;
    transform: translateY(0)
}

#chatContainer::-webkit-scrollbar {
    width: 8px
}

#chatContainer::-webkit-scrollbar-track {
    background: var(--chat-sidebar-bg)
}

#chatContainer::-webkit-scrollbar-thumb {
    background-color: #6c757d;
    border-radius: 4px;
    border: 2px solid var(--chat-sidebar-bg)
}

    #chatContainer::-webkit-scrollbar-thumb:hover {
        background-color: #5a6268
    }

.chat-sidebar .flex-fill::-webkit-scrollbar {
    width: 6px
}

.chat-sidebar .flex-fill::-webkit-scrollbar-track {
    background: var(--chat-sidebar-bg)
}

.chat-sidebar .flex-fill::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 3px
}

.demo-chat-card {
    max-width: 900px;
    margin: 0 auto
}

/* ========== HERO SECTION ========== */
.hero {
    min-height: 100vh;
    padding: 120px 0 120px 0;
    display: flex;
    align-items: center
}

    .hero h1 {
        margin: 0 0 20px 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        text-align: center
    }

        .hero h1 span {
            color: var(--heading-color);
            border-bottom: 4px solid var(--accent-color)
        }

    .hero p {
        color: color-mix(in srgb, var(--default-color), transparent 30%);
        margin: 5px 0 30px 0;
        font-size: 22px;
        font-weight: 400
    }

    .hero .btn-get-started {
        color: var(--contrast-color);
        background: var(--accent-color);
        font-family: var(--heading-font);
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 15px 40px;
        border-radius: 50px;
        transition: .5s;
        box-shadow: 0 8px 28px rgb(0 0 0 / .1)
    }

        .hero .btn-get-started:hover {
            color: var(--contrast-color);
            background: color-mix(in srgb, var(--accent-color), transparent 15%);
            box-shadow: 0 8px 28px rgb(0 0 0 / .1)
        }

    .hero .hero-img {
        background-image: url(../img/hero-img.webp);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat
    }

    .hero .animated {
        margin-left: auto;
        animation: up-down 2s ease-in-out infinite alternate-reverse both
    }

.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-10px); /* move slightly left */
}

@keyframes up-down {
    0% {
        transform: translateY(10px)
    }

    100% {
        transform: translateY(-10px)
    }
}

@media (max-width:640px) {
    .hero h1 {
        font-size: 28px;
        line-height: 36px
    }

    .hero p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px
    }

    .hero .btn-get-started, .hero .btn-watch-video {
        font-size: 13px
    }
}

/* ========== ABOUT SECTION ========== */
.about .content h2 {
    font-weight: 700;
    margin-top: 50px
}

.about .content p:last-child {
    margin-bottom: 0
}

.about .content .read-more {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: .3s;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

    .about .content .read-more i {
        font-size: 18px;
        margin-left: 5px;
        line-height: 0;
        transition: .3s
    }

    .about .content .read-more:hover {
        background: color-mix(in srgb, var(--accent-color), transparent 20%);
        padding-right: 19px
    }

        .about .content .read-more:hover i {
            margin-left: 10px
        }

.about .icon-box {
    background-color: var(--surface-color);
    padding: 50px 40px;
    box-shadow: 0 10px 50px rgb(0 0 0 / .1);
    border-radius: 18px;
    border: 1px solid var(--surface-color);
    transition: all .3s ease-out 0s
}

.about .top-box {
    min-height: 440px
}

.about .bottom-box {
    min-height: 390px
}

.about .icon-box i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 0;
    transition: all .4s ease-out 0s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--accent-color)
}

.about .icon-box h3 {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700
}

.about .icon-box p {
    margin-bottom: 0
}

.about .icon-box:hover i {
    background-color: var(--accent-color);
    color: var(--contrast-color)
}

@media (min-width:1365px) {
    .about .icon-box:hover {
        border-color: var(--accent-color)
    }
}

/* ========== PROCESS SECTION (3D FLIP CARDS) ========== */
.process-item .inner-box {
    position: relative;
    width: 100%;
    height: 300px;
    transition: transform .8s;
    transform-style: preserve-3d
}

.process-item:hover .inner-box {
    transform: rotateY(180deg)
}

.process .process-item {
    box-shadow: 0 5px 90px 0 rgb(0 0 0 / .1);
    transition: all ease-in-out .3s;
    border-radius: 18px;
    height: 100%
}

    .process .process-item .icon {
        color: var(--contrast-color);
        background: var(--accent-color);
        margin: 0;
        width: 64px;
        height: 64px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 28px;
        transition: ease-in-out .3s
    }

    .process .process-item h3 {
        font-weight: 700;
        margin: 10px 0 15px 0;
        font-size: 22px;
        transition: ease-in-out .3s
    }

    .process .process-item p {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center
    }

.process-item .back, .process-item .front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgb(0 0 0 / .1);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.process-item .front {
    z-index: 2;
    transform: rotateY(0)
}

.process-item .back {
    transform: rotateY(180deg)
}

.process-item h3 {
    text-align: center
}

@media (min-width:1365px) {
    .process .process-item:hover {
        border-color: var(--accent-color)
    }

        .process .process-item:hover h3 {
            color: var(--accent-color)
        }
}

/* ========== STRATEGIES SECTION ========== */
.strategies {
    padding: 120px 0
}

    .strategies .strategy-item {
        background-color: var(--default-color);
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
        height: 100%;
        padding: 30px;
        transition: .3s;
        border-radius: 10px;
        display: flex
    }

        .strategies .strategy-item .icon {
            font-size: 32px;
            border-radius: 10px;
            position: relative;
            margin-right: 25px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            padding: 10px;
            flex-shrink: 0
        }

        .strategies .strategy-item h3 {
            color: color-mix(in srgb, var(--background-color), transparent 25%);
            font-weight: 700;
            font-size: 22px;
            transition: .3s
        }

        .strategies .strategy-item p {
            color: var(--text-color)
        }

        .strategies .strategy-item.item-chatgpt .icon {
            border: 1px solid #14b38b;
            background: rgb(13 202 240 / .1)
        }

        .strategies .strategy-item.item-gemini .icon {
            border: 1px solid #1ba1e3;
            background: rgb(116 119 201 / .15)
        }

        .strategies .strategy-item.item-copilot .icon {
            border: 1px solid #f55589;
            background: rgb(255 106 72 / .16)
        }

        .strategies .strategy-item.item-claude .icon {
            border: 1px solid #da6e4b;
            background: rgb(218 110 80 / .13)
        }

        .strategies .strategy-item.item-perplexity .icon {
            border: 1px solid #20808d;
            background: rgb(33 128 140 / .12)
        }

        .strategies .strategy-item:hover h3 {
            color: var(--accent-color)
        }

        .strategies .strategy-item:hover p {
            color: color-mix(in srgb, var(--text-color), transparent 10%)
        }

@media (min-width:1365px) {
    .strategies .strategy-item:hover {
        transform: translateY(-5px)
    }
}

/* ========== TIMELINE SECTION ========== */
.timeline-block {
    margin-bottom: 3rem
}

    .timeline-block:last-child {
        margin-bottom: 0
    }

    .timeline-block h2 {
        font-size: 2rem;
        margin-bottom: .8rem;
        font-weight: 700
    }

        .timeline-block h2 span {
            color: var(--accent-color)
        }

    .timeline-block .lead {
        color: color-mix(in srgb, var(--default-color), transparent 25%);
        margin-bottom: 3rem
    }

.timeline {
    position: relative
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 35%;
        top: 0;
        height: 90%;
        width: 2px;
        background-color: color-mix(in srgb, var(--accent-color), transparent 85%)
    }

    .timeline .timeline-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 2.5rem;
        position: relative;
        min-height: 100px
    }

        .timeline .timeline-item:last-child {
            margin-bottom: 0
        }

        .timeline .timeline-item .timeline-left {
            width: 40%;
            padding-right: 5rem
        }

            .timeline .timeline-item .timeline-left .benefit {
                color: var(--heading-color);
                font-weight: 600;
                font-size: 1.1rem;
                margin-bottom: .25rem
            }

        .timeline .timeline-item .timeline-image {
            position: absolute;
            top: -10px;
            left: calc(35% + 1px);
            transform: translateX(-50%);
            width: 6rem;
            height: 6rem;
            border-radius: 50%
        }

            .timeline .timeline-item .timeline-image img {
                padding: 5px;
                border-radius: 50%;
                object-fit: cover
            }

        .timeline .timeline-item .timeline-right {
            width: 65%;
            padding-left: 3rem;
            margin-top: -4px
        }

            .timeline .timeline-item .timeline-right .position {
                color: var(--heading-color);
                font-size: 1.2rem;
                margin-bottom: .6rem;
                font-weight: 600
            }

            .timeline .timeline-item .timeline-right .description {
                color: color-mix(in srgb, var(--default-color), transparent 25%)
            }

            .timeline .timeline-item .timeline-right ul {
                padding-left: 15px
            }

                .timeline .timeline-item .timeline-right ul li {
                    padding-bottom: 12px
                }

    .timeline .timeline-hover:hover .timeline-image {
        background-color: rgb(193 3 58 / .8);
        transition: background-color .5s ease-in-out
    }

    .timeline .timeline-hover:hover .timeline-left .benefit {
        color: var(--accent-color);
        transition: color .3s ease-in-out
    }

    .timeline .timeline-hover:hover .timeline-right .description {
        color: var(--accent-color);
        transition: color .3s ease-in-out
    }

@media (max-width:992px) {
    .timeline-block h2 {
        font-size: 2rem
    }

    .timeline::before {
        left: 1rem
    }

    .timeline .timeline-item {
        flex-direction: column;
        margin-bottom: 20px
    }

        .timeline .timeline-item .timeline-left {
            width: 100%;
            text-align: left;
            padding-right: 0;
            padding-left: 6rem;
            margin-bottom: 1.6rem;
            margin-top: -4px
        }

        .timeline .timeline-item .timeline-image {
            left: calc(1rem + 1px)
        }

        .timeline .timeline-item .timeline-right {
            width: 100%;
            padding-left: 6rem
        }
}

@media (max-width:600px) {
    .timeline::before {
        left: 3rem
    }

    .timeline .timeline-item .timeline-image {
        left: calc(3rem + 1px)
    }

    .timeline .timeline-item .timeline-left {
        padding-left: 8rem
    }

    .timeline .timeline-item .timeline-right {
        padding-left: 8rem
    }
}

/* ========== CALL TO ACTION ========== */
.call-to-action {
    padding: 80px 0 60px;
    position: relative;
    clip-path: inset(0)
}

    .call-to-action img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1
    }

    .call-to-action:before {
        content: "";
        background: color-mix(in srgb, var(--background-color), transparent 50%);
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .call-to-action .container {
        position: relative;
        z-index: 3
    }

    .call-to-action h3 {
        font-size: 28px;
        font-weight: 700;
        color: var(--default-color)
    }

    .call-to-action p {
        color: var(--default-color)
    }

    .call-to-action .cta-btn {
        font-family: var(--heading-font);
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 40px;
        border-radius: 5px;
        transition: .5s;
        margin: 10px;
        color: var(--accent-color);
        background: var(--default-color);
        border: 2px solid var(--accent-color)
    }

        .call-to-action .cta-btn:hover {
            color: var(--contrast-color);
            background: var(--accent-color);
            border: 2px solid var(--contrast-color)
        }

/* ========== FAQ SECTION ========== */
.faq .faq-container {
    max-width: 800px;
    margin: 0 auto
}

    .faq .faq-container .faq-item {
        background-color: var(--surface-color);
        position: relative;
        padding: 20px;
        margin-bottom: 15px;
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
        border-radius: 5px;
        overflow: hidden;
        transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
        cursor: pointer
    }

        .faq .faq-container .faq-item h3 {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            margin: 0;
            transition: color .3s;
            display: flex;
            align-items: center
        }

            .faq .faq-container .faq-item h3:hover {
                color: var(--accent-color)
            }

    .faq .faq-container .faq-toggle {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 16px;
        transition: transform .3s ease-in-out, color .3s ease-in-out
    }

    .faq .faq-container .faq-content {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .4s ease-in-out, opacity .3s ease-in-out, padding .3s
    }

    .faq .faq-container .faq-active {
        background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
        border-color: color-mix(in srgb, var(--accent-color), transparent 80%)
    }

        .faq .faq-container .faq-active .faq-content {
            max-height: 200px;
            opacity: 1;
            padding-top: 10px
        }

        .faq .faq-container .faq-active .faq-toggle {
            transform: rotate(90deg);
            color: var(--accent-color)
        }

/* ========== CONTACT SECTION ========== */
.contact {
    width: 100%;
    min-height: 80vh;
    position: relative;
    padding: 20px 0 20px 0;
    display: flex;
    align-items: center
}

    .contact .container {
        position: relative;
        z-index: 3
    }

    .contact:before {
        content: "";
        background: color-mix(in srgb, var(--background-color), transparent 100%);
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .contact .contact-bg {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1
    }

    .contact .content h2 {
        font-weight: 200;
        font-size: 42px;
        line-height: 1.1
    }

    .contact .content .lead {
        color: color-mix(in srgb, var(--default-color), transparent 25%)
    }

    .contact .contact-form {
        background-color: var(--surface-color);
        border: none;
        box-shadow: 0 5px 25px rgb(0 0 0 / .05);
        border-radius: 12px
    }

        .contact .contact-form .form-control, .contact .contact-form .form-select {
            padding: .75rem 1.25rem;
            border-color: #e5e5e5;
            border-radius: 8px;
            font-size: 1rem
        }

            .contact .contact-form .form-control:focus, .contact .contact-form .form-select:focus {
                border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
                box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent-color), transparent 90%)
            }

            .contact .contact-form .form-control::placeholder, .contact .contact-form .form-select::placeholder {
                color: color-mix(in srgb, var(--default-color), transparent 50%)
            }

        .contact .contact-form .btn-submit {
            background-color: var(--accent-color);
            color: var(--contrast-color);
            padding: .75rem 2rem;
            font-weight: 500;
            border-radius: 8px;
            transition: all .3s ease
        }

            .contact .contact-form .btn-submit:hover {
                background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
                transform: translateY(-1px)
            }

            .contact .contact-form .btn-submit:active {
                transform: translateY(0)
            }

/* ========== CTA MINI ========== */
.cta-mini {
    background: linear-gradient(135deg, #f8f9fa 0, #e9ecef 100%);
    padding: 40px 0
}

    .cta-mini h3 {
        color: var(--burgundy-primary);
        font-weight: 700;
        font-size: 2rem
    }

.btn-cta-primary {
    background: linear-gradient(135deg, var(--burgundy-primary) 0, var(--burgundy-dark) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 8px 25px rgba(128,0,32,.3);
    transition: all .3s ease
}

    .btn-cta-primary:hover {
        background: linear-gradient(135deg, var(--burgundy-dark) 0, var(--burgundy-primary) 100%);
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(128,0,32,.4);
        color: #fff
    }

/* ========== PRICING SECTION ========== */
.pricing .pricing-item {
    transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    border: 2px solid transparent;
    background-color: var(--surface-color, #fff);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(0,0,0,.1)
}

    .pricing .pricing-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
        transition: left .5s;
        z-index: 2;
        pointer-events: none
    }

    .pricing .pricing-item:hover::after {
        left: 100%
    }

    .pricing .pricing-item.card {
        background-color: var(--surface-color, #fff)
    }

    .pricing .pricing-item h3 {
        font-weight: 700;
        font-size: 24px;
        color: var(--burgundy-primary);
        margin-bottom: 15px
    }

    .pricing .pricing-item p.description {
        color: var(--chat-text-dark);
        margin-bottom: 20px;
        min-height: 60px
    }

    .pricing .pricing-item h4 {
        font-size: 42px;
        font-weight: 500;
        font-family: Montserrat, sans-serif;
        color: var(--burgundy-primary);
        margin-bottom: 25px
    }

        .pricing .pricing-item h4 sup {
            font-size: 24px;
            top: -15px;
            left: -3px
        }

        .pricing .pricing-item h4 span {
            color: #6c757d;
            font-size: 16px;
            font-weight: 300
        }

    .pricing .pricing-item ul li {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        color: var(--chat-text-dark)
    }

        .pricing .pricing-item ul li i {
            color: var(--burgundy-primary);
            font-size: 20px;
            margin-right: 10px
        }

    .pricing .pricing-item .buy-btn {
        padding: 12px 35px;
        color: var(--burgundy-primary);
        border: 1px solid var(--burgundy-primary);
        transition: .3s;
        font-size: 16px;
        font-weight: 500;
        font-family: Montserrat, sans-serif
    }

        .pricing .pricing-item .buy-btn:hover {
            background: var(--burgundy-primary);
            color: #fff
        }

    .pricing .pricing-item.most-popular {
        position: relative
    }

        .pricing .pricing-item.most-popular::before {
            content: "Most Popular";
            position: absolute;
            top: -1px;
            left: -1px;
            background: var(--burgundy-primary);
            color: #fff;
            padding: 6px 16px;
            font-size: 11px;
            font-weight: 700;
            border-radius: .375rem 0 8px 0;
            z-index: 3;
            text-transform: uppercase;
            letter-spacing: .5px;
            box-shadow: 0 2px 8px rgba(128,0,32,.3)
        }

    .pricing .pricing-item.recommended-card {
        position: relative
    }

        .pricing .pricing-item.recommended-card::before {
            content: "Recommended";
            position: absolute;
            top: -1px;
            left: -1px;
            background: var(--burgundy-primary);
            color: #fff;
            padding: 6px 16px;
            font-size: 11px;
            font-weight: 700;
            border-radius: .375rem 0 8px 0;
            z-index: 3;
            text-transform: uppercase;
            letter-spacing: .5px;
            box-shadow: 0 2px 8px rgba(128,0,32,.3)
        }

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.pricing .pricing-item {
    animation: gentleFloat 8s ease-in-out infinite
}

    .pricing .pricing-item:nth-child(2n) {
        animation-delay: -4s
    }

    .pricing .pricing-item:hover {
        animation-play-state: paused;
        transform: translateY(-15px) scale(1.03) !important;
        box-shadow: 0 25px 50px rgba(128,0,32,.15) !important;
        border-color: var(--burgundy-primary)
    }

    .pricing .pricing-item.most-popular:hover, .pricing .pricing-item.recommended-card:hover {
        animation-play-state: paused;
        transform: translateY(-20px) scale(1.05) !important;
        box-shadow: 0 30px 60px rgba(128,0,32,.2) !important
    }

.pricing-toggle-container {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    font-size: 11px;
    z-index: 4;
    background-color: rgba(255,255,255,.95);
    padding: 4px 6px;
    border-radius: 20px;
    border: 1px solid rgba(128,0,32,.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,.1)
}

    .pricing-toggle-container .toggle-label {
        padding: 6px 12px;
        margin: 0 1px;
        color: var(--chat-text-dark);
        cursor: pointer;
        font-weight: 500;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        border-radius: 15px;
        line-height: 1;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .5px
    }

        .pricing-toggle-container .toggle-label.active {
            font-weight: 700;
            color: #fff;
            background-color: var(--burgundy-primary);
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(128,0,32,.3)
        }

        .pricing-toggle-container .toggle-label:not(.active):hover {
            background-color: rgba(128,0,32,.1);
            transform: scale(1.02)
        }

.billing-note {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--chat-text-dark);
    margin-top: -10px;
    margin-bottom: 15px;
    min-height: 18px
}

.highlight-save {
    background-color: var(--burgundy-primary);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1em;
    display: inline-block;
    margin-top: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: transform .2s ease-in-out
}

    .highlight-save:hover {
        transform: scale(1.05)
    }

.pricing .pricing-item .card-body {
    position: relative;
    z-index: 1
}

.pricing .pricing-item.most-popular, .pricing .pricing-item.recommended-card {
    isolation: isolate
}

.pricing .pricing-item {
    will-change: transform
}

.pricing .row {
    align-items: stretch
}

/* ========== GEO PAGE GLOBAL STYLES ========== */
:root {
    scroll-behavior: smooth
}

body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font)
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: .3s
}

    a:hover {
        color: color-mix(in srgb, var(--accent-color), transparent 25%);
        text-decoration: none
    }

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--heading-font)
}

.section, section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 100px;
    overflow: clip
}

@media (max-width:1199px) {
    .section, section {
        scroll-margin-top: 66px
    }
}

.section-title .title-shape {
    width: 200px;
    height: 20px;
    margin: 0 auto;
    color: var(--accent-color);
    opacity: .5
}

    .section-title .title-shape svg {
        width: 100%;
        height: 100%
    }

.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative
}

    .section-title h2 {
        font-size: 32px;
        font-weight: 700;
        position: relative
    }

    .section-title p {
        margin: 15px auto 0;
        font-size: 16px;
        max-width: 700px;
        line-height: 1.8
    }

.bg-img-section {
    width: 100%;
    position: relative
}

    .bg-img-section .bg-img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1
    }

    .bg-img-section:before {
        content: "";
        background: color-mix(in srgb, var(--background-color), transparent 50%);
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .bg-img-section .container {
        position: relative;
        z-index: 3
    }

    .bg-img-section .bottom-waves {
        display: block;
        width: 100%;
        height: 60px;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 3
    }

    .bg-img-section .wave1 use {
        animation: move-forever1 10s linear infinite;
        animation-delay: -2s;
        fill: var(--default-color);
        opacity: .6
    }

    .bg-img-section .wave2 use {
        animation: move-forever2 8s linear infinite;
        animation-delay: -2s;
        fill: var(--default-color);
        opacity: .4
    }

    .bg-img-section .wave3 use {
        animation: move-forever3 6s linear infinite;
        animation-delay: -2s;
        fill: var(--default-color)
    }

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0)
    }

    100% {
        transform: translate(-90px, 0)
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0)
    }

    100% {
        transform: translate(85px, 0)
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0)
    }

    100% {
        transform: translate(85px, 0)
    }
}

@media (max-width:1199px) {
    .animated {
        margin-left: 10%
    }
}

@media (max-width:768px) {
    .animated {
        margin-left: 20%
    }
}

@media (max-width:600px) {
    .animated {
        margin-left: 20%
    }
}

/* ========== BOOTSTRAP ICONS (All icons from original bundle) ========== */
@font-face {
    font-display: swap;
    font-family: bootstrap-icons;
    src: url("./fonts/bootstrap-icons-subset.woff2") format("woff2")
}

.bi::before, [class*=" bi-"]::before, [class^=bi-]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.bi-arrow-right::before {
    content: "\f138"
}

.bi-award::before {
    content: "\f154"
}

.bi-chat-square-text-fill::before {
    content: "\f263"
}

.bi-check::before {
    content: "\f26e"
}

.bi-chevron-right::before {
    content: "\f285"
}

.bi-diagram-3::before {
    content: "\f2ee"
}

.bi-file-earmark-text::before {
    content: "\f38b"
}

.bi-gear::before {
    content: "\f3e5"
}

.bi-graph-up-arrow::before {
    content: "\f673"
}

.bi-plus-lg::before {
    content: "\f64d"
}

.bi-robot::before {
    content: "\f6b1"
}

.bi-rocket-takeoff::before {
    content: "\f845"
}

.bi-search::before {
    content: "\f52a"
}

.bi-send-fill::before {
    content: "\f6b9"
}

.bi-shield-check::before {
    content: "\f52f"
}

.bi-text-paragraph::before {
    content: "\f5c8"
}

.bi-trophy::before {
    content: "\f5e7"
}