@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";

html,
body {
    font-family: Inter, sans-serif
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0)
}

:root {
    --accent-turquoise: #00CED1;
    --accent-orange: var(--logo-purple);
    --brand-teal: #12D3C7;
    --brand-gold: #F2B130;
    --logo-cream: #FFF6EB;
    --monitor-blue: #CDEFF7;
    --logo-aqua: #3CD6C9;
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --logo-purple: #9DA4F0;

    /* Dark Mode Variables */
    --dark-background: #1a202c;
    --dark-text-color: #e2e8f0;
    --dark-gray-900: #e2e8f0;
    --dark-gray-700: #a0aec0;
    --dark-gray-600: #cbd5e0;
    --dark-gray-500: #e2e8f0;
    --dark-gray-300: #4a5568;
    --dark-gray-200: #2d3748;
    --dark-gray-100: #1a202c;
    --dark-gray-50: #2d3748;
    --dark-blue-600: #63b3ed;
    --dark-blue-700: #4299e1;
    --dark-accent-turquoise: #4fd1c5;
    --dark-accent-orange: #fc8181;
    --dark-logo-cream: #2d3748;
    --dark-monitor-blue: #2d3748;
    --dark-logo-aqua: #4fd1c5;
    --dark-logo-purple: #9f7aea;

    /* Default (Light) Theme */
    --color-text: var(--gray-900);
    --color-background: #ffffff;
    --color-header-background: #ffffff;
    --color-header-shadow: 0 1px 2px #0000000f;
    --color-nav-link-background: linear-gradient(180deg, #fff, #f7f9fc);
    --color-nav-link-hover-background: linear-gradient(180deg, #fff, #eefaf7);
    --color-nav-link-shadow: inset 0 1px #ffffffd9, 0 4px 14px #0000001f;
    --color-nav-link-hover-shadow: inset 0 1px #ffffffe6, 0 8px 20px #0000002e;
    --color-nav-link-active-shadow: inset 0 1px #ffffffe6, 0 5px 12px #00000024;
    --color-border: var(--gray-200);
    --color-input-border: var(--gray-300);
    --color-box-shadow-sm: 0 1px 2px #0000000d;
    --color-box-shadow-md: 0 4px 6px #00000014;
    --color-box-shadow-lg: 0 10px 15px #0000001a;
    --color-hover-shadow-xl: 0 20px 25px #00000026;
    --color-cta-button-shadow: inset 0 1px #ffffff40, 0 8px 18px #0000001f;
    --color-cta-button-hover-shadow: inset 0 1px #ffffff40, 0 12px 24px #0000004d, 0 0 0 2px #11182780;
    --color-cta-button-active-shadow: inset 0 1px #ffffff40, 0 6px 12px #0000004d, 0 0 0 2px #11182780;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background-color: var(--color-background);
}

body.dark-mode {
    --color-text: var(--dark-text-color);
    --color-background: var(--dark-background);
    --color-header-background: var(--dark-background);
    --color-header-shadow: none;
    --color-nav-link-background: var(--dark-gray-100);
    --color-nav-link-hover-background: var(--dark-gray-200);
    --color-nav-link-shadow: inset 0 1px #ffffff1a, 0 4px 14px #0000004d;
    --color-nav-link-hover-shadow: inset 0 1px #ffffff1a, 0 8px 20px #0000004d;
    --color-nav-link-active-shadow: inset 0 1px #ffffff1a, 0 5px 12px #0000004d;
    --color-border: var(--dark-gray-200);
    --color-input-border: var(--dark-gray-700);
    --color-box-shadow-sm: 0 1px 2px #0000004d;
    --color-box-shadow-md: 0 4px 6px #0000004d;
    --color-box-shadow-lg: 0 10px 15px #0000004d;
    --color-hover-shadow-xl: 0 20px 25px #0000004d;
    --color-cta-button-shadow: inset 0 1px #ffffff1a, 0 8px 18px #0000004d;
    --color-cta-button-hover-shadow: inset 0 1px #ffffff1a, 0 12px 24px #0000004d, 0 0 0 2px #ffffff1a;
    --color-cta-button-active-shadow: inset 0 1px #ffffff1a, 0 6px 12px #0000004d, 0 0 0 2px #ffffff1a;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

footer {
    margin-top: auto
}

html {
    scroll-behavior: smooth
}

.block {
    display: block
}

.hidden {
    display: none
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.items-center {
    align-items: center
}

.items-stretch {
    align-items: stretch
}

.justify-between {
    justify-content: space-between
}

.justify-center {
    justify-content: center
}

.justify-start {
    justify-content: flex-start
}

.text-left {
    text-align: left
}

.flex-col {
    flex-direction: column
}

.flex-shrink-0 {
    flex-shrink: 0
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.sticky {
    position: sticky
}

.top-0 {
    top: 0
}

.left-4 {
    left: 1rem
}

.right-4 {
    right: 1rem
}

.top-1\/2 {
    top: 50%
}

.transform {
    transform: translateZ(0)
}

.-translate-y-1\/2 {
    transform: translateY(-50%)
}

.overflow-hidden {
    overflow: hidden
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.nav-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: .95rem;
    border: none;
    background: var(--color-nav-link-background);
    color: var(--gray-700);
    box-shadow: var(--color-nav-link-shadow);
    transition: color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .15s ease, background .15s ease;
    white-space: nowrap;
}

.nav-link svg {
    stroke: var(--color-text);
    width: 20px;
    height: 20px;
}

body.dark-mode .nav-link svg {
    stroke: var(--dark-text-color);
}

.nav-link:hover {
    color: var(--accent-turquoise);
    background: var(--color-nav-link-hover-background);
    box-shadow: var(--color-nav-link-hover-shadow);
    transform: translateY(-1px)
}

.nav-link:active {
    transform: translateY(0);
    box-shadow: var(--color-nav-link-active-shadow);
}

.nav-link:focus-visible {
    outline: 2px solid var(--accent-turquoise);
    outline-offset: 2px
}

button {
    border: none;
    cursor: pointer
}

button:focus {
    outline: none
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.max-w-7xl {
    max-width: 80rem
}

.max-w-4xl {
    max-width: 56rem
}

.w-full {
    width: 100%
}

.w-1\/2 {
    width: 50%
}

.w-auto {
    width: auto
}

.w-24 {
    width: 8rem
}

.h-full {
    height: 100%
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-16 {
    height: 4rem
}

.h-20 {
    height: 5rem
}

.h-24 {
    height: 4rem
}

.h-64 {
    height: 16rem
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-full {
    border-radius: 9999px
}

.object-cover {
    object-fit: cover
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-12 {
    margin-bottom: 3rem
}

.mt-0 {
    margin-top: 0
}

.mt-2 {
    margin-top: .5rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-10 {
    margin-top: 2.5rem
}

.pt-8 {
    padding-top: 2rem
}

.space-x-4>*+* {
    margin-left: 1rem
}

.space-x-8>*+* {
    margin-left: 2rem
}

.space-y-4>*+* {
    margin-top: 1rem
}

.gap-8 {
    gap: 2rem
}

.text-center {
    text-align: center
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 800
}

.font-semibold {
    font-weight: 600
}

.text-sm {
    font-size: .875rem
}

.text-lg {
    font-size: 1.125rem
}

.text-xl {
    font-size: 1.25rem
}

.text-2xl {
    font-size: 1.5rem
}

.text-3xl {
    font-size: 1.875rem
}

.text-4xl {
    font-size: 2.25rem
}

.text-5xl {
    font-size: 3rem
}

.text-7xl {
    font-size: 4.5rem
}

.opacity-70 {
    opacity: .7
}

.no-underline,
a.no-underline:visited {
    text-decoration: none
}

.line-through {
    text-decoration: line-through
}

.text-white {
    color: #fff
}

.text-black {
    color: #000
}

.text-gray-900 {
    color: var(--gray-900);
}

body.dark-mode .text-gray-900 {
    color: var(--dark-gray-900);
}

.text-gray-700 {
    color: var(--gray-700);
}

body.dark-mode .text-gray-700 {
    color: var(--dark-gray-700);
}

.text-gray-600 {
    color: var(--gray-600);
}

body.dark-mode .text-gray-600 {
    color: var(--dark-gray-600);
}

.text-gray-500 {
    color: var(--gray-500);
}

body.dark-mode .text-gray-500 {
    color: var(--dark-gray-500);
}

.text-red-600 {
    color: #dc2626
}

.text-accent-turquoise {
    color: var(--accent-turquoise)
}

.text-accent-orange,
.text-logo-purple {
    color: var(--logo-purple)
}

.bg-white {
    background-color: var(--color-background);
}

.bg-gray-50 {
    background-color: var(--gray-50);
}

body.dark-mode .bg-gray-50 {
    background-color: var(--dark-gray-50);
}

.bg-logo-cream {
    background-color: var(--logo-cream);
}

body.dark-mode .bg-logo-cream {
    background-color: var(--dark-logo-cream);
}

#services .grid>div {
    display: flex;
    flex-direction: column
}

#services .grid>div p:last-of-type {
    margin-top: auto
}

#prices .grid>div {
    display: flex;
    flex-direction: column
}

#prices .grid>div .price {
    margin-top: auto
}

#advantages .grid>div {
    display: flex;
    flex-direction: column
}

#advantages .grid>div p:last-of-type {
    margin-top: auto
}

.bg-gray-100 {
    background-color: var(--gray-100)
}

.bg-gray-900 {
    background-color: #111827
}

.bg-blue-600 {
    background-color: var(--blue-600)
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--gradient-from, #EFF6FF), var(--gradient-to, #F3E8FF));
}

body.dark-mode .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--gradient-from-dark, #2d3748), var(--gradient-to-dark, #4a5568));
}

.from-blue-50 {
    --gradient-from: #EFF6FF;
    --gradient-from-dark: #2a4365;
    /* A darker blue for dark mode */
}

.to-purple-50 {
    --gradient-to: #F3E8FF;
    --gradient-to-dark: #272235;
    /* A darker purple for dark mode */
}

.from-accent-turquoise {
    --gradient-from: var(--accent-turquoise);
    --gradient-from-dark: var(--dark-accent-turquoise);
}

.to-accent-orange {
    --gradient-to: var(--accent-orange);
    --gradient-to-dark: var(--dark-accent-orange);
}

.from-brand-teal {
    --gradient-from: var(--brand-teal);
    --gradient-from-dark: var(--dark-accent-turquoise);
    /* Using dark-accent-turquoise as a dark teal */
}

.to-brand-gold {
    --gradient-to: var(--brand-gold);
    --gradient-to-dark: var(--dark-accent-orange);
    /* Using dark-accent-orange as a dark gold */
}

.from-logo-aqua {
    --gradient-from: var(--logo-aqua);
    --gradient-from-dark: var(--dark-logo-aqua);
}

.to-logo-purple {
    --gradient-to: var(--logo-purple);
    --gradient-to-dark: var(--dark-logo-purple);
}

.shadow-sm {
    box-shadow: var(--color-box-shadow-sm)
}

.shadow-md {
    box-shadow: var(--color-box-shadow-md)
}

.shadow-lg {
    box-shadow: var(--color-box-shadow-lg)
}

.hover\:shadow-xl:hover {
    box-shadow: var(--color-hover-shadow-xl)
}

.border {
    border: 1px solid var(--color-border)
}

.border-2 {
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-border)
}

.border-t {
    border-top: 1px solid var(--color-border)
}

.border-gray-200 {
    border-color: var(--gray-200)
}

.border-gray-300 {
    border-color: var(--gray-300)
}

.border-gray-700 {
    border-color: #374151
}

.border-accent-turquoise {
    border-color: var(--accent-turquoise)
}

.border-logo {
    border-color: var(--logo-purple)
}

.transition-all {
    transition: all .2s ease
}

.transition-colors {
    transition: color .2s ease, background-color .2s ease
}

.transition-shadow {
    transition: box-shadow .2s ease
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .5s
}

.hover\:bg-gray-100:hover {
    background-color: var(--gray-100)
}

.hover\:bg-blue-700:hover {
    background-color: var(--blue-700)
}

.hover\:text-blue-400:hover {
    color: #60a5fa
}

.hover\:text-accent-turquoise:hover {
    color: var(--accent-turquoise)
}

.hover\:text-logo-purple:hover {
    color: var(--logo-purple)
}

.hover\:no-underline:hover {
    text-decoration: none
}

.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px #0000001a
}

.hover\:scale-105:hover {
    transform: scale(1.05)
}

@media(min-width:992px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .lg\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem
    }

    .lg\:text-5xl {
        font-size: 3rem
    }

    .lg\:text-4xl {
        font-size: 2.25rem
    }

    .lg\:text-7xl {
        font-size: 4rem;
        margin: 0
    }

    .lg\:w-1\/2 {
        width: 50%
    }

    .lg\:mt-0 {
        margin-top: 0
    }

    .lg\:flex {
        display: flex
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:gap-12 {
        gap: 3rem
    }

    .lg\:gap-16 {
        gap: 4rem
    }

    .lg\:gap-24 {
        gap: 6rem
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:items-stretch {
        align-items: stretch
    }

    .lg\:space-x-12>*+* {
        margin-left: 3rem
    }
}

input[type=text],
textarea {
    width: 100%;
    padding: .5rem 1rem;
    border: 1px solid var(--color-input-border);
    border-radius: .5rem;
    outline: none;
    background-color: var(--color-background);
    color: var(--color-text);
}

.focus\:outline-none:focus {
    outline: none
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px #2563eb4d
}

.focus\:ring-blue-600:focus {
    box-shadow: 0 0 0 2px var(--blue-600)
}

header.bg-white.shadow-sm {
    background-color: var(--color-header-background);
    box-shadow: var(--color-header-shadow);
}

.bg-gradient-to-r.text-white {
    color: #fff
}

.bg-gradient-to-r.btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    box-shadow: 0 10px 15px #0000001a;
    font-weight: 600
}

.cta-button {
    position: relative;
    cursor: pointer;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: var(--color-cta-button-shadow);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
    letter-spacing: .2px;
    transition: transform .2s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    height: 56px;
    padding: 0 24px;
    font-size: 18px
}

.cta-sm {
    min-width: 220px;
    height: 44px;
    padding: 0 18px;
    font-size: 16px
}

.cta-button:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--color-cta-button-hover-shadow);
}

.cta-button:active {
    transform: translateY(0) scale(.98);
    box-shadow: var(--color-cta-button-active-shadow);
}

.cta-button:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(to bottom, #ffffff59, #fff0)
}

.mobile-only-burger {
    display: block;
}

@media (min-width: 992px) {
    .mobile-only-burger {
        display: none;
    }
}

/* Notification styles */
/* Container for stacked notifications */
#notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    /* Ensure it's above most other elements */
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between notifications */
    max-width: 350px;
    /* Limit width for better readability */
}

/* Individual notification styles */
.notification {
    position: relative;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateX(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification.hide {
    opacity: 0;
    transform: translateX(100%);
}

.notification.success {
    background-color: #e6ffed;
    color: #1a7e3d;
    border: 1px solid #b3e6c9;
}

.notification.warning {
    background-color: #fff8e6;
    color: #8a6d3b;
    border: 1px solid #ffeeba;
}

.notification.error {
    background-color: #ffe6e6;
    color: #a94442;
    border: 1px solid #f5c6cb;
}

.notification.info {
    background-color: #e6f7ff;
    color: #31708f;
    border: 1px solid #bce8f1;
}

/* Close button style */
.notification .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    margin-left: 15px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.notification .close-btn:hover {
    opacity: 1;
}

/* Position for mobile */
@media (max-width: 768px) {
    #notification {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
}