:root {
    --clr-primary: #007bff;
    --clr-primary-hover: #0056b3;
    --clr-bg: #f8f9fa;
    --clr-text: #333;
    --clr-accent: #ffc107;
    --clr-success: #28a745;
    --clr-error: #dc3545;
    --clr-border: #dee2e6;
    --clr-white: #fff;
    --clr-black: #000;
    --clr-overlay: rgba(0, 0, 0, 0.5);
    --font-base: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --line-height: 1.6;
    --font-scale-1: 0.75rem;
    --font-scale-2: 1rem;
    --font-scale-3: 1.5rem;
    --font-scale-4: 2rem;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 2rem;
    --radius: 0.25rem;
    --transition: 0.2s ease-in-out;
    --header-height: 0px
}

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

body {
    font-family: var(--font-base);
    line-height: var(--line-height);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    padding-top: var(--header-height, 0)
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--clr-primary);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

h1,h2,h3,h4,h5,h6 {
    margin-bottom: var(--sp-3);
    line-height: 1.2
}

h1 {
    font-size: var(--font-scale-4)
}

h2 {
    font-size: var(--font-scale-3)
}

h3 {
    font-size: calc(var(--font-scale-3)*.8)
}

body,h4 {
    font-size: var(--font-scale-2)
}

p {
    margin-bottom: var(--sp-3)
}

.hidden {
    display: none!important
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

.component-block {
    margin-bottom: var(--sp-4);
    padding: var(--sp-4)0;
    border-bottom: 1px solid var(--clr-border)
}

.component-block h2,.component-block h3 {
    margin-top: 0;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px dashed var(--clr-border)
}

.cmp-layout--one-col,.cmp-layout--two-col {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

.cmp-layout--two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4)
}

@media (min-width:768px) {
    .cmp-layout--two-col {
        grid-template-columns: 2fr 1fr
    }
}

.cmp-layout--three-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

@media (min-width:992px) {
    .cmp-layout--three-col {
        grid-template-columns: 1fr 2fr 1fr
    }
}

.cmp-layout--one-col>section,.cmp-layout--three-col>div>section,.cmp-layout--two-col>div>section,main .container>section {
    padding: var(--sp-4)0
}

.cmp-layout--one-col>section:first-child,.cmp-layout--three-col>div>section:first-child,.cmp-layout--two-col>div>section:first-child {
    padding-top: 0
}

.cmp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-scale-2);
    transition: background-color var(--transition),color var(--transition),border-color var(--transition);
    line-height: 1
}

.cmp-button,.cmp-button:hover {
    text-decoration: none
}

.cmp-button--primary {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    border-color: var(--clr-primary)
}

.cmp-button--primary:hover {
    background-color: var(--clr-primary-hover);
    border-color: var(--clr-primary-hover)
}

.cmp-button--ghost {
    background-color: transparent;
    color: var(--clr-primary);
    border-color: var(--clr-primary)
}

.cmp-button--ghost:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white)
}

.cmp-button--accent {
    background-color: var(--clr-accent);
    color: var(--clr-black);
    border-color: var(--clr-accent)
}

.cmp-button--accent:hover {
    background-color: darken(var(--clr-accent),10%);
    border-color: darken(var(--clr-accent),10%);
    filter: brightness(90%)
}

.cmp-button--error,.cmp-button--success {
    background-color: var(--clr-success);
    color: var(--clr-white);
    border-color: var(--clr-success)
}

.cmp-button--success:hover {
    background-color: darken(var(--clr-success),10%);
    border-color: darken(var(--clr-success),10%);
    filter: brightness(90%)
}

.cmp-button--error {
    background-color: var(--clr-error);
    border-color: var(--clr-error)
}

.cmp-button--error:hover {
    background-color: darken(var(--clr-error),10%);
    border-color: darken(var(--clr-error),10%);
    filter: brightness(90%)
}

.cmp-button--icon-only {
    padding: var(--sp-2);
    width: calc(var(--font-scale-2)*1.5 + var(--sp-4));
    height: calc(var(--font-scale-2)*1.5 + var(--sp-4))
}

.cmp-button--small {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--font-scale-1)
}

.cmp-button--large {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--font-scale-3)
}

.cmp-button-group {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap
}

.cmp-nav {
    background-color: var(--clr-white);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--sp-3)0
}

.cmp-nav__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

.cmp-nav__logo {
    font-size: var(--font-scale-3);
    font-weight: 700;
    color: var(--clr-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1)0;
    position: relative
}

.cmp-nav__logo::before {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url(./logo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius);
    flex-shrink: 0
}

.cmp-nav__menu-item a,.cmp-nav__menu-toggle {
    color: var(--clr-text);
    border-radius: var(--radius)
}

.cmp-nav__menu-toggle {
    display: none;
    background: 0 0;
    border: 0;
    cursor: pointer;
    font-size: var(--font-scale-3);
    padding: var(--sp-2);
    transition: background-color var(--transition)
}

.cmp-nav__menu-toggle:hover {
    background-color: var(--clr-bg)
}

.cmp-nav__menu,.cmp-nav__menu ul {
    display: flex;
    align-items: center;
    gap: var(--sp-3)
}

.cmp-nav__menu ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.cmp-nav__menu-item a {
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
    position: relative;
    transition: color var(--transition),background-color var(--transition);
    font-weight: 500
}

.cmp-nav__menu-item a:focus,.cmp-nav__menu-item a:hover {
    color: var(--clr-primary);
    background-color: var(--clr-bg);
    text-decoration: none
}

.cmp-nav__menu-item a::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-1);
    height: 2px;
    background-color: var(--clr-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition)
}

.cmp-nav__menu-item a:focus::after,.cmp-nav__menu-item a:hover::after {
    transform: scaleX(1)
}

.cmp-header--standard .cmp-nav {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    position: relative
}

.cmp-header--standard .cmp-nav__menu-item a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-scale-1);
    letter-spacing: .5px
}

.cmp-header--standard .cmp-nav__menu-item a::after {
    height: 3px;
    border-radius: 2px
}

.cmp-header--glassmorphism {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(222,226,230,.3)
}

.cmp-header--glassmorphism .cmp-nav {
    background: 0 0;
    border-bottom: none;
    padding: var(--sp-2)0
}

.cmp-header--glassmorphism .cmp-nav__logo::before {
    box-shadow: 0 2px 8px rgba(0,0,0,.1)
}

.cmp-header--glassmorphism .cmp-nav__menu-item a {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(222,226,230,.2);
    border-radius: calc(var(--radius)*3);
    padding: var(--sp-1) var(--sp-3);
    margin: 0 var(--sp-1);
    transition: all var(--transition)
}

.cmp-header--glassmorphism .cmp-nav__menu-item a:focus,.cmp-header--glassmorphism .cmp-nav__menu-item a:hover {
    background: rgba(0,123,255,.1);
    border-color: var(--clr-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,.2)
}

.cmp-header--glassmorphism .cmp-nav__menu-item a::after,.cmp-header--minimal .cmp-nav__menu-item a::after,.cmp-header--sleek .cmp-nav__menu-item a::after {
    display: none
}

.cmp-header--minimal .cmp-nav {
    padding: var(--sp-4)0;
    background: 0 0;
    border-bottom: 2px solid var(--clr-bg)
}

.cmp-nav__container--centered {
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center
}

.cmp-header--minimal .cmp-nav__logo {
    font-size: calc(var(--font-scale-3)*1.2);
    letter-spacing: 2px;
    text-transform: uppercase
}

.cmp-header--minimal .cmp-nav__logo::before {
    width: 50px;
    height: 50px
}

.cmp-nav__menu--spaced ul {
    gap: var(--sp-4)
}

.cmp-header--minimal .cmp-nav__menu-item a {
    font-weight: 400;
    font-size: var(--font-scale-2);
    padding: var(--sp-2) var(--sp-2);
    text-transform: lowercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: 0 0
}

.cmp-header--minimal .cmp-nav__menu-item a:focus,.cmp-header--minimal .cmp-nav__menu-item a:hover {
    background: 0 0;
    border-bottom-color: var(--clr-primary);
    transform: translateY(-2px)
}

@media (max-width:768px) {
    .cmp-nav__menu-toggle {
        display: block
    }

    .cmp-nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--clr-white);
        border-bottom: 1px solid var(--clr-border);
        box-shadow: 0 2px 10px rgba(0,0,0,.1);
        z-index: 10;
        padding: var(--sp-3)
    }

    .cmp-nav__menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2)
    }

    .cmp-nav__menu-item a::after,.cmp-nav__menu.hidden {
        display: none
    }

    .cmp-nav__menu-item a {
        display: block;
        padding: var(--sp-3);
        border-radius: var(--radius)
    }

    .cmp-header--glassmorphism .cmp-nav__menu {
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px)
    }

    .cmp-header--glassmorphism .cmp-nav__menu-item a {
        background: rgba(255,255,255,.8);
        margin: var(--sp-1)0
    }

    .cmp-nav__container--centered {
        flex-direction: column;
        gap: var(--sp-3)
    }

    .cmp-header--minimal .cmp-nav__menu-item a {
        border-bottom: 1px solid var(--clr-border);
        border-radius: var(--radius);
        text-transform: none
    }
}

.cmp-header--sleek {
    position: relative;
    background: 0 0;
    border: 0;
    box-shadow: none;
    padding: var(--sp-3)0
}

.cmp-nav--sleek {
    background: 0 0;
    border: 0;
    padding: 0
}

.cmp-nav__container--sleek {
    background-color: var(--clr-bg);
    border-radius: calc(var(--radius)*6);
    padding: var(--sp-2) var(--sp-3);
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    border: 1px solid rgba(255,255,255,.2);
    max-width: calc(100vw - var(--sp-4));
    justify-content: center
}

.cmp-header--sleek .cmp-nav__logo {
    margin: 0;
    padding: 0;
    flex-shrink: 0
}

.cmp-header--sleek .cmp-nav__logo::before {
    width: 32px;
    height: 32px
}

.cmp-header--sleek .cmp-nav__menu,.cmp-header--sleek .cmp-nav__menu ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0
}

.cmp-header--sleek .cmp-nav__menu ul {
    gap: var(--sp-1);
    list-style: none
}

.cmp-header--sleek .cmp-nav__menu-item a {
    color: var(--clr-text);
    text-decoration: none;
    padding: var(--sp-2) var(--sp-3);
    border-radius: calc(var(--radius)*4);
    font-weight: 500;
    font-size: var(--font-scale-2);
    transition: all var(--transition);
    white-space: nowrap;
    display: block
}

.cmp-header--sleek .cmp-nav__menu-item a:focus,.cmp-header--sleek .cmp-nav__menu-item a:hover {
    background-color: var(--clr-white);
    color: var(--clr-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    text-decoration: none
}

.cmp-header--sleek .cmp-nav__menu-toggle {
    background: var(--clr-white);
    border: 0;
    border-radius: calc(var(--radius)*2);
    padding: var(--sp-2);
    color: var(--clr-text);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 4px rgba(0,0,0,.1)
}

.cmp-header--sleek .cmp-nav__menu-toggle:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,.15)
}

@media (max-width:768px) {
    .cmp-header--sleek .cmp-nav__menu-toggle {
        display: block
    }

    .cmp-nav__container--sleek {
        justify-content: space-between;
        width: calc(100% - var(--sp-4));
        max-width: 500px
    }

    .cmp-header--sleek .cmp_nav__menu {
        position: absolute;
        top: calc(100% + var(--sp-2));
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--clr-bg);
        border-radius: calc(var(--radius)*4);
        padding: var(--sp-3);
        box-shadow: 0 8px 32px rgba(0,0,0,.12);
        border: 1px solid rgba(255,255,255,.2);
        z-index: 10;
        min-width: 280px;
        width: max-content
    }

    .cmp-header--sleek .cmp-nav__menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        width: 100%
    }

    .cmp-header--sleek .cmp-nav__menu.hidden {
        display: none
    }

    .cmp-header--sleek .cmp-nav__menu-item a {
        display: block;
        text-align: center;
        padding: var(--sp-3)
    }
}

@media (max-width:480px) {
    .cmp-nav__container--sleek {
        padding: var(--sp-2);
        gap: var(--sp-2)
    }

    .cmp-header--sleek .cmp-nav__logo::before {
        width: 28px;
        height: 28px
    }

    .cmp-header--sleek .cmp-nav__menu-item a {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--font-scale-1)
    }
}

.cmp-card {
    background-color: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%
}

.cmp-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 200px
}

.cmp-card__content {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.cmp-card__title {
    font-size: var(--font-scale-3);
    margin-top: 0;
    margin-bottom: var(--sp-2)
}

.cmp-card__text {
    margin-bottom: var(--sp-3);
    flex-grow: 1
}

.cmp-card__footer {
    margin-top: auto
}

.cmp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: var(--sp-4)
}

.cmp-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: var(--sp-3)
}

.cmp-dialog {
    background-color: var(--clr-white);
    padding: var(--sp-4);
    border-radius: var(--radius);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative
}

.cmp-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3)
}

.cmp-dialog__title {
    font-size: var(--font-scale-3);
    margin: 0
}

.cmp-dialog__close {
    background: 0 0;
    border: 0;
    font-size: var(--font-scale-3);
    cursor: pointer;
    padding: var(--sp-1);
    color: var(--clr-text);
    line-height: 1
}

.cmp-dialog__close:hover {
    color: var(--clr-error)
}

.cmp-dialog__content {
    margin-bottom: var(--sp-3)
}

.cmp-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2)
}

.cmp-accordion {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    overflow: hidden
}

.cmp-accordion__item {
    border-bottom: 1px solid var(--clr-border)
}

.cmp-accordion__item:last-child {
    border-bottom: none
}

.cmp-accordion__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--sp-3);
    background-color: var(--clr-bg);
    border: 0;
    text-align: left;
    font-size: var(--font-scale-2);
    font-weight: 700;
    cursor: pointer;
    color: var(--clr-text)
}

.cmp-accordion__button:hover {
    background-color: lighten(var(--clr-bg),5%);
    filter: brightness(95%)
}

.cmp-accordion__icon {
    width: 1em;
    height: 1em;
    transition: transform var(--transition)
}

.cmp-accordion__button[aria-expanded=true] .cmp-accordion__icon {
    transform: rotate(180deg)
}

.cmp-accordion__panel {
    padding: var(--sp-3);
    border-top: 1px solid var(--clr-border)
}

.cmp-accordion__panel.hidden {
    display: none
}

.cmp-tooltip-container {
    position: relative;
    display: inline-block
}

.cmp-tooltip-trigger {
    text-decoration: underline dotted;
    cursor: help
}

.cmp-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-var(--sp-2));
    background-color: var(--clr-black);
    color: var(--clr-white);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius);
    font-size: var(--font-scale-1);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 50
}

.cmp-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--sp-1);
    border-style: solid;
    border-color: var(--clr-black) transparent transparent transparent
}

.cmp-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

.cmp-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: var(--sp-3)
}

.cmp-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative
}

.cmp-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.cmp-lightbox-caption {
    background: rgba(0,0,0,.7);
    color: var(--clr-white);
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.cmp-lightbox-close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    background: rgba(255,255,255,.8);
    border: 0;
    border-radius: 50%;
    width: var(--sp-4);
    height: var(--sp-4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-scale-3);
    cursor: pointer;
    color: var(--clr-text);
    z-index: 110
}

.cmp-lightbox-close:hover {
    background: var(--clr-white)
}

.cmp-lightbox-thumbnail {
    cursor: pointer;
    border: 1px solid var(--clr-border);
    transition: border-color var(--transition)
}

.cmp-lightbox-thumbnail:hover {
    border-color: var(--clr-primary)
}

.cmp-carousel {
    position: relative;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto
}

.cmp-carousel__slides {
    display: flex;
    transition: transform .5s ease-in-out
}

.cmp-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start
}

.cmp-carousel__slide>* {
    padding: var(--sp-4);
    text-align: center
}

.cmp-carousel__controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 var(--sp-2);
    pointer-events: none
}

.cmp-carousel__button {
    background-color: rgba(255,255,255,.7);
    border: 0;
    border-radius: 50%;
    width: var(--sp-4);
    height: var(--sp-4);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-scale-3);
    color: var(--clr-text);
    pointer-events: all;
    transition: background-color var(--transition)
}

.cmp-carousel__button:hover {
    background-color: var(--clr-white)
}

.cmp-carousel__pagination {
    display: flex;
    justify-content: center;
    gap: var(--sp-1);
    margin-top: var(--sp-3)
}

.cmp-carousel__dot {
    width: var(--sp-2);
    height: var(--sp-2);
    border-radius: 50%;
    background-color: var(--clr-border);
    border: 0;
    cursor: pointer;
    transition: background-color var(--transition)
}

.cmp-carousel__dot.is-active {
    background-color: var(--clr-primary)
}

.cmp-breadcrumb,.cmp-carousel__autoplay-toggle {
    font-size: var(--font-scale-1);
    color: var(--clr-text)
}

.cmp-carousel__autoplay-toggle {
    position: absolute;
    bottom: var(--sp-2);
    right: var(--sp-2);
    background-color: rgba(255,255,255,.7);
    border: 0;
    border-radius: var(--radius);
    padding: var(--sp-1) var(--sp-2);
    cursor: pointer;
    z-index: 10
}

.cmp-carousel__autoplay-toggle:hover {
    background-color: var(--clr-white)
}

.cmp-breadcrumb {
    padding: var(--sp-2)0
}

.cmp-breadcrumb__list {
    list-style: none;
    flex-wrap: wrap
}

.cmp-breadcrumb__item,.cmp-breadcrumb__list {
    display: flex;
    align-items: center
}

.cmp-breadcrumb__item:not(:last-child)::after {
    content: "/";
    margin: 0 var(--sp-1);
    color: var(--clr-border)
}

.cmp-breadcrumb__link {
    color: var(--clr-text);
    text-decoration: none
}

.cmp-breadcrumb__link:hover {
    text-decoration: underline;
    color: var(--clr-primary)
}

.cmp-breadcrumb__item:last-child .cmp-breadcrumb__link {
    color: var(--clr-primary);
    font-weight: 700;
    cursor: default;
    text-decoration: none
}

.cmp-pagination,.cmp-pagination__link {
    align-items: center;
    justify-content: center
}

.cmp-pagination {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-3)0
}

.cmp-pagination__link {
    display: inline-flex;
    min-width: var(--sp-4);
    height: var(--sp-4);
    padding: 0 var(--sp-1);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    color: var(--clr-text);
    text-decoration: none;
    transition: background-color var(--transition),border-color var(--transition),color var(--transition)
}

.cmp-pagination__link.is-active,.cmp-pagination__link:hover {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-white)
}

.cmp-pagination__link:hover {
    text-decoration: none
}

.cmp-pagination__link.is-active {
    font-weight: 700;
    cursor: default
}

.cmp-pagination__link[aria-disabled=true] {
    opacity: .5;
    pointer-events: none;
    cursor: default
}

.cmp-progress {
    width: 100%;
    height: var(--sp-2);
    background-color: var(--clr-border);
    border-radius: var(--radius);
    overflow: hidden
}

.cmp-progress__bar {
    height: 100%;
    background-color: var(--clr-primary);
    width: 0%;
    transition: width var(--transition);
    border-radius: var(--radius)
}

.cmp-progress-circle {
    display: inline-grid;
    place-items: center;
    width: 80px;
    height: 80px;
    position: relative
}

.cmp-progress-circle>* {
    grid-area: 1/1
}

.cmp-progress-circle__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.cmp-progress-circle__progress,.cmp-progress-circle__track {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round
}

.cmp-progress-circle__track {
    stroke: var(--clr-border)
}

.cmp-progress-circle__progress {
    stroke: var(--clr-primary);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--progress-percent, 0));
    transition: stroke-dashoffset .5s ease-out
}

.cmp-progress-circle__text {
    font-size: var(--font-scale-2);
    font-weight: 700
}

.cmp-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer
}

.cmp-switch__label {
    font-size: var(--font-scale-2);
    cursor: pointer
}

.cmp-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none
}

.cmp-switch__slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    background-color: var(--clr-border);
    border-radius: 24px;
    transition: background-color var(--transition);
    flex-shrink: 0
}

.cmp-switch__slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--clr-white);
    top: 3px;
    left: 3px;
    transition: transform var(--transition)
}

.cmp-switch__input:checked+.cmp-switch__slider {
    background-color: var(--clr-primary)
}

.cmp-switch__input:checked+.cmp-switch__slider::before {
    transform: translateX(16px)
}

.cmp-switch__input:focus-visible+.cmp-switch__slider {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px
}

.cmp-tabs__list {
    display: flex;
    list-style: none;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap
}

.cmp-tabs__tab {
    margin-bottom: -1px
}

.cmp-tabs__button {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid transparent;
    border-bottom: none;
    background-color: transparent;
    font-size: var(--font-scale-2);
    cursor: pointer;
    color: var(--clr-text);
    transition: color var(--transition)
}

.cmp-tabs__button:focus,.cmp-tabs__button:hover {
    color: var(--clr-primary)
}

.cmp-tabs__button[aria-selected=true] {
    color: var(--clr-primary);
    border-color: var(--clr-border);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    font-weight: 700
}

.cmp-tabs__panel {
    padding: var(--sp-3);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius)
}

.cmp-dropdown__menu.hidden,.cmp-tabs__panel.hidden {
    display: none
}

.cmp-dropdown {
    position: relative;
    display: inline-block
}

.cmp-dropdown__button,.cmp-table td,.cmp-table th {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--clr-border)
}

.cmp-dropdown__button,.cmp-dropdown__menu {
    background-color: var(--clr-white);
    border-radius: var(--radius)
}

.cmp-dropdown__button {
    cursor: pointer;
    font-size: var(--font-scale-2);
    display: flex;
    align-items: center;
    gap: var(--sp-1)
}

.cmp-dropdown__button::after {
    content: "▼";
    font-size: .8em
}

.cmp-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid var(--clr-border);
    list-style: none;
    min-width: 150px;
    margin-top: var(--sp-1);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    z-index: 10
}

.cmp-dropdown__menu-item a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--clr-text);
    text-decoration: none
}

.cmp-dropdown__menu-item a:hover {
    background-color: var(--clr-bg);
    text-decoration: none
}

.cmp-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2)
}

.cmp-badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-2);
    background-color: var(--clr-primary);
    color: var(--clr-white);
    border-radius: var(--radius);
    font-size: var(--font-scale-1);
    font-weight: 700;
    text-transform: uppercase
}

.cmp-badge--secondary {
    background-color: var(--clr-border);
    color: var(--clr-text)
}

.cmp-badge--accent {
    background-color: var(--clr-accent);
    color: var(--clr-black)
}

.cmp-badge--error,.cmp-badge--success {
    background-color: var(--clr-success);
    color: var(--clr-white)
}

.cmp-badge--error {
    background-color: var(--clr-error)
}

.cmp-chip,.cmp-chip__remove {
    display: inline-flex;
    align-items: center;
    color: var(--clr-white)
}

.cmp-chip {
    padding: var(--sp-1);
    padding-left: var(--sp-2);
    background-color: var(--clr-primary);
    border-radius: 24px;
    font-size: var(--font-scale-1);
    gap: var(--sp-1)
}

.cmp-chip__remove {
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    background-color: rgba(255,255,255,.3);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: .8em;
    padding: 0
}

.cmp-chip__remove:hover {
    background-color: rgba(255,255,255,.5)
}

.cmp-toast-container {
    position: fixed;
    bottom: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sp-2);
    max-width: 90%;
    width: 400px;
    pointer-events: none
}

.cmp-alert,.cmp-toast {
    padding: var(--sp-3);
    border-radius: var(--radius)
}

.cmp-toast {
    background-color: rgba(0,0,0,.8);
    color: var(--clr-white);
    font-size: var(--font-scale-2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    pointer-events: all;
    opacity: 0;
    transform: translateY(var(--sp-4));
    transition: opacity var(--transition),transform var(--transition)
}

.cmp-toast.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.cmp-alert {
    border: 1px solid transparent;
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2)
}

.cmp-alert__icon {
    flex-shrink: 0;
    font-size: var(--font-scale-3)
}

.cmp-alert__content {
    flex-grow: 1
}

.cmp-alert__close {
    background: 0 0;
    border: 0;
    font-size: var(--font-scale-2);
    cursor: pointer;
    padding: var(--sp-1);
    line-height: 1;
    color: inherit;
    margin-left: auto
}

.cmp-alert--info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb
}

.cmp-alert--success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb
}

.cmp-alert--warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba
}

.cmp-alert--error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb
}

.cmp-avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background-color: var(--clr-border)
}

.cmp-avatar__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cmp-avatar--circle {
    border-radius: 50%
}

.cmp-avatar--square {
    border-radius: var(--radius)
}

.cmp-avatar--small {
    width: 30px;
    height: 30px
}

.cmp-avatar--large {
    width: 80px;
    height: 80px
}

.cmp-icon,.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 1.2em;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-variation-settings: "FILL"0,"wght"400,"GRAD"0,"opsz"24
}

.cmp-icon {
    fill: currentColor
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sp-4)
}

.cmp-table td,.cmp-table th {
    text-align: left
}

.cmp-table th {
    background-color: var(--clr-bg);
    font-weight: 700
}

.cmp-table tbody tr:nth-child(even) {
    background-color: lighten(var(--clr-bg),3%);
    filter: brightness(97%)
}

.cmp-table caption {
    caption-side: bottom;
    text-align: left;
    margin-top: var(--sp-2);
    font-size: var(--font-scale-1);
    color: var(--clr-text)
}

.cmp-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--sp-4)
}

.cmp-form label {
    display: block;
    margin-bottom: var(--sp-1);
    font-weight: 700;
    font-size: var(--font-scale-2)
}

.cmp-form input[type=email],.cmp-form input[type=number],.cmp-form input[type=password],.cmp-form input[type=text],.cmp-form select,.cmp-form textarea {
    display: block;
    width: 100%;
    padding: var(--sp-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    font-size: var(--font-scale-2);
    margin-bottom: var(--sp-3);
    font-family: inherit;
    line-height: inherit
}

.cmp-form textarea {
    resize: vertical
}

.cmp-form__group {
    margin-bottom: var(--sp-3)
}

.cmp-form__actions {
    margin-top: var(--sp-4)
}

.cmp-form__status {
    margin-top: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--radius);
    font-size: var(--font-scale-2)
}

.cmp-form__status--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb
}

.cmp-form__status--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb
}

.cmp-form__status.hidden {
    display: none
}

.cmp-contact-section__map iframe,.cmp-tag-input {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius)
}

.cmp-tag-input {
    padding: var(--sp-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    align-items: center;
    margin-bottom: var(--sp-3)
}

.cmp-tag-input__input {
    flex-grow: 1;
    border: 0;
    padding: var(--sp-1);
    font-size: var(--font-scale-2);
    outline: 0;
    min-width: 80px
}

.cmp-shield {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-scale-1);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--clr-white);
    border-radius: var(--radius);
    overflow: hidden
}

.cmp-shield__part {
    padding: var(--sp-1) var(--sp-2);
    white-space: nowrap
}

.cmp-shield__label {
    background-color: #555
}

.cmp-shield__value {
    background-color: var(--clr-primary)
}

.cmp-shield__value--success {
    background-color: var(--clr-success)
}

.cmp-shield__value--warning {
    background-color: var(--clr-accent)
}

.cmp-shield__value--error {
    background-color: var(--clr-error)
}

.cmp-shield__value--info {
    background-color: var(--clr-primary)
}

.cmp-hero {
    position: relative;
    padding: var(--sp-4)0;
    color: var(--clr-white);
    text-align: center;
    background-color: #6c757d;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center
}

.cmp-hero__background,.cmp-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.cmp-hero__background {
    object-fit: cover;
    z-index: 1
}

.cmp-hero__overlay {
    background-color: rgba(0,0,0,.5);
    z-index: 2
}

.cmp-hero__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

.cmp-hero__headline {
    font-size: var(--font-scale-4);
    margin-bottom: var(--sp-3);
    color: var(--clr-white)
}

.cmp-hero__text {
    font-size: var(--font-scale-3);
    margin-bottom: var(--sp-4);
    color: rgba(255,255,255,.9)
}

.cmp-hero .cmp-button-group {
    justify-content: center
}

.cmp-pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: var(--sp-4);
    align-items: stretch
}

.cmp-pricing-table .cmp-card {
    text-align: center;
    padding: var(--sp-3);
    border: 1px solid var(--clr-border)
}

.cmp-pricing-table .cmp-card__title {
    font-size: var(--font-scale-3);
    margin-bottom: var(--sp-2)
}

.cmp-pricing-table__price {
    font-size: var(--font-scale-4);
    font-weight: 700;
    margin-bottom: var(--sp-2);
    color: var(--clr-primary)
}

.cmp-pricing-table__features {
    list-style: none;
    margin-bottom: var(--sp-3);
    text-align: left;
    padding: 0 var(--sp-2)
}

.cmp-pricing-table__features li {
    margin-bottom: var(--sp-1);
    padding-left: 1.5em;
    position: relative
}

.cmp-pricing-table__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--clr-success)
}

.cmp-pricing-table__plan--highlighted {
    border-color: var(--clr-primary);
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    transform: translateY(-10px);
    transition: transform var(--transition),box-shadow var(--transition)
}

.cmp-pricing-table__plan--highlighted .cmp-pricing-table__price {
    color: var(--clr-accent)
}

.cmp-pricing-table__header {
    background-color: var(--clr-bg);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3)
}

.cmp-testimonials .cmp-carousel__slide>* {
    padding: var(--sp-4);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    font-style: italic
}

.cmp-testimonials__author {
    font-style: normal;
    font-weight: 700;
    margin-top: var(--sp-2);
    display: block
}

.cmp-faq .cmp-accordion {
    max-width: 800px;
    margin: 0 auto
}

.cmp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: var(--sp-2)
}

.cmp-gallery-item .cmp-lightbox-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius)
}

.cmp-contact-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-top: 3rem
}

@media (min-width:768px) {
    .cmp-contact-section {
        grid-template-columns: 1fr 1fr
    }
}

.cmp-contact-section__map iframe {
    width: 100%;
    height: 300px
}

.cmp-cta-banner {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    padding: var(--sp-4)0;
    text-align: center
}

.cmp-cta-banner__content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--sp-3)
}

.cmp-cta-banner__title {
    font-size: var(--font-scale-3);
    margin-bottom: var(--sp-2);
    color: var(--clr-white)
}

.cmp-cta-banner__text {
    font-size: var(--font-scale-2);
    margin-bottom: var(--sp-3)
}

.cmp-cta-banner .cmp-button {
    background-color: var(--clr-white);
    color: var(--clr-primary)
}

.cmp-cta-banner .cmp-button:hover {
    background-color: var(--clr-bg)
}

.cmp-metrics-bar {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3)0;
    background-color: var(--clr-white);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border)
}

.cmp-metrics-bar__item {
    text-align: center
}

.cmp-metrics-bar__value {
    font-size: var(--font-scale-3);
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: var(--sp-1)
}

.cmp-metrics-bar__label {
    font-size: var(--font-scale-1);
    text-transform: uppercase;
    color: var(--clr-text)
}

.cmp-footer {
    background-color: #343a40;
    color: #adb5bd;
    padding: var(--sp-4)0;
    font-size: var(--font-scale-2)
}

.cmp-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3);
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: var(--sp-4)
}

.cmp-footer__logo,.cmp-footer__section-title {
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--sp-3)
}

.cmp-footer__logo {
    font-size: var(--font-scale-3);
    text-decoration: none;
    display: block
}

.cmp-footer__section-title {
    font-size: var(--font-scale-2)
}

.cmp-footer__nav-list,.cmp-footer__social-list {
    list-style: none
}

.cmp-footer__nav-item,.cmp-footer__social-item {
    margin-bottom: var(--sp-2)
}

.cmp-footer__nav-item a,.cmp-footer__social-item a {
    color: inherit;
    text-decoration: none
}

.cmp-footer__nav-item a:hover,.cmp-footer__social-item a:hover {
    text-decoration: underline;
    color: var(--clr-primary)
}

.cmp-footer__social-list {
    display: flex;
    gap: var(--sp-2)
}

.cmp-footer__social-item .cmp-icon {
    width: var(--sp-3);
    height: var(--sp-3);
    fill: inherit
}

.cmp-footer__legal {
    grid-column: 1/-1;
    text-align: center;
    margin-top: var(--sp-4);
    font-size: var(--font-scale-1);
    color: #adb5bd
}

.cmp-footer__legal a {
    color: inherit;
    text-decoration: underline
}

.cmp-header {
    position: relative;
    z-index: 50;
    background-color: var(--clr-white)
}

.cmp-header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,.1)
}

.cmp-logo-cloud {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: var(--sp-4);
    align-items: center;
    justify-items: center;
    padding: var(--sp-4)0
}

.cmp-logo-cloud__item img {
    display: block;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter var(--transition),opacity var(--transition)
}

.cmp-logo-cloud__item img:hover {
    filter: grayscale(0%);
    opacity: 1
}

.cmp-stepper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4)
}

.cmp-stepper__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3)
}

.cmp-stepper__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--sp-4);
    height: var(--sp-4);
    border-radius: 50%;
    background-color: var(--clr-primary);
    color: var(--clr-white);
    font-size: var(--font-scale-2);
    font-weight: 700;
    flex-shrink: 0
}

.cmp-stepper__content {
    flex-grow: 1
}

.cmp-stepper__title {
    font-size: var(--font-scale-3);
    margin-top: 0;
    margin-bottom: var(--sp-2)
}

.cmp-comparison-table td,.cmp-stats-grid,.cmp-team-section .cmp-card {
    text-align: center
}

.cmp-team-section .cmp-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--sp-3)
}

.cmp-blog-list .cmp-card__image {
    max-height: 180px
}

.cmp-stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--sp-4)
}

.cmp-stats-grid__item {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 150px
}

.cmp-stats-grid__icon .cmp-icon {
    width: var(--sp-4);
    height: var(--sp-4);
    fill: var(--clr-primary);
    margin-bottom: var(--sp-2)
}

.cmp-stats-grid__value {
    font-size: var(--font-scale-4);
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--sp-1)
}

.cmp-stats-grid__label {
    font-size: var(--font-scale-2);
    color: var(--clr-text)
}

.cmp-comparison-table td[data-feature-available=true]::before {
    content: "✓";
    color: var(--clr-success);
    font-weight: 700;
    display: inline-block;
    margin-right: var(--sp-1)
}

.cmp-comparison-table td[data-feature-available=false]::before {
    content: "✗";
    color: var(--clr-error);
    font-weight: 700;
    display: inline-block;
    margin-right: var(--sp-1)
}

.cmp-comparison-table th {
    text-align: left
}

.cmp-timeline {
    position: relative;
    padding: var(--sp-4)0
}

.cmp-timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--clr-border)
}

.cmp-timeline__item {
    position: relative;
    margin-bottom: var(--sp-4);
    padding-left: var(--sp-4)
}

.cmp-timeline__item::before {
    content: "";
    position: absolute;
    left: 14px;
    top: var(--sp-1);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--clr-primary);
    border: 2px solid var(--clr-white);
    z-index: 1
}

.cmp-timeline__item:last-child {
    margin-bottom: 0
}

.cmp-timeline__item .cmp-card {
    margin-top: 0
}

.cmp-header+main .container>section:first-of-type {
    padding-top: 0
}