.gec-widget-wrap {
    --gec-dark: hsl(248, 18%, 10%);
    --gec-fg: #ffffff;
    --gec-card-bg: linear-gradient(135deg, #d40000 0%, #580000 45%, #050505 100%);
    --gec-blend: soft-light;
    --gec-glow-blend: plus-lighter;
    --gec-glow-color: #ffe0a3;
    --gec-secondary-glow-color: #9ad7ff;
    --gec-glow-boost: 12px;
    --gec-glow-blur: 35px;
    --gec-glow-opacity: 1;
    --gec-glow-sens: 30;
    --gec-tilt-perspective: 900px;
    --gec-tilt-speed: 220ms;
    --gec-tilt-glare-color: #ffffff;
    --gec-tilt-glare-opacity: 0.22;
    display: flex;
    width: 100%;
}

.gec-card {
    --gec-glow-outset: 36px;
    --gec-color-sens: calc(var(--gec-glow-sens) + 20);
    --pointer-angle: 45deg;
    --pointer-d: 0;
    position: relative;
    box-sizing: border-box;
    width: min(100%, 420px);
    min-height: 360px;
    max-width: 100%;
    border-radius: 28px;
    isolation: isolate;
    transform: perspective(var(--gec-tilt-perspective)) rotateX(0deg) rotateY(0deg) scale(1) translate3d(0, 0, 0.01px);
    transform-style: preserve-3d;
    transition: transform var(--gec-tilt-speed) ease, box-shadow 0.2s ease;
    display: grid;
    overflow: visible;
    color: var(--gec-fg);
    border: 1px solid rgb(255 255 255 / 18%);
    background-repeat: no-repeat;
    box-shadow: 0 24px 80px rgb(0 0 0 / 20%);
}

.gec-card.gec-card-default-background {
    background: var(--gec-card-bg);
}

.gec-widget-wrap.gec-enter-pending {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.gec-widget-wrap.gec-enter-pending.gec-enter--slide {
    transform: translateY(24px);
}

.gec-widget-wrap.gec-enter-pending.gec-enter--scale {
    transform: scale(0.94);
}

.gec-widget-wrap.gec-enter-pending.gec-visible {
    opacity: 1;
    transform: none;
}

.gec-card > .gec-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.gec-card-media img,
.gec-card-media video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--gec-image-x, 50%) var(--gec-image-y, 50%);
}

.gec-card-body {
    border-radius: 14px;
}

.gec-card-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.gec-card[data-gec-clickable="yes"] {
    cursor: pointer;
}

.gec-card.gec-preset--subtle > .gec-glow::before {
    opacity: 0.35;
}

.gec-card.gec-preset--subtle::before,
.gec-card.gec-preset--subtle::after {
    filter: brightness(0.65);
}

.gec-card.gec-preset--static::before,
.gec-card.gec-preset--static::after,
.gec-card.gec-preset--static > .gec-glow,
.gec-card.gec-preset--static > .gec-tilt-glare {
    display: none;
}

.gec-card.gec-preset--static .gec-card-icon-wrap {
    animation: none !important;
}

.gec-card::before,
.gec-card::after,
.gec-card > .gec-glow,
.gec-card > .gec-tilt-glare,
.gec-card > .gec-card-overlay {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

.gec-card > .gec-card-overlay {
    z-index: 0;
    pointer-events: none;
}

.gec-card:not(:hover):not(.animating)::before,
.gec-card:not(:hover):not(.animating)::after,
.gec-card:not(:hover):not(.animating) > .gec-glow {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

.gec-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--gec-card-bg) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        radial-gradient(at 80% 55%, color-mix(in srgb, var(--gec-glow-color), transparent 12%) 0, transparent 50%) border-box,
        radial-gradient(at 22% 28%, color-mix(in srgb, var(--gec-secondary-glow-color), transparent 10%) 0, transparent 52%) border-box,
        radial-gradient(at 82% 18%, rgb(255 255 255 / 70%) 0, transparent 42%) border-box,
        linear-gradient(var(--gec-glow-color) 0 100%) border-box;
    opacity: calc((var(--pointer-d) - var(--gec-color-sens)) / (100 - var(--gec-color-sens)));
    -webkit-mask-image: conic-gradient(from var(--pointer-angle) at center, black 25%, transparent 40%, transparent 60%, black 75%);
    mask-image: conic-gradient(from var(--pointer-angle) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.gec-card::after {
    border: 1px solid transparent;
    background:
        radial-gradient(at 80% 55%, color-mix(in srgb, var(--gec-glow-color), transparent 8%) 0, transparent 50%) padding-box,
        radial-gradient(at 22% 28%, color-mix(in srgb, var(--gec-secondary-glow-color), transparent 8%) 0, transparent 52%) padding-box,
        radial-gradient(at 50% 10%, rgb(255 255 255 / 55%) 0, transparent 45%) padding-box,
        linear-gradient(var(--gec-glow-color) 0 100%) padding-box;
    -webkit-mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        conic-gradient(from var(--pointer-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        conic-gradient(from var(--pointer-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    -webkit-mask-composite: source-out, source-over, source-over, source-over;
    mask-composite: subtract, add, add, add;
    opacity: calc((var(--pointer-d) - var(--gec-color-sens)) / (100 - var(--gec-color-sens)));
    mix-blend-mode: var(--gec-blend);
}

.gec-card > .gec-glow {
    --gec-outset: var(--gec-glow-outset);
    inset: calc(0px - var(--gec-outset));
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image: conic-gradient(from var(--pointer-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    mask-image: conic-gradient(from var(--pointer-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    opacity: calc((var(--pointer-d) - var(--gec-glow-sens)) / (100 - var(--gec-glow-sens)));
    mix-blend-mode: var(--gec-glow-blend);
}

.gec-card > .gec-glow::before {
    content: "";
    position: absolute;
    inset: var(--gec-outset);
    border-radius: inherit;
    opacity: var(--gec-glow-opacity);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gec-glow-color), transparent 10%),
        inset 0 0 var(--gec-glow-blur) 0 color-mix(in srgb, var(--gec-glow-color), transparent 45%),
        inset 0 0 var(--gec-glow-blur) var(--gec-glow-boost) color-mix(in srgb, var(--gec-secondary-glow-color), transparent 60%),
        inset 0 0 var(--gec-glow-blur) var(--gec-glow-boost) color-mix(in srgb, var(--gec-glow-color), transparent 78%),
        0 0 var(--gec-glow-blur) 0 color-mix(in srgb, var(--gec-glow-color), transparent 40%),
        0 0 var(--gec-glow-blur) var(--gec-glow-boost) color-mix(in srgb, var(--gec-secondary-glow-color), transparent 58%),
        0 0 var(--gec-glow-blur) var(--gec-glow-boost) color-mix(in srgb, var(--gec-glow-color), transparent 78%);
}

.gec-card > .gec-tilt-glare {
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--gec-tilt-glare-color), transparent 20%), transparent 48%);
    transition: opacity var(--gec-tilt-speed) ease;
}

.gec-card[data-gec-glare="yes"]:hover > .gec-tilt-glare {
    opacity: var(--gec-tilt-glare-opacity);
}

.gec-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 24px;
    text-align: center;
}

.gec-card-badge {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgb(255 255 255 / 16%);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.gec-card-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gec-icon-spacing, 24px);
    border-radius: 22px;
}

@media (hover: hover) {
    .gec-icon-hover--pulse:hover .gec-card-icon-wrap {
        animation: gec-icon-pulse 1.4s ease-in-out infinite;
    }

    .gec-icon-hover--rotate:hover .gec-card-icon-wrap {
        animation: gec-icon-rotate 2.4s linear infinite;
    }

    .gec-icon-hover--float:hover .gec-card-icon-wrap {
        animation: gec-icon-float 1.8s ease-in-out infinite;
    }
}

@keyframes gec-icon-pulse {
    50% { transform: scale(1.08); }
}

@keyframes gec-icon-rotate {
    to { transform: rotate(360deg); }
}

@keyframes gec-icon-float {
    50% { transform: translateY(-7px); }
}

.gec-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

img.gec-card-icon {
    display: block;
}

.gec-card-library-icon {
    color: currentColor;
    font-size: 64px;
    line-height: 1;
}

.gec-card-library-icon i,
.gec-card-library-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.gec-card-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.gec-card-title {
    box-sizing: border-box;
    color: inherit;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 var(--gec-title-spacing, 14px);
    text-align: var(--gec-title-align, center);
}

.gec-card-heading {
    display: flex;
    align-items: center;
    justify-content: var(--gec-heading-justify, center);
    gap: var(--gec-icon-spacing, 24px);
    width: 100%;
    min-width: 0;
    margin-bottom: var(--gec-title-spacing, 14px);
}

.gec-card-heading .gec-card-icon-wrap {
    flex: none;
    margin-bottom: 0;
}

.gec-card-heading .gec-card-title {
    min-width: 0;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.gec-card-description {
    box-sizing: border-box;
    width: 100%;
    max-width: 36em;
    margin: 0 0 28px;
    color: rgb(255 255 255 / 72%);
    font-size: 1rem;
    line-height: 1.6;
}

.gec-card-description p {
    margin: 0;
}

.gec-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #101014;
    background: #ffffff;
    border: 1px solid rgb(255 255 255 / 28%);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.gec-card-button:hover,
.gec-card-button:focus {
    color: #101014;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
    text-decoration: none;
}

.gec-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.gec-card-actions .gec-card-button {
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.gec-card-button--secondary {
    color: #fff;
    background: transparent;
    border-color: rgb(255 255 255 / 70%);
}

.gec-card-button--secondary:hover,
.gec-card-button--secondary:focus {
    color: #fff;
    background: rgb(255 255 255 / 12%);
}

@media (max-width: 767px) {
    .gec-card-media video {
        display: none;
    }

    .gec-card {
        --gec-glow-outset: 18px;
        width: 100%;
        min-height: 320px;
        border-radius: 22px;
    }

    .gec-card-title {
        font-size: 1.65rem;
    }

    .gec-card-description {
        font-size: 0.95rem;
    }

    .gec-card-actions .gec-card-button {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gec-widget-wrap.gec-enter-pending,
    .gec-widget-wrap.gec-enter-pending.gec-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gec-card {
        transform: none !important;
        transition: none;
    }

    .gec-card::before,
    .gec-card::after,
    .gec-card > .gec-glow,
    .gec-card > .gec-tilt-glare,
    .gec-card-media video {
        display: none;
    }

    .gec-card-icon-wrap {
        animation: none !important;
    }

    .gec-card-button {
        transition: none;
    }

    .gec-card-button:hover,
    .gec-card-button:focus {
        transform: none;
    }
}