:root {
    /* DEFAULT COLORS */
    --white-color: #ffffff;
    --black-color: #000000;
    --dark-color: #161616;
    --darker-color: #111111;
    
    --border-color: #ffffff25;
    --border-color-soft: #ffffff10;
    --hovered-border-color: #ffffff40;

    /* CASCADIA WEB SERVICES COLORS */
    --red-color: #ff7777;
    --blue-color: #77bbff;
    --green-color: #bbff77;
    --purple-color: #bb77ff;
    --yellow-color: #ffff77;
    --orange-color: #ffbb77;
    --pink-color: #ffa6c9;
    --cyan-color: #77ffee;
    
    /* CASCADIA WEB SERVICES COLORS -DARK GRADIENT */
    --dark-gradient: linear-gradient(10deg,color-mix(in srgb, var(--dark-color) 10%, black), transparent);
    --darker-gradient: linear-gradient(10deg,color-mix(in srgb, var(--darker-color) 10%, black), transparent);
    --dark-silver-gradient: linear-gradient(10deg,color-mix(in srgb, var(--white-color) 10%, black), transparent);
    --dark-ash-gradient: linear-gradient(135deg, color-mix(in srgb, var(--white-color) 25%, #000000), #ffffff05);
    --dark-red-gradient: linear-gradient(10deg,color-mix(in srgb, var(--red-color) 10%, black), transparent);
    --dark-blue-gradient: linear-gradient(10deg,color-mix(in srgb, var(--blue-color) 10%, black), transparent);
    --dark-green-gradient: linear-gradient(10deg,color-mix(in srgb, var(--green-color) 10%, black), transparent);
    --dark-purple-gradient: linear-gradient(10deg,color-mix(in srgb, var(--purple-color) 10%, black), transparent);
    --dark-yellow-gradient: linear-gradient(10deg,color-mix(in srgb, var(--yellow-color) 10%, black), transparent);
    --dark-orange-gradient: linear-gradient(10deg,color-mix(in srgb, var(--orange-color) 10%, black), transparent);
    --dark-pink-gradient: linear-gradient(10deg,color-mix(in srgb, var(--pink-color) 10%, black), transparent);
    --dark-cyan-gradient: linear-gradient(10deg,color-mix(in srgb, var(--cyan-color) 10%, black), transparent);


    /* CWS TRANSPARENT COLORS */
    --red-transparent: #ff777700;
    --blue-transparent: #77bbff00;
    --green-transparent: #bbff7700;
    --purple-transparent: #bb77ff00;
    --yellow-transparent: #ffff7700;
    --orange-transparent: #ffbb7700;
    --pink-transparent: #ffa6c900;
    --cyan-transparent: #77ffee00;

    /* CWS SHADOW COLORS */
    --red-shadow: #ff777726;
    --blue-shadow: #77bbff26;
    --green-shadow: #bbff7726;
    --purple-shadow: #bb77ff26;
    --yellow-shadow: #ffff7726;
    --orange-shadow: #ffbb7726;
    --pink-shadow: #ffa6c926;
    --cyan-shadow: #77ffee26;

    /* CWS BORDER COLORS */
    --red-border-color: #ff777775;
    --blue-border-color: #77bbff45;
    --green-border-color: #bbff7745;
    --purple-border-color: #bb77ff45;
    --yellow-border-color: #ffff7745;
    --orange-border-color: #ffbb7745;
    --pink-border-color: #ffa6c945;
    --cyan-border-color: #77ffee45;

    /* CASCADIA WEB SERVICES SUBTLE COLORS */
    --red-subtle-color: #ff777785;
    --red-subtle-border-color: #ff777735;
    --red-subtle-shadow: #ff777710;

    --blue-subtle-color: #77bbff85;
    --blue-subtle-border-color: #77bbff35;
    --blue-subtle-shadow: #77bbff10;

    --green-subtle-color: #bbff7785;
    --green-subtle-border-color: #bbff7735;
    --green-subtle-shadow: #bbff7710;

    --purple-subtle-color: #bb77ff85;
    --purple-subtle-border-color: #bb77ff35;
    --purple-subtle-shadow: #bb77ff10;

    --yellow-subtle-color: #ffff7785;
    --yellow-subtle-border-color: #ffff7735;
    --yellow-subtle-shadow: #ffff7710;

    --orange-subtle-color: #ffbb7785;
    --orange-subtle-border-color: #ffbb7735;
    --orange-subtle-shadow: #ffbb7710;

    --pink-subtle-color: #ffa6c985;
    --pink-subtle-border-color: #ffa6c935;
    --pink-subtle-shadow: #ffa6c910;

    --cyan-subtle-color: #77ffee85;
    --cyan-subtle-border-color: #77ffee35;
    --cyan-subtle-shadow: #77ffee10;


    /* CWS CTA SETTINGS */
    --button-border-width: 1px;
    --button-border-type: solid;

    /* CWS CARD SETTINGS */
    --card-border-width: 1px;
    --card-border-type: solid;
    --card-box-shadow-setting: 0px 0px 50px 20px;

    /* CRYSTALLIZED EFFECT COLOR */
    --silver-crystallized: linear-gradient(45deg, #cacacab5 0%, #dcdfe394 15%, #dcdcdc91 25%, #bfc5cced 40%, #d1d1d1d1 55%, #aab2bbc4 70%, #dadadac9 85%, #d6dbe19c 100%) !important;
    --silver-highlight-overlay: radial-gradient(circle at 30% 20%, rgb(81 81 81 / 39%), transparent 60%), radial-gradient(circle at 70% 80%, rgb(255 255 255), transparent 60%), radial-gradient(circle at center, #737373bd 0%, #a2a2a2cf 40%, #484848e0 100%);


}

/* === GLOBAL STYLE === */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 50px !important;
}

body.menu-open{
    overflow: hidden;
}

.scene * {
    overflow: visible !important;
}

.footer * {
    border-color: var(--border-color) !important;
}

a {
    cursor: pointer;
}
a.text-link {
    text-decoration: none !important;
}

p {
	text-wrap: pretty !important;
}

.z-1 {
    z-index: 1 !important;
}

.hidden {
  display: none;
}

ol.table-of-content-links {
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin: 0;
    padding-left: 25px;
}
ol.table-of-content-links li a {
    transition: color 0.3s ease-in-out;
}
ol.table-of-content-links li a:hover {
    color: #ffffff;
}

.text-left {
    text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
    text-align: right;
}

@media screen and (max-width: 1024px) {
  .laptop-position-unset {
    position: unset !important;
  }
}
/* === END GLOBAL STYLE === */


/* === HERO CONTENT === */

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content::before {
    content: "";
    position: absolute;
    inset: -80px -140px;
    z-index: -1;
    pointer-events: none;

    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.75) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%
    );

    filter: blur(26px);
}

.hero-content h1,
.hero-content p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* TEXT SLIDER */
.text-slider-wrap {
    display: inline-flex;
    justify-content: flex-start;
    align-items: baseline;
    white-space: nowrap;
    vertical-align: top;
}

.text-slider {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 220px;
    max-width: 100%;
    height: 1.1em;
    line-height: 1.1em;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: left;
}

.text-slider .text-slide {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    pointer-events: none;
    line-height: 1.1em;
    will-change: transform, opacity;
}

.text-slider.text-gradient-green .text-slide {
    background: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-slide.is-active,
.text-slide.is-entering,
.text-slide.is-leaving {
    visibility: visible;
}

.text-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.text-slide.is-entering {
    animation: textSlidePushIn 0.5s ease-in-out forwards;
}

.text-slide.is-leaving {
    animation: textSlidePushOut 0.5s ease-in-out forwards;
}

@keyframes textSlidePushIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textSlidePushOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}
@media (max-width: 436px) {
    .text-slider-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .text-slider {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .text-slider .text-slide {
        left: 0;
        width: 100%;
        text-align: center;
    }
}
/* === END HERO CONTENT === */

/* === CASCADIA WEB SERVICES - TEXT GRADIENT === */
.text-gradient-silver {
    background: linear-gradient(to bottom right, #ffffff 30%, #ffffff80);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-red {
    background: linear-gradient(to bottom right, var(--red-color) 30%, #9b3a3a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.text-gradient-blue {
    background: linear-gradient(to bottom right, var(--blue-color) 30%, #3a4a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(to bottom right, var(--purple-color) 30%, #4a3a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-yellow {
    background: linear-gradient(to bottom right, var(--yellow-color) 30%, #a3a33d);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-orange {
    background: linear-gradient(to bottom right, var(--orange-color) 30%, #a3713f);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-pink {
    background: linear-gradient(to bottom right, var(--pink-color) 30%, #9e4b6c);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-cyan {
    background: linear-gradient(to bottom right, var(--cyan-color) 30%, #339e92);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
/* === END CASCADIA WEB SERVICES - TEXT GRADIENT === */


/* === ZORO APPS - TEXT GRADIENT === */
.text-gradient-bigin {
    background: linear-gradient(to bottom right, #4CAF50 30%, #8BCF8F);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-bookings {
    background: linear-gradient(to bottom right, #00A79D 30%, #66D1C9);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-crm {
    background: linear-gradient(to bottom right, #0066CC 30%, #66A3FF);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-forms {
    background: linear-gradient(to bottom right, #4CAF50 30%, #8BCF8F);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-routeiq {
    background: linear-gradient(to bottom right, #7B3FA1 30%, #B07FCC);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-salesiq {
    background: linear-gradient(to bottom right, #E53935 30%, #F28C8A);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-sign {
    background: linear-gradient(to bottom right, #3F51B5 30%, #8796E0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-thrive {
    background: linear-gradient(to bottom right, #FBC02D 30%, #FFD966);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
/* === END ZOHO APPS - TEXT GRADIENT === */


/* === TEXT BADGE STYLE === */
.text-badge.red {
    /* border-color: var(--red-color); */
    background: color-mix(in srgb, var(--red-color) 10%, black);
}
.text-badge.red div {
    color: var(--red-color);
}

.text-badge.blue {
    /* border-color: var(--blue-color); */
    background: color-mix(in srgb, var(--blue-color) 10%, black);
}
.text-badge.blue div {
    color: var(--blue-color);
}

.text-badge.green {
    /* border-color: var(--green-color); */
    background: color-mix(in srgb, var(--green-color) 10%, black);
}
.text-badge.green div {
    color: var(--green-color);
}

.text-badge.purple {
    /* border-color: var(--purple-color); */
    background: color-mix(in srgb, var(--purple-color) 10%, black);
}
.text-badge.purple div {
    color: var(--purple-color);
}

.text-badge.yellow {
    /* border-color: var(--yellow-color); */
    background: color-mix(in srgb, var(--yellow-color) 10%, black);
}
.text-badge.yellow div {
    color: var(--yellow-color);
}

.text-badge.orange {
    /* border-color: var(--orange-color); */
    background: color-mix(in srgb, var(--orange-color) 10%, black);
}
.text-badge.orange div {
    color: var(--orange-color);
}

.text-badge.pink {
    /* border-color: var(--pink-color); */
    background: color-mix(in srgb, var(--pink-color) 10%, black);
}
.text-badge.pink div {
    color: var(--pink-color);
}

.text-badge.cyan {
    /* border-color: var(--cyan-color); */
    background: color-mix(in srgb, var(--cyan-color) 10%, black);
}
.text-badge.cyan div {
    color: var(--cyan-color);
}

.text-badge.vs {
    z-index: 1;
    transform: rotate(350deg);
}
/* === TEXT HERO BADGE STYLE === */


/* === CUSTOM CTA === */
.primary-button,
.blog-filter-category a,
.kb-filter-category a{
    position: relative;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease-in-out;
}
.primary-button::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	bottom: 0px;
	right: 9px;
	border-left: 10px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 10px solid transparent;
	border-top: 10px solid #ffffff;
	transform: rotate(90deg);
	transition: border-top 0.3s ease-in-out;
}
.primary-button:hover::after {
    border-top: 10px solid #000000;
}
.primary-button:hover p {
    color: #000000;
}

.primary-button:hover {
    background: #ffffff;
}

.red-button.primary-button,
.red-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-color) !important;
}

.blue-button.primary-button,
.blue-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--blue-color) !important;
}

.green-button.primary-button,
.green-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--green-color) !important;
}

.purple-button.primary-button,
.purple-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--purple-color) !important;
}

.yellow-button.primary-button,
.yellow-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--yellow-color) !important;
}

.orange-button.primary-button,
.orange-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--orange-color) !important;
}

.pink-button.primary-button,
.pink-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--pink-color) !important;
}

.cyan-button.primary-button,
.cyan-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--cyan-color) !important;
}

.red-subtle-button.primary-button,
.red-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-subtle-color) !important;
}

.red-button.primary-button:hover,
.red-card .primary-button:hover {
    background: var(--red-color);
}
.blue-button.primary-button:hover,
.blue-card .primary-button:hover {
    background: var(--blue-color);
}

.green-button.primary-button:hover,
.green-card .primary-button:hover {
    background: var(--green-color);
}

.purple-button.primary-button:hover,
.purple-card .primary-button:hover {
    background: var(--purple-color);
}

.yellow-button.primary-button:hover,
.yellow-card .primary-button:hover {
    background: var(--yellow-color);
}

.orange-button.primary-button:hover,
.orange-card .primary-button:hover {
    background: var(--orange-color);
}

.pink-button.primary-button:hover,
.pink-card .primary-button:hover {
    background: var(--pink-color);
}

.cyan-button.primary-button:hover,
.cyan-card .primary-button:hover {
    background: var(--cyan-color);
}

.red-subtle-card .primary-button:hover {
    background: var(--red-subtle-color);
}

/* BLOG FILTER BUTTON */
.blog-filter-category a:hover,
.kb-filter-category a:hover {
    border-color: var(--white-color);
}
.blog-filter-category a:active,
.blog-filter-category a.active,
.kb-filter-category a:active,
.kb-filter-category a.active {
    background: var(--white-color);
}
.blog-filter-category a:hover p,
.kb-filter-category a:hover p {
    color: var(--white-color);
}
.blog-filter-category a:active p,
.blog-filter-category a.active p,
.kb-filter-category a:active p,
.kb-filter-category a.active p {
    color: var(--black-color);
}

/* === END CUSTOM CTA === */


/* === GLOBAL HEADER === */
.header-logo {
    transition: opacity 0.3s ease-in-out;
}
.header-logo:hover {
    opacity: 0.6;
}
.desktop-menu .dropdown-container {
    background: #000000a4;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 0px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(255, 255, 255, 0), inset 0 0 30px 5px rgb(0 0 0 / 45%);
}
.desktop-menu .has-dropdown:hover .dropdown-container {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}
.desktop-menu .nav-link a, 
.desktop-menu .nav-link a div.__text_block__,
.desktop-menu .nav-link a span.__text_block__ {
    transition: color 0.3s ease-in-out;
}
.desktop-menu .nav-link:hover a.dropdown div.__text_block__,
.desktop-menu .nav-link:hover > a,
.desktop-menu .menu-dropdown a:hover,
.desktop-menu .menu-dropdown a:hover div.__text_block__ {
    color: #ffffff !important;
    cursor: pointer;
}

.desktop-menu .menu-dropdown a {
    transition: background 0.3s ease-in-out;
}
.desktop-menu .menu-dropdown a:hover {
    background: #000000e3;
}
.desktop-menu .nav-link a:hover span.__text_block__ {
    color: #cfcfcf;
}
.desktop-menu .menu-dropdown:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1));
}
.desktop-menu .menu-dropdown:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
/* .desktop-menu .menu-dropdown {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 0px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(255, 255, 255, 0), inset 0 0 30px 5px rgb(0 0 0 / 45%);
    position: relative;
    overflow: hidden;
} */

/* = MOBILE NAVIGATION = */
.mobile-menu{
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    z-index: 999999;
    height: 100vh;
    height: 100dvh;
}
.mobile-navigation {
    height: calc(100vh - 185px);
    height: calc(100dvh - 185px);
}
.mobile-menu.open{
    transform: translateX(0%);
}
.mobile-menu .dropdown-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-nav-link .dropdown img {
    transition: transform .3s ease;
}
.mobile-nav-link.open .dropdown img {
    transform: rotate(180deg);
}
/* === END GLOBAL HEADER === */


/* === GLASS CARD === */
.glass-effect,
.glass-card {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(255, 255, 255, 0),
        inset 0 0 50px 5px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
}
.glass-card:hover {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 50px 5px rgba(255, 255, 255, 0.1);
}
.glass-effect::before,
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}
.glass-effect::after,
.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
}
/* === END GLASS CARD === */


/* === CARDS WITH SHINE BORDER & GLOBAL CARDS=== */

.card {
    background-color: #0000004D !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
    transition-delay: 0.25s !important;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 0 0 rgba(51, 50, 50, 0.5);
    background-color: transparent;
    background-image: linear-gradient(176deg, #0000006B 0%, #0000008F 100%);
}
.card:hover {
    border-color: var(--hovered-border-color) !important;
    box-shadow: inset -40px -40px 50px -25px rgba(51, 50, 50, 0.5);
}

.red-card {
    border: var(--card-border-width) var(--card-border-type) var(--red-border-color) !important;
}
.red-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--red-subtle-border-color) !important;
}

.blue-card {
    border: var(--card-border-width) var(--card-border-type) var(--blue-border-color) !important;
}
.blue-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--blue-subtle-border-color) !important;
}

.green-card {
    border: var(--card-border-width) var(--card-border-type) var(--green-border-color) !important;
}
.green-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--green-subtle-border-color) !important;
}

.purple-card {
    border: var(--card-border-width) var(--card-border-type) var(--purple-border-color) !important;
}
.purple-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--purple-subtle-border-color) !important;
}

.yellow-card {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-border-color) !important;
}
.yellow-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-subtle-border-color) !important;
}

.orange-card {
    border: var(--card-border-width) var(--card-border-type) var(--orange-border-color) !important;
}
.orange-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--orange-subtle-border-color) !important;
}

.pink-card {
    border: var(--card-border-width) var(--card-border-type) var(--pink-border-color) !important;
}
.pink-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--pink-subtle-border-color) !important;
}

.cyan-card {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-border-color) !important;
}
.cyan-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-subtle-border-color) !important;
}

.red-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--red-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--red-shadow) !important;
}
.red-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--red-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--red-subtle-shadow) !important;
}

.blue-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--blue-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--blue-shadow) !important;
}
.blue-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--blue-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--blue-subtle-shadow) !important;
}

.green-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--green-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--green-shadow) !important;
}
.green-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--green-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--green-subtle-shadow) !important;
}

.purple-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--purple-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--purple-shadow) !important;
}
.purple-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--purple-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--purple-subtle-shadow) !important;
}

.yellow-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--yellow-shadow) !important;
}
.yellow-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--yellow-subtle-shadow) !important;
}

.orange-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--orange-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--orange-shadow) !important;
}
.orange-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--orange-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--orange-subtle-shadow) !important;
}

.pink-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--pink-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--pink-shadow) !important;
}
.pink-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--pink-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--pink-subtle-shadow) !important;
}

.cyan-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--cyan-shadow) !important;
}
.cyan-subtle-card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-subtle-color) !important;
    box-shadow: inset var(--card-box-shadow-setting) var(--cyan-subtle-shadow) !important;
}


.shine-border::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 25%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(143, 143, 143, 0.67) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
    border: 0;
    transition: all 0.5s ease;
}
.shine-border::before {
    top: 0px;
    left: 0;
}
.shine-border:hover::before {
    top: 0px;
    width: 100%;
}
.shine-border::after {
    bottom: 0;
    right: 0;
}

.red-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--red-transparent) 0%, var(--red-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.blue-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--blue-transparent) 0%, var(--blue-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.green-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--green-transparent) 0%, var(--green-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.purple-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--purple-transparent) 0%, var(--purple-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.yellow-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--yellow-transparent) 0%, var(--yellow-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.orange-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--orange-transparent) 0%, var(--orange-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.pink-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--pink-transparent) 0%, var(--pink-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.cyan-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--cyan-transparent) 0%, var(--cyan-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

.red-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--red-transparent) 0%, var(--red-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

.shine-border.top::after {
	display: none;
}
.shine-border.top.center::before {
	top: 0px;
    left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(225 225, 225, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.shine-border.bottom::before {
	display: none;
}

/* PRICING CARDS */
.pricing-cards-grid, .pricing-cards-wrapper {
    overflow: unset;
}
.pricing-card.highlighted.shine-border svg.crystal-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.pricing-card.highlighted.shine-border > *:not(svg) {
    /* position: relative; */
    z-index: 2;
}
.pricing-card.highlighted::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    backdrop-filter: blur(1px);
    transition: all 0.8s ease-in-out;
    opacity: 0.1;
}
.pricing-card.crystallized.highlighted.shine-border {
    position: relative;
    overflow: unset;
    isolation: isolate;
    border-color: var(--border-color);
    background: var(--silver-crystallized) !important;
    box-shadow: inset 0px 0px 20px 0 rgb(255 255 255 / 50%), inset -0px -0px 20px 0 rgb(132 132 132 / 50%);
}
.pricing-card.crystallized.highlighted:has(.price-banner) {
    overflow: hidden;
}
.pricing-card.highlighted:hover {
    border-color: #ffffff !important;
    box-shadow: inset 20px 20px 20px 0 rgb(255 255 255 / 50%), inset -20px -20px 20px 0 rgb(132 132 132 / 50%) !important;
}
.pricing-card.highlighted.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgb(255 255 255 / 67%) 50%, rgb(0 0 0 / 0%) 100%);
    height: 1px;
    top: -1px;
    z-index: 2;
    box-shadow: 0px 0px 40px 0px rgb(255 255 255);
}
.pricing-card.highlighted:hover::before {
    box-shadow: 0px 0px 40px 2px rgb(255 255 255);
}

.pricing-card.crystallized.highlighted::after {
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%), radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.06), transparent 60%), var(--silver-highlight-overlay);
}
.pricing-card.highlighted:hover::after {
    opacity: 0.2;
}
.pricing-card .primary-button.has-delay {
    transition-property: border, background;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease, ease-in-out;
    transition-delay: 0.25s, 0s;
}

/* SERVICE CARDS */
.services-card {
    min-height: 400px;
}
.services-card-content {
    overflow: hidden;
    max-height: calc(25px * 4);
    transition: max-height 0.4s ease;
}
.services-card.is-expanded .services-card-content {
    transition: max-height 0.3s ease;
}
.card-toggle {
    cursor: pointer;
    user-select: none;
}

/* BLOG CARDS */
.blog-card, .kb-card {
    background-color: #0000004D !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
    transition-delay: 0.25s !important;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 0 0 rgba(51, 50, 50, 0.5);
    background-color: transparent;
}
.blog-card:hover, .kb-card:hover {
    border-color: var(--hovered-border-color) !important;
    box-shadow: inset -40px -40px 50px -25px rgba(51, 50, 50, 0.5);
}
.blog-card .card-overlay, 
.kb-card .card-overlay {
    background: linear-gradient(0deg, black, transparent);
    z-index: 0;
}
.card-content {
    z-index: 1;
}
/* === END CARDS WITH SHINE BORDER & GLOBAL CARDS === */


/* === ACCORDION CONTAINER === */
.accordion,
.accordion-item {
    border-color: var(--border-color) !important;
}
.accordion-header {
    cursor: pointer;
    position: relative;
    font-weight: 600;
}
.accordion-item .accordion-header p {
    transition: color 0.3s ease-in-out;
}
.accordion-icon {
    transition: all 0.35s ease-in-out;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background-image: linear-gradient(176deg, #000000 60%, #131313 100%);
}
.accordion-item:hover .accordion-header p,
.accordion-item.active .accordion-header p {
    color: #ffffff;
}
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}
/* === END ACCORDION CONTAINER === */


/* === BANNER SECTION === */
.comparison.banner {
    position: relative;
    border-color: var(--border-color);
    box-shadow: inset 0 0 30px 60px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.comparison.banner::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(255 255 255 / 10%), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-size: 200% 200%;
    filter: blur(2px);
    opacity: 0.7;
    animation: shineBorder 5s linear infinite;
    z-index: -1;
}

@keyframes shineBorder {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
/* === END BANNER SECTION === */


/* === ANGULAR GRADIENT === */
.angular-grnt-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    filter: blur(1px);
    height: auto;
    animation: flicker 6s infinite;
}

.angular-grnt-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent 0%, #000000 60%, #000000 100%);
    pointer-events: none;
}
.angular-grnt-wrapper.vertical {
    width: 200%;
    justify-content: space-betwen;
    gap: 0%;
    position: absolute;
    top: -100px;
    display: block !important;
}
.vertical .angular-grnt {
    margin-top: 0px !important;
    width: 100%;
    height: 1000px;
    background: 
        linear-gradient(to bottom, #000 0%, #ffffff 100%),
        conic-gradient(
            from 0deg,
            #ffffff 0%,
            #000000 28%
        );
    background-blend-mode: multiply;
}
.vertical .angular-grnt {
    transform: scaleY(-1) scaleX(-1);
}
.angular-grnt {
    margin-top: -225px;
    width: 50%;
    height: 450px;
    background: 
        linear-gradient(to right, #000 0%, #757575 100%),
        conic-gradient(
            from 90.01deg,
            #ffffff 0%,
            #000000 40%
        );
    background-blend-mode: multiply;
}
.angular-grnt.right {
    transform: scaleX(-1);
}

@keyframes flicker {
    0%, 100% { opacity: 1; filter: blur(1px) brightness(1); }
    2% { opacity: 0.9; filter: blur(1px) brightness(0.95); }
    4% { opacity: 1; filter: blur(1px) brightness(1); }
    6% { opacity: 0.5; filter: blur(1px) brightness(0.9); }
    8% { opacity: 1; filter: blur(1px) brightness(1); }
    10% { opacity: 0.6; filter: blur(1px) brightness(0.98); }
    12% { opacity: 1; filter: blur(1px) brightness(1); }
    18% { opacity: 0.5; filter: blur(1px) brightness(0.92); }
    20% { opacity: 1; filter: blur(1px) brightness(1); }
    25% { opacity: 0.6; filter: blur(1px) brightness(0.96); }
    30% { opacity: 1; filter: blur(1px) brightness(1); }
}

@media screen and (max-width: 1023px) {
    .vertical .angular-grnt.right {
        margin-right: 1px !important;
    }
    .angular-grnt.right {
        margin-right: 1px !important;
    }
}
/* === END ANGULAR GRADIENT === */


/* === FADE  === */
.fade-top.darken {
    background: linear-gradient(180deg, #00000052 70%, #00000000 100%) !important;
}
.fade-bottom.darken {
    background: linear-gradient(180deg, #00000000 70%, #000000 100%) !important
}
.fade-bottom {
    background: linear-gradient(180deg, #1D1D1D14 65%, #000000 100%) !important;
}
.fade-center {
    background: linear-gradient(270deg, #00000010 0%, #131313b5 50%, #00000010 100%) !important;
}
/* === END FADE  === */


/* === GLOW LINES === */
.glow-line {
    position: absolute;
    height: 2px;
    width: 100%;
    overflow: hidden;
    z-index: -1;

    /* dashed line background */
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        #ffffff40 6px,
        #ffffff40 12px
    );
}
.glow-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;

    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    filter: blur(2px);

    animation: moveRight 1.5s linear infinite;
}
.glow-line::after {
    content: "";
    position: absolute;
    top: 0;
    right: -30%;
    width: 30%;
    height: 100%;

    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    filter: blur(2px);

    animation: moveLeft 1.5s linear infinite;
}

@keyframes moveRight {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(400%);
    }
}
@keyframes moveLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-400%);
    }
}

/* STEPS SECTION */
.step-container {
    position: relative;
}

.step-number {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* DASHED LINE */
.step-progress-line-wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    position: absolute;

    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,0.2) 6px,
        rgba(255,255,255,0.2) 12px
    );

    width: 72%;
    left: 50%;
    transform: translateX(-50%);

    height: 1px;
    top: 35px;
    z-index: 0;
}

/* MOVING GLOW — DESKTOP */
.step-progress-line-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);

    width: 20%;
    height: 3px;

    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    filter: blur(2px);

    animation: glowMove 2s linear infinite;
}

@keyframes glowMove {
    0%   { left: -20%; }
    100% { left: 100%; }
}

/* KEEP CONTENT ABOVE THE LINE */
.step-column {
    position: relative;
    z-index: 2;
}

.step-number,
.step-column {
    overflow: unset;
}

/* DEFAULT NUMBER TEXT */
.step-number span {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* PULSE KEYFRAMES — used by JS-assigned animations */
@keyframes stepPulse {
    0% {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }
    20% {
        border-color: #ffffff;
        box-shadow: 0 0 10px rgba(255,255,255,0.2);
    }
    40% {
        border-color: rgba(255,255,255,0.15);
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }
    100% {
        border-color: rgba(255,255,255,0.15);
    }
}

@keyframes stepTextPulse {
    0%   { opacity: 0.5; }
    20%  { opacity: 1; }
    40%  { opacity: 0.5; }
    100% { opacity: 0.5; }
}

/* MOBILE */
@media (max-width: 576px) {

    .step-progress-line-wrapper {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 2px;
        height: 100%;

        background: repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 6px,
            rgba(255,255,255,0.4) 6px,
            rgba(255,255,255,0.4) 12px
        );
    }

    /* VERTICAL GLOW */
    .step-progress-line-wrapper::before {
        content: "";
        position: absolute;

        width: 3px;
        height: 20%;

        left: 50%;
        top: -20%;
        transform: translateX(-50%);

        background: linear-gradient(180deg, transparent, #ffffff, transparent);
        filter: blur(2px);

        animation: glowMoveVertical 2s linear infinite;
    }

    @keyframes glowMoveVertical {
        0%   { top: -20%; }
        100% { top: 100%; }
    }

}

/* === 3D SCENE ON HERO SECTION === */
.scene {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    perspective: 1000px;
    position: relative;
}
.scene:has(.innerpages) {
    height: 200px;
    position: relative;
}

.scene:has(.innerpages.services) {
    height: 400px;
    position: relative;
    overflow: unset;
}

.scene:has(.comparison) {
    width: 25%;
}
.scene:has(.comparison) .center-sphere.innerpages img.hero-image {
    border: none;
}
.center-sphere {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    border-radius: 100px !important;
    transform-style: preserve-3d;
    background: radial-gradient(circle at 30% 30%, #424242, #1b1b1b);
    border-radius: 0;
    border: 1px solid #ffffff20;
    box-shadow: 0 0 40px #ffffff20, inset -20px -20px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: centerFloatRotate 10s ease-in-out infinite;
}

.center-sphere.comparison {
    background: transparent;
    border-radius: 0 !important;
    border: none;
    box-shadow: none;
}

.center-sphere img.hero-image {
    width: 100px;
    height: 100px;
    transform: translateZ(20px);
}
.center-sphere.innerpages {
	width: 95%;
	top: 50%;
	left: 50%;
}
.center-sphere.innerpages img.hero-image {
    width: 100% !important;
    height: auto !important;
    transform: translateZ(20px);
    border: 1px solid #ffffff25;
}
.system-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

@keyframes centerFloatRotate {
    0% {
        transform:
            translate(-50%, -50%)
            rotateX(8deg)
            rotateY(-10deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotateX(-8deg)
            rotateY(10deg)
            scale(1.03);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotateX(8deg)
            rotateY(-10deg)
            scale(1);
    }
}

.triangle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}
.triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;

    --x: 0px;
    --y: 0px;
    --z: 0px;
    --rx: 0deg;
    --ry: 0deg;

    animation: floatSpace linear infinite;
    background-color: transparent !important;
    overflow: unset;
}

@keyframes floatSpace {
    0% {
        transform:
            translate3d(var(--x), var(--y), var(--z))
            rotateX(var(--rx))
            rotateY(var(--ry));
        opacity: 0.75;
    }

    50% {
        transform:
            translate3d(
                calc(var(--x) + 15px),
                calc(var(--y) - 10px),
                calc(var(--z) + 20px)
            )
            rotateX(calc(var(--rx) + 120deg))
            rotateY(calc(var(--ry) + 120deg));
        opacity: 1;
    }

    100% {
        transform:
            translate3d(var(--x), var(--y), var(--z))
            rotateX(calc(var(--rx) + 240deg))
            rotateY(calc(var(--ry) + 240deg));
        opacity: 0.75;
    }
}

.triangle:nth-child(1)  { --x: -160px; --y: -60px;  --z: -120px; --rx: 20deg;  --ry: 40deg;  animation-duration: 18s; }
.triangle:nth-child(2)  { --x: 130px;  --y: -100px; --z: -200px; --rx: 60deg;  --ry: 120deg; animation-duration: 22s; }
.triangle:nth-child(3)  { --x: -100px; --y: 90px;   --z: -60px;  --rx: 90deg;  --ry: 10deg;  animation-duration: 20s; }
.triangle:nth-child(4)  { --x: 170px;  --y: 45px;   --z: -180px; --rx: 30deg;  --ry: 200deg; animation-duration: 26s; }
.triangle:nth-child(5)  { --x: -45px;  --y: -140px; --z: -250px; --rx: 120deg; --ry: 70deg;  animation-duration: 24s; }
.triangle:nth-child(6)  { --x: 75px;   --y: 130px;  --z: -90px;  --rx: 40deg;  --ry: 300deg; animation-duration: 21s; }
.triangle:nth-child(7)  { --x: -180px; --y: 30px;   --z: -220px; --rx: 200deg; --ry: 90deg;  animation-duration: 28s; }
.triangle:nth-child(8)  { --x: 45px;   --y: -180px; --z: -140px; --rx: 10deg;  --ry: 160deg; animation-duration: 23s; }
.triangle:nth-child(9)  { --x: 140px;  --y: 140px;  --z: -300px; --rx: 320deg; --ry: 30deg;  animation-duration: 30s; }
.triangle:nth-child(10) { --x: -120px; --y: 110px;  --z: -100px; --rx: 70deg;  --ry: 250deg; animation-duration: 19s; }

.triangle:nth-child(1)  { --color: var(--blue-color); }
.triangle:nth-child(2)  { --color: var(--red-color); }
.triangle:nth-child(3)  { --color: var(--green-color); }
.triangle:nth-child(4)  { --color: var(--orange-color); }
.triangle:nth-child(5)  { --color: var(--purple-color); }
.triangle:nth-child(6)  { --color: var(--pink-color); }
.triangle:nth-child(7)  { --color: var(--yellow-color); }
.triangle:nth-child(8)  { --color: var(--blue-color); }
.triangle:nth-child(9)  { --color: var(--red-color); }
.triangle:nth-child(10) { --color: var(--purple-color); }

.triangle-shape {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-bottom: 35px solid var(--color);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.4));
    animation: glowPulse 6s ease-in-out infinite;
    transition: filter 0.3s ease-in-out;
    background-color: transparent !important;
    overflow: unset;
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(255,255,255,0.3));
    }
    50% {
        filter: drop-shadow(0 0 28px rgba(255,255,255,0.8));
    }
}

.triangle:hover .triangle-shape {
    filter: drop-shadow(0 0 25px rgba(255,255,255,0.9));
}
.connection-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    animation: centerFloatRotate 10s ease-in-out infinite;
    top: 50%;
    left: 50%;
}
.line {
    position: absolute;
    width: 150px;
    height: 2px;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, #ffffff50 0%, transparent 100%);
    opacity: 0.3;
    transform-origin: left center;
    z-index: 0;
}

.line:nth-child(1)  { transform: rotate(0deg); }
.line:nth-child(2)  { transform: rotate(36deg); }
.line:nth-child(3)  { transform: rotate(72deg); }
.line:nth-child(4)  { transform: rotate(108deg); }
.line:nth-child(5)  { transform: rotate(144deg); }
.line:nth-child(6)  { transform: rotate(180deg); }
.line:nth-child(7)  { transform: rotate(216deg); }
.line:nth-child(8)  { transform: rotate(252deg); }
.line:nth-child(9)  { transform: rotate(288deg); }
.line:nth-child(10) { transform: rotate(324deg); }

@media screen and (max-width: 767px) {
    .scene {
        height: 200px;
    }
    .center-sphere {
        width: 100px;
        height: 100px;
    }
    .center-sphere img.hero-image {
        width: 80px;
        height: 80px;
    }
    .triangle-shape {
        border-left: 25px solid transparent;
        border-bottom: 25px solid var(--color);
    }

    .triangle:nth-child(1)  { --x: -90px;  --y: -40px; }
    .triangle:nth-child(2)  { --x: 80px;   --y: -70px; }
    .triangle:nth-child(3)  { --x: -60px;  --y: 60px; }
    .triangle:nth-child(4)  { --x: 95px;   --y: 30px; }
    .triangle:nth-child(5)  { --x: -30px;  --y: -90px; }

    .triangle:nth-child(6)  { --x: 45px;   --y: 85px; }
    .triangle:nth-child(7)  { --x: -100px; --y: 20px; }
    .triangle:nth-child(8)  { --x: 30px;   --y: -110px; }
    .triangle:nth-child(9)  { --x: 85px;   --y: 85px; }
    .triangle:nth-child(10) { --x: -70px;  --y: 70px; }

    .triangle {
        animation-duration: calc(var(--duration, 22s) + 6s);
    }
    .scene:has(.comparison) {
        height: 150px;
    }
    .center-sphere {
        animation-duration: 14s;
    }
    .center-sphere.innerpages img.colored-logo {
        width: 35px !important;
    }
    .center-sphere img.hero-image.logo {
        width: 125px !important;
        height: 125px !important;
        padding: 0;
    }
}
@media screen and (max-width: 468px) {
    .scene:has(.innerpages.services) {
        height: 200px;
    }
}@media screen and (max-width: 410px) {
    .scene:has(.innerpages.services) {
        height: 150px;
        position: relative;
        overflow: unset;
    }
}
/* === END 3D SCENE ON HERO SECTION === */


/* === LOGO CAROUSEL SECTION === */
.logo-carousel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;

    /* Fade edges without draggable overlay */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 120px,
        #000 calc(100% - 120px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 120px,
        #000 calc(100% - 120px),
        transparent 100%
    );
}

.logo-carousel.is-dragging {
    cursor: grabbing;
}

.logo-carousel.is-dragging * {
    pointer-events: none;
}

.logo-carousel::-webkit-scrollbar {
    display: none;
}

.logo-track {
    display: flex;
    width: max-content;
    gap: 0;
}

/* Important because your logos are inside another wrapper div */
.logo-track > div {
    display: flex;
    width: max-content;
}

.logo {
    flex: 0 0 auto;
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    max-height: 70px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.logo img:hover {
    opacity: 1;
}

/* Remove the old pseudo fade overlays */
.logo-carousel::before,
.logo-carousel::after {
    display: none;
}

@media (max-width: 767px) {
    .logo {
        padding: 0 28px;
    }

    .logo img {
        max-height: 52px;
    }

    .logo-carousel {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 50px,
            #000 calc(100% - 50px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 50px,
            #000 calc(100% - 50px),
            transparent 100%
        );
    }
}
/* === END LOGO CAROUSEL SECTION === */


/* === CONTACT FORM FIELDS  + OTHER INPUTS === */
.input-wrapper {
    position: relative;
}
.icon-list.contact .list-item:hover .icon {
    opacity: 1;
}
.icon-list.contact .icon {
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
}
.contact-form input,
.contact-form textarea,
input.search-input {
	transition: all 0.3s ease-in-out !important;
    transition-delay: 0.25s !important;
    border-color: #ffffff20;
}
.contact-form .input-wrapper:has(input)::before,
.contact-form .input-wrapper:has(textarea)::before,
.input-wrapper:has(input.search-input)::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 25%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(143, 143, 143, 0.67) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
    border: 0;
    transition: all 0.5s ease;
    top: 0px;
    left: 0;
}
.contact-form input:hover,
.contact-form textarea:hover,
input.search-input:hover {
	border-color: #ffffff40 !important;
}

.contact-form .input-wrapper:has(input):hover::before,
.contact-form .input-wrapper:has(textarea):hover::before,
.input-wrapper:has(input.search-input):hover::before {
    width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus,
input.search-input:focus {
    box-shadow: inset -20px -20px 50px 0 rgb(51 50 50 / 50%);
	outline: none;
	border-color: #ffffff40 !important;
}

.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill,
.contact-form textarea:-webkit-autofill:focus,
input.search-input:-webkit-autofill,
input.search-input:-webkit-autofill:focus {
	border-color: #ffffff40 !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow:
		0 0 0 1px #00000000 inset,
		0 0 0 1000px #000000 inset !important;

	background-color: transparent !important;
	background-clip: padding-box !important;

	appearance: none;
	-webkit-appearance: none;

	transition: background-color 9999s ease-in-out 0s;
}


/* === END CONTACT FORM FIELDS === */


/* === CTA SECTION === */
.cta-section {
    border-color: var(--border-color);
}
/* === END CTA SECTION === */


/* === TESTIMONIAL CAROUSEL === */
.testimonial-carousel-wrapper {
    position: relative;
}

.testimonial-carousel-wrapper::before,
.testimonial-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.testimonial-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #000000, transparent);
}

.testimonial-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #000000, transparent);
}

.testimonial-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    position: relative;
    cursor: grab;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.testimonial-carousel.is-dragging {
    cursor: grabbing;
}

.testimonial-carousel.is-dragging * {
    pointer-events: none;
}

.testimonial-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.testimonial-item {
    flex: 0 0 clamp(280px, 30vw, 420px);
    box-sizing: border-box;
}

.testimonial-item,
.testimonial-item > div,
.testimonial-item .__text_block__,
.testimonial-item p {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ARROWS */
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #ffffff25;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0;
}

.testimonial-arrow:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff55;
}

.testimonial-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.testimonial-arrow.prev {
    left: 18px;
}

.testimonial-arrow.next {
    right: 18px;
}

.testimonial-arrow span {
    font-size: 28px;
    line-height: 1;
    transform: translateY(-1px);
    pointer-events: none;
}

/* DOTS */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.testimonial-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff40;
    transition: all 0.3s ease;
    cursor: pointer;
}

.testimonial-dots .dot.active {
    background: #ffffff;
    transform: scale(1.2);
}

/* MOBILE */
@media (max-width: 767px) {
    .testimonial-carousel-wrapper::before,
    .testimonial-carousel-wrapper::after {
        width: 20px;
    }

    .testimonial-carousel {
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .testimonial-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: max-content !important;
    }

    .testimonial-track > .testimonial-item {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: none !important;
        scroll-snap-align: start;
        box-sizing: border-box;
        padding-left: 35px;
        padding-right: 95px;
    }

    .testimonial-item,
    .testimonial-item > div,
    .testimonial-item .__text_block__,
    .testimonial-item p,
    .testimonial-item * {
        min-width: 0;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .testimonial-arrow {
        width: 38px;
        height: 38px;
    }

    .testimonial-arrow.prev {
        left: 8px;
    }

    .testimonial-arrow.next {
        right: 8px;
    }

    .testimonial-arrow span {
        font-size: 22px;
    }
}
/* === END TESTIMONIAL CAROUSEL === */

/* === SERVICES FILTER CARDS === */
.other-services-wrapper {
    height: auto !important;
    overflow: visible !important;
}

.services-filter-category {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.services-filter-category a:hover { opacity: 1; }

.services-filter-category.red a:hover { border-color: var(--red-border-color); }
.services-filter-category.blue a:hover { border-color: var(--blue-border-color); }
.services-filter-category.green a:hover { border-color: var(--green-border-color); }
.services-filter-category.purple a:hover { border-color: var(--purple-border-color); }
.services-filter-category.yellow a:hover { border-color: var(--yellow-border-color); }
.services-filter-category.orange a:hover { border-color: var(--orange-border-color); }
.services-filter-category.pink a:hover { border-color: var(--pink-border-color); }
.services-filter-category.cyan a:hover { border-color: var(--cyan-border-color); }

.services-filter-category a.active { opacity: 1; color: var(--black-color); }

.services-filter-category.red a.active { background: var(--red-color); border-color: var(--red-color); box-shadow: 0 4px 12px var(--red-shadow); }
.services-filter-category.blue a.active { background: var(--blue-color); border-color: var(--blue-color); box-shadow: 0 4px 12px var(--blue-shadow); }
.services-filter-category.green a.active { background: var(--green-color); border-color: var(--green-color); box-shadow: 0 4px 12px var(--green-shadow); }
.services-filter-category.purple a.active { background: var(--purple-color); border-color: var(--purple-color); box-shadow: 0 4px 12px var(--purple-shadow); }
.services-filter-category.yellow a.active { background: var(--yellow-color); border-color: var(--yellow-color); box-shadow: 0 4px 12px var(--yellow-shadow); }
.services-filter-category.orange a.active { background: var(--orange-color); border-color: var(--orange-color); box-shadow: 0 4px 12px var(--orange-shadow); }
.services-filter-category.pink a.active { background: var(--pink-color); border-color: var(--pink-color); box-shadow: 0 4px 12px var(--pink-shadow); }
.services-filter-category.cyan a.active { background: var(--cyan-color); border-color: var(--cyan-color); box-shadow: 0 4px 12px var(--cyan-shadow); }

.services-filter-category a.active * { color: var(--black-color); }

.other-features-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    align-items: start;

    /* The whole grid fades as one unit */
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

/* Grid-level fade states */
.other-features-cards.is-fading-out {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.other-features-cards.is-fading-in {
    opacity: 0;
    transform: translateY(6px);
}

/* Cards themselves: no individual transition needed anymore */
.other-features-cards .card {
    display: flex !important;
    width: 100%;
    height: 100%;
    margin: 0;
}

.other-features-cards .card.is-hidden {
    display: none !important;
}

@media (max-width: 991px) {
    .other-features-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .other-features-cards { grid-template-columns: 1fr; gap: 16px; }
    .services-filter-category { gap: 10px; }
}
/* === END SERVICES FILTER CARDS === */


/* === BLOG SECTION === */
.hero-section-inner.single-blog-post {
    position: relative;
}
.hero-section-inner.single-blog-post::before{
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); 
    z-index: 1;
}

@media only screen and (max-width: 1023px) {
    .hero-section-inner.single-blog-post::before{
        background: rgba(0, 0, 0, 0.6); 
    }
}
/* === END BLOG SECTION === */


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

/* .table-comparison.green .table-head .us,
.table-comparison.green .table-body .us-data {
    background-color: var(--green-transparent);
    border-color: var(--green-color);
    box-shadow: inset var(--card-box-shadow-setting) var(--green-shadow);
} */
.table-head, .table-body {
    border-color: var(--border-color);
}

.mobile-label {
    display: block;
    font-size: 21px;
    font-weight: 500;
    color: #ffffff;
    opacity: 0.7;
    margin-bottom: 10px;
}
/* === END COMPARISON TABLE SECTION === */


/* === TABINATION === */
.tabination {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 32px;
    align-items: stretch;
}

.tabination .tab-button-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tabination .tab-button {
    position: relative;
    display: flex;
    align-items: center;
    padding: 26px 24px 26px 26px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    text-decoration: none;
    color: inherit;
    user-select: none;

    opacity: 0.5;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tabination .tab-button:hover {
    opacity: 0.8;
    transform: translateX(4px);
}

.tabination .tab-button.is-active {
    opacity: 1;
    transform: translateX(8px);
}

.tabination .tab-button:last-child {
    border-bottom: none;
}

.tabination .tab-button:focus {
    outline: none;
}

/* rail */
.tabination .tab-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 58px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
}

/* progress */
.tabination .tab-button::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 58px;
    border-radius: 999px;
    background: var(--white-color);
    transform: translateY(-50%) scaleY(0);
    transform-origin: top center;
    opacity: 0;
}
.tabination.red .tab-button::after {
    background: var(--red-color);
}
.tabination.blue .tab-button::after {
    background: var(--blue-color);
}
.tabination.green .tab-button::after {
    background: var(--green-color);
}
.tabination.purple .tab-button::after {
    background: var(--purple-color);
}
.tabination.yellow .tab-button::after {
    background: var(--yellow-color);
}
.tabination.orange .tab-button::after {
    background: var(--orange-color);
}
.tabination.pink .tab-button::after {
    background: var(--pink-color);
}
.tabination.cyan .tab-button::after {
    background: var(--cyan-color);
}

.tabination .tab-button.is-active::after {
    opacity: 1;
    animation: tabProgressFill 6s linear forwards;
}

.tabination.is-paused .tab-button.is-active::after {
    animation-play-state: paused;
}

@keyframes tabProgressFill {
    from {
        transform: translateY(-50%) scaleY(0);
    }
    to {
        transform: translateY(-50%) scaleY(1);
    }
}

/* desktop content */
.tabination .tab-content-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.tabination .tab-content {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none; /* no transition on tab content */
}

.tabination .tab-content.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.tabination .tab-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease; /* fade only on image */
    will-change: opacity;
}

.tabination .tab-content img.is-visible {
    opacity: 1;
}

/* === MOBILE === */
@media (max-width: 991px) {

    .tabination {
        display: block;
    }

    .tabination .tab-button {
        padding: 22px 18px 22px 24px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: none;
    }

    .tabination .tab-button.is-active {
        transform: translateX(0px);
    }

    .tabination .tab-button::before,
    .tabination .tab-button::after {
        height: 46px;
    }

    /* No animation on mobile, just filled */
    .tabination .tab-button.is-active::after {
        animation: none;
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
    }

    .tabination .tab-content-wrapper {
        display: none;
    }

    .tabination .tab-content {
        position: static;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 0 solid rgba(255,255,255,0.1);
        transition: none;
    }

    .tabination .tab-content.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-bottom: 20px;
        border-bottom-width: 1px;
    }

    .tabination .tab-content img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.45s ease;
        will-change: opacity;
    }

    .tabination .tab-content img.is-visible {
        opacity: 1;
    }
}

/* Ensure mobile minHeight never bleeds into desktop */
@media (min-width: 992px) {
    .tabination {
        min-height: unset !important;
    }
}
/* === END TABINATION === */

/* === COMPARISON TABLE === */
.comparison-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.comparison-table {
    min-width: 780px;
    position: relative;
    --feature-col-left: 40%;
    --feature-col-width: 30%;
    overflow: hidden;
}

.comparison-row {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    position: relative;
    z-index: 3;
}

.comparison-cell {
    position: relative;
    min-height: 84px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 3;
}

.comparison-feature,
.comparison-feature-head {
    justify-content: flex-start;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.comparison-feature {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
    
.comparison-brand,
.comparison-value {
    text-align: center;
}

.comparison-brand {
    min-height: 96px;
}

.comparison-brand-competitor {
    border-left: 1px solid rgba(255,255,255,0.04);
}

.brand-logo {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 4;
    border: none;
    box-shadow: none;
}

.brand-logo img {
    width: 50px;
    height: auto;
    display: block;
}

.icon-check,
.icon-x {
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1;
    color: #fff;
}

    
.comparison-value .icon-check-wrapper .icon,
.comparison-value .icon-x-wrapper .icon {
    background: var(--dark-ash-gradient);
}

.comparison-brand.is-featured,
.comparison-value.is-featured {
    border-left: none;
    border-right: none;
}

.comparison-brand.is-featured::after,
.comparison-value.is-featured::after,
.comparison-brand.is-featured::before,
.comparison-value.is-featured::before {
    content: none !important;
}

.comparison-head .comparison-cell:first-child,
.comparison-head .comparison-cell:last-child {
    border-top: none;
}

.comparison-table > .comparison-row:not(.comparison-head) > .comparison-cell:first-child {
    border-right: none;
}

/* FEATURED COLUMN OVERLAY */
.comparison-featured-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--feature-col-left);
    width: var(--feature-col-width);
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    border: 1px solid var(--border-color);
}

.comparison-featured-rotator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150em;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--white-color) 340deg,
        #ffffff 350deg,
        var(--white-color) 360deg
    );
    animation: comparisonRotate 6s linear infinite;
    filter: blur(10px);
    opacity: 0.9;
}
.red .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--red-color) 340deg,
        #ffffff 350deg,
        var(--red-color) 360deg
    );
}
.blue .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--blue-color) 340deg,
        #ffffff 350deg,
        var(--blue-color) 360deg
    );
}
.green .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--green-color) 340deg,
        #ffffff 350deg,
        var(--green-color) 360deg
    );
}
.purple .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--purple-color) 340deg,
        #ffffff 350deg,
        var(--purple-color) 360deg
    );
}
.yellow .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--yellow-color) 340deg,
        #ffffff 350deg,
        var(--yellow-color) 360deg
    );
}
.orange .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--orange-color) 340deg,
        #ffffff 350deg,
        var(--orange-color) 360deg
    );
}
.pink .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--pink-color) 340deg,
        #ffffff 350deg,
        var(--pink-color) 360deg
    );
}
.cyan .comparison-featured-rotator {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--cyan-color) 340deg,
        #ffffff 350deg,
        var(--cyan-color) 360deg
    );
}


.comparison-featured-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: linear-gradient(-60deg, #000000, #080808, #000000);
    transform: translate(-50%, -50%);
}

.mobile-brand-logo {
    display: none;
}

@keyframes comparisonRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 767px) {
    .comparison-table-wrap {
        overflow: visible;
    }

    .mobile-brand-logo {
        display: flex;
        width: 100%;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-brand-logo img {
        max-width: 84px;
        max-height: 28px;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        margin: 0 auto;
    }

    .comparison-head,
    .comparison-row.comparison-head,
    .comparison-table > .comparison-head {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
    .comparison-table {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: visible;
    }

    /* Hide desktop vertical featured overlay on mobile */
    .comparison-featured-border {
        display: none;
    }

    /* Hide the desktop table header row */
    .comparison-head {
        display: none;
    }

    /* Each feature row becomes a card */
    .comparison-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
        border: 1px solid rgba(255,255,255,0.08);
        overflow: hidden;
    }

    /* Feature content spans full width */
    .comparison-feature {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 0;
        border: 0 !important;
        min-height: auto;
    }

    .comparison-feature h3,
    .comparison-feature p,
    .comparison-feature .__text_block {
        margin: 0;
    }

    .comparison-feature h3 {
        font-size: 22px;
        line-height: 1.2;
    }

    .comparison-feature,
    .comparison-feature .__text_block,
    .comparison-feature p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Mobile comparison tiles */
    .comparison-value {
        position: relative;
        min-height: 120px;
        padding: 16px 14px;
        border: 1px solid rgba(255,255,255,0.06);
        background: rgba(255,255,255,0.025);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
        overflow: hidden;
    }
    .mobile-brand-logo {
        margin-top: 30px;
        margin-bottom: -30px;
    }

    /* remove old text labels */
    .comparison-value::before {
        content: none !important;
    }

    /* hide any leftover comparison-brand blocks inside rows on mobile */
    .comparison-row .comparison-brand {
        display: none;
    }

    /* Logo holder injected by JS */
    .mobile-brand-logo {
        width: 100%;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-brand-logo img {
        max-width: 84px;
        max-height: 28px;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* icon sizing */
    .comparison-value .icon-check-wrapper,
    .comparison-value .icon-x-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 30px;
        line-height: 1;
        width: 100%;
    }

    .comparison-value .__text_block {
        width: 100%;
        text-align: center;
    }

    .comparison-value .__text_block p {
        margin: 0;
        text-align: center;
    }

    /* FEATURED tile with shine border */
    .comparison-row .comparison-value.is-featured {
        border: 1px solid var(--border-color);
        background: transparent;
    }

    .comparison-row .comparison-value.is-featured::before {
        content: "" !important;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 280%;
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%);
        background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,255,255,0) 320deg,
        var(--white-color) 340deg,
        #ffffff 350deg,
        var(--white-color) 360deg
        );
        animation: comparisonRotate 6s linear infinite;
        filter: blur(10px);
        opacity: 0.95;
        z-index: 0;
    }

    .red .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--red-color) 340deg,#ffffff 350deg, var(--red-color) 360deg);
    }
    .blue .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--blue-color) 340deg,#ffffff 350deg, var(--blue-color) 360deg);
    }
    .green .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--green-color) 340deg,#ffffff 350deg, var(--green-color) 360deg);
    }
    .purple .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--purple-color) 340deg,#ffffff 350deg, var(--purple-color) 360deg);
    }
    .yellow .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--yellow-color) 340deg,#ffffff 350deg, var(--yellow-color) 360deg);
    }
    .orange .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--orange-color) 340deg,#ffffff 350deg, var(--orange-color) 360deg);
    }
    .pink .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--pink-color) 340deg,#ffffff 350deg, var(--pink-color) 360deg);
    }
    .cyan .comparison-row .comparison-value.is-featured::before {
        background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg,rgba(255,255,255,0) 320deg, var(--cyan-color) 340deg,#ffffff 350deg, var(--cyan-color) 360deg);
    }

    .comparison-row .comparison-value.is-featured::after {
        content: "" !important;
        position: absolute;
        inset: 1px;
        background: linear-gradient(-60deg, #000000, #080808, #000000);
        z-index: 1;
    }

    .comparison-row .comparison-value.is-featured > * {
        position: relative;
        z-index: 2;
    }

    /* Non-featured tile */
    .comparison-row .comparison-value:not(.is-featured) {
        background: rgba(255,255,255,0.03);
    }

    /* Slightly tighter spacing on very small phones */
    /* .comparison-cell {
        border-top: none !important;
    } */
}
/* === END COMPARISON TABLE === */


/* === COMPARISON CARDS === */

.theme-red.comp-card {
    background: var(--dark-red-gradient);
}
.theme-blue.comp-card {
    background: var(--dark-blue-gradient);
}
.theme-green.comp-card {
    background: var(--dark-green-gradient);
}
.theme-purple.comp-card {
    background: var(--dark-purple-gradient);
}
.theme-yellow.comp-card {
    background: var(--dark-yellow-gradient);
}
.theme-orange.comp-card {
    background: var(--dark-orange-gradient);
}
.theme-pink.comp-card {
    background: var(--dark-pink-gradient);
}
.theme-cyan.comp-card {
    background: var(--dark-cyan-gradient);
}

/* === END COMPARISON CARDS === */


/* === ROW LIST === */
.row-list {
    position: relative;
    overflow: hidden;
    border-color: var(--border-color);
}

.row-list::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.row-list > * {
    position: relative;
    z-index: 1;
}

.row-list.red::before {
    background: var(--dark-red-gradient);
}
.row-list.blue::before {
    background: var(--dark-blue-gradient);
}
.row-list.green::before {
    background: var(--dark-green-gradient);
}
.row-list.purple::before {
    background: var(--dark-purple-gradient);
}
.row-list.yellow::before {
    background: var(--dark-yellow-gradient);
}
.row-list.orange::before {
    background: var(--dark-orange-gradient);
}
.row-list.pink::before {
    background: var(--dark-pink-gradient);
}
.row-list.cyan::before {
    background: var(--dark-cyan-gradient);
}


.row-list:hover::before {
    opacity: 1;
}
.row-list-wrapper .row-list:last-child {
    border-color: transparent;
}

.row-list .list-number div {
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(to bottom right, #ffffff 30%, #ffffff80);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

.row-list:hover .list-number div {
    opacity: 1;
}

.row-list .list-number div::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.row-list.red .list-number div::after {
    background: linear-gradient(to bottom right, var(--red-color) 30%, #9b3a3a);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.blue .list-number div::after {
    background: linear-gradient(to bottom right, var(--blue-color) 30%, #3a4a9b);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.green .list-number div::after {
    background: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.purple .list-number div::after {
    background: linear-gradient(to bottom right, var(--purple-color) 30%, #4a3a9b);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.yellow .list-number div::after {
    background: linear-gradient(to bottom right, var(--yellow-color) 30%, #a3a33d);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.orange .list-number div::after {
    background: linear-gradient(to bottom right, var(--orange-color) 30%, #a3713f);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.pink .list-number div::after {
    background: linear-gradient(to bottom right, var(--pink-color) 30%, #9e4b6c);
    -webkit-background-clip: text;
    background-clip: text;
}
.row-list.cyan .list-number div::after {
    background: linear-gradient(to bottom right, var(--cyan-color) 30%, #339e92);
    -webkit-background-clip: text;
    background-clip: text;
}

.row-list:hover .list-number div::after {
    opacity: 1;
}
.row-list .list-button img  {
    opacity: 0.5;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.row-list:hover .list-button img {
    transform: rotate(45deg);
    opacity: 1;
}

.row-list.yellow:hover,
.row-list.yellow:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/3KUREBH6_Cursor_-_Logo_CWS_Yellow_Gradient.png") 16 16, pointer;
}

.row-list.red:hover,
.row-list.red:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/I07QWL37_Cursor_-_Logo_CWS_Red_Gradient.png") 16 16, pointer;
}

.row-list.green:hover,
.row-list.green:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/34GIULIA_Cursor_-_Logo_CWS_Green_Gradient.png") 16 16, pointer;
}

.row-list.purple:hover,
.row-list.purple:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/EWK1DWUV_Cursor_-_Logo_CWS_Purple_Gradient.png") 16 16, pointer;
}

.row-list.pink:hover,
.row-list.pink:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/K25K0SAT_Cursor_-_Logo_CWS_Pink_Gradient.png") 16 16, pointer;
}

.row-list.cyan:hover,
.row-list.cyan:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/P8CQFE9B_Cursor_-_Logo_CWS_Cyan_Gradient.png") 16 16, pointer;
}

.row-list.blue:hover,
.row-list.blue:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/3GKNK9ZO_Cursor_-_Logo_CWS_Blue_Gradient.png") 16 16, pointer;
}

.row-list.orange:hover,
.row-list.orange:hover * {
    cursor: url("https://media.cascadiaweb.services/2026/04/23/File/O8JPT2N3_Cursor_-_Logo_CWS_Orange_Gradient.png") 16 16, pointer;
}

@media screen and (max-width: 576px) {
    .row-list .list-number div,
    .row-list .list-number div::after {
        opacity: 1;
    }
}
/* === END ROW LIST === */

/* === TWO COLUMN EXPLAINER === */

.col-panel {
    border-color: var(--border-color);
}

.drop-zone {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: visible;
}

.capsule {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    text-align: center;
    user-select: none;
    will-change: transform, top, left;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.col-panel.us .capsule {
    color: #111111;
    box-shadow: 0 10px 26px var(--service-shadow);
}

.comp-explainer {
    --service-color: var(--purple-color);
    --service-shadow: var(--purple-shadow);

    --capsule-1: var(--service-color);
    --capsule-2: color-mix(in srgb, var(--service-color) 75%, black);
    --capsule-3: color-mix(in srgb, var(--service-color) 55%, black);
    --capsule-4: color-mix(in srgb, var(--service-color) 35%, black);
}

.comp-explainer.red {
    --service-color: var(--red-color);
    --service-shadow: var(--red-shadow);
}

.comp-explainer.blue {
    --service-color: var(--blue-color);
    --service-shadow: var(--blue-shadow);
}

.comp-explainer.green {
    --service-color: var(--green-color);
    --service-shadow: var(--green-shadow);
}

.comp-explainer.purple {
    --service-color: var(--purple-color);
    --service-shadow: var(--purple-shadow);
}

.comp-explainer.yellow {
    --service-color: var(--yellow-color);
    --service-shadow: var(--yellow-shadow);
}

.comp-explainer.orange {
    --service-color: var(--orange-color);
    --service-shadow: var(--orange-shadow);
}

.comp-explainer.pink {
    --service-color: var(--pink-color);
    --service-shadow: var(--pink-shadow);
}

.comp-explainer.cyan {
    --service-color: var(--cyan-color);
    --service-shadow: var(--cyan-shadow);
}

.col-panel.us .capsule {
    box-shadow: 0 10px 26px var(--service-shadow);
}

.col-panel.us .capsule.is-primary {
    --capsule-bg: var(--capsule-1);
    background: var(--capsule-bg);
}

.col-panel.us .capsule.is-dark {
    --capsule-bg: var(--capsule-2);
    background: var(--capsule-bg);
}

.col-panel.us .capsule.is-darker {
    --capsule-bg: var(--capsule-3);
    background: var(--capsule-bg);
}

.col-panel.us .capsule.is-deep {
    --capsule-bg: var(--capsule-4);
    background: var(--capsule-bg);
}
@media (max-width: 1023px) {
    .drop-zone {
        height: 300px;
        margin-top: 20px;
    }

    .capsule {
        min-height: 36px;
        padding: 0 16px;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .drop-zone {
        height: 260px;
        margin-top: 20px;
    }

    .capsule {
        min-height: 34px;
        padding: 0 15px;
        font-size: 13px;
    }
}

/* === END TWO COLUMN EXPLAINER === */


/* === SCROLLING SECTION === */

.scroll-section {
    position: relative;
    display: grid;
    grid-template-columns: 375px 1fr;
    gap: 50px;
    overflow: visible !important;
}

.left-sticky {
    position: sticky;
    top: 100px;
    height: fit-content;
    align-self: flex-start;
    border-radius: 16px;
    overflow: visible !important;
    z-index: 10;
}

.left-panel {
    position: relative;
    min-height: 500px;
    transition: background 0.7s ease;
    overflow: hidden !important;
}

/* Both states stacked, absolutely positioned */
.panel-state {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    border-color: var(--border-color);
}

/* Default: show competitor state */
.panel-state.state-them {
    background: var(--dark-silver-gradient);
    opacity: 1;
    pointer-events: auto;
}

/* When .is-us is on the panel, swap visibility */
.theme-red .left-panel.is-us {
    background: var(--dark-red-gradient);
}
.theme-blue .left-panel.is-us {
    background: var(--dark-blue-gradient);
}
.theme-green .left-panel.is-us {
    background: var(--dark-green-gradient);
}
.theme-purple .left-panel.is-us {
    background: var(--dark-purple-gradient);
}
.theme-yellow .left-panel.is-us {
    background: var(--dark-yellow-gradient);
}
.theme-orange .left-panel.is-us {
    background: var(--dark-orange-gradient);
}
.theme-pink .left-panel.is-us {
    background: var(--dark-pink-gradient);
}
.theme-cyan .left-panel.is-us {
    background: var(--dark-cyan-gradient);
}

.left-panel.is-us .state-them {
    opacity: 0;
    pointer-events: none;
}

.left-panel.is-us .state-us {
    opacity: 1;
    pointer-events: auto;
}

/* RIGHT scroll column */
.right-scroll {
    overflow-y: visible;
    max-height: none;
}

.scroll-item {
    border-color: var(--border-color);
}
.panel-state.state-them,
#block-them .scroll-item {
    background: var(--dark-silver-gradient);
}
.theme-red .panel-state.state-us,
.theme-red #block-us .scroll-item {
    background: var(--dark-red-gradient);
}
.theme-blue .panel-state.state-us,
.theme-blue #block-us .scroll-item {
    background: var(--dark-blue-gradient);
}
.theme-green .panel-state.state-us,
.theme-green #block-us .scroll-item {
    background: var(--dark-green-gradient);
}
.theme-purple .panel-state.state-us,
.theme-purple #block-us .scroll-item {
    background: var(--dark-purple-gradient);
}
.theme-yellow .panel-state.state-us,
.theme-yellow #block-us .scroll-item {
    background: var(--dark-yellow-gradient);
}
.theme-orange .panel-state.state-us,
.theme-orange #block-us .scroll-item {
    background: var(--dark-orange-gradient);
}
.theme-pink .panel-state.state-us,
.theme-pink #block-us .scroll-item {
    background: var(--dark-pink-gradient);
}
.theme-cyan .panel-state.state-us,
.theme-cyan #block-us .scroll-item {
    background: var(--dark-cyan-gradient);
}

@media screen and (max-width: 991px) {
    .scroll-section {
        grid-template-columns: 320px 1fr;
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .scroll-section {
        display: block;
    }

    .left-sticky {
        display: none;
    }

    .right-scroll {
        width: 100%;
    }

    .panel-state {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-height: auto;
        padding: 24px;
        margin-bottom: 24px;
        border-width: 0 0 1px 0;
        border-radius: 0;
        overflow: hidden;
    }

    .content-block {
        margin-bottom: 40px;
    }

    .scroll-spacer {
        height: 40px;
    }
}
/* .content-block { padding-bottom: 32px; } */

.scroll-spacer  { height: 80px; }

/* === END SCROLLING SECTION === */


/* === COUNTER NUMBER === */

.counter-card {
    border-color: var(--border-color);
}
.theme-red .counter-card {
    background: var(--dark-red-gradient);
}
.theme-blue .counter-card {
    background: var(--dark-blue-gradient);
}
.theme-green .counter-card {
    background: var(--dark-green-gradient);
}
.theme-purple .counter-card {
    background: var(--dark-purple-gradient);
}
.theme-yellow .counter-card {
    background: var(--dark-yellow-gradient);
}
.theme-orange .counter-card {
    background: var(--dark-orange-gradient);
}
.theme-pink .counter-card {
    background: var(--dark-pink-gradient);
}
.theme-cyan .counter-card {
    background: var(--dark-cyan-gradient);
}
.card-bottom {
    border-color: var(--border-color-soft);
}

/* === END COUNTER NUMBER === */


/* === BENTO GRID === */
.pin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
}

.pin-cell {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0;
}

.pin-cell--hero {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--dark-green-gradient);
    flex-direction: column;
    justify-content: space-between;
}

.pin-cell--whitelabel {
    grid-column: 2;
    grid-row: 1;
    background: var(--dark-purple-gradient);
}

.pin-cell--proactive {
    grid-column: 3;
    grid-row: 1;
    background: var(--dark-blue-gradient);
}

.pin-cell--services {
    grid-column: 2 / 4;
    grid-row: 2;
    background: var(--dark-cyan-gradient);
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}

.pin-ghost {
    position: absolute;
    bottom: -20px;
    right: 6px;
    font-size: 130px;
    font-weight: 700;
    letter-spacing: -6px;
    line-height: 1;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    color: #ffffff;
}

.pin-num {
    font-size: 90px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -4px;
}

.pin-num-accent {
    font-size: 38px;
    color: var(--green-color);
    letter-spacing: 0;
}

.pin-num-sm {
    font-size: 60px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -3px;
    flex-shrink: 0;
}

.pin-word {
    margin-bottom: 10px;
}

.pin-word--cyan   { color: var(--cyan-color); }
.pin-word--purple { color: var(--purple-color); }
.pin-word--blue   { color: var(--blue-color); }
.pin-word--green  { color: var(--green-color); }

.pin-label {
    margin-bottom: 5px;
}

.pin-vline {
    width: 1px;
    background: var(--border-color-soft);
    align-self: stretch;
    flex-shrink: 0;
}

.pin-services-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
@media screen and (max-width: 991px) {
    .pin-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }
    .pin-cell--hero {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .pin-cell--whitelabel {
        grid-column: 1;
        grid-row: 2;
    }
    .pin-cell--proactive {
        grid-column: 2;
        grid-row: 2;
    }
    .pin-cell--services {
        grid-column: 1 / 3;
        grid-row: 3;
        flex-direction: column;
        align-items: flex-start;
    }
    .pin-vline {
        width: 100%;
        height: 1px;
        align-self: auto;
    }
}
@media screen and (max-width: 768px) {
    .pin-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .pin-cell--hero,
    .pin-cell--whitelabel,
    .pin-cell--proactive,
    .pin-cell--services {
        grid-column: 1;
        grid-row: auto;
        min-height: 200px;
    }
    .pin-cell--services {
        flex-direction: column;
        align-items: flex-start;
    }
    .pin-vline {
        width: 100%;
        height: 1px;
        align-self: auto;
    }
    .pin-header {
        flex-direction: column;
    }
    .pin-tagline {
        text-align: left;
        max-width: 100%;
    }
}
/* === END BENTO GRID === */


/* === GLOBAL FOOTER === */
.footer,
.footer-top, 
.footer-body,
.social-icon {
    border-color: var(--border-color);
}
.footer-logo {
    transition: opacity 0.3s ease-in-out;
}
.footer-logo:hover {
    opacity: 0.6;
}
.social-icon, .social-icon img {
    transition: all 0.3s ease-in-out;
}
.social-icon:hover {
    border-color: #ffffff80 !important;
}
.social-icon img {
    opacity: 0.5;
}
.social-icon:hover img {
    opacity: 1;
}
@media only screen and (max-width: 576px) {
	.managed-zoho-apps .footer-links-wrapper {
        display: block;
        columns: 2;
        column-gap: 20px;
	}
	.managed-zoho-apps .footer-links {
        break-inside: avoid;
        margin-bottom: 8px;
	}
    .managed-zoho-apps .footer-links:nth-child(n-4) {
        margin-left: 0px;
        width: calc(100% + 30px);
    }
	.managed-zoho-apps .footer-links:nth-child(n+4) {
        margin-left: 30px;
	}
    .managed-zoho-apps .footer-links:nth-child(3n) {
        margin-bottom: 0px;
    }
}
/* === END GLOBAL FOOTER === */