:root {
    /* DEFAULT COLORS */
    --white-color: #ffffff;
    --black-color: #000000;
    --dark-color: #161616;
    --darker-color: #111111;

    --text-color: #A1A4A5;
    
    --border-color: #ffffff25;
    --border-color-soft: #ffffff10;
    --hovered-border-color: #ffffff40;
    --active-border-color: var(--hovered-border-color);

    /* 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;

    /* SIGNED COLORS TO SERVICES ACCORDINGLY */
    --zoho-service: var(--blue-color);
    --wordpress-service: var(--green-color);
    --frappe-service: var(--red-color);
    --email-service: var(--purple-color);
    --marketing-and-analytics-service: var(--orange-color);
    --ai-and-automation-service: var(--cyan-color);
    --operations-and-compliance-service: var(--yellow-color);
    --agency-solutions-service: var(--pink-color);

    /* 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 */
    --white-border-color: #ffffff25;
    --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%);

    /* FONT FAMILY */
    --primary-font: 'Inter', sans-serif;
}

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

body.has-on-page-nav-scrolling {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

body.has-on-page-nav-scrolling::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.opn-drawer::-webkit-scrollbar {
    display: none;
}

.opn-drawer {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.menu-open {
    overflow: hidden;
}

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

.scene * {
    overflow: visible !important;
}

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

h1 {
    line-height: 1.2em !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: 35px;
}
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 !important;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}

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


/* === CASCADIA WEB SERVICES - TEXT GRADIENT === */
body[class*="theme-"] .text-gradient, 
div[data-links-category] .menu-link-text,
[class*="text-gradient-"] {
    display: inline-block !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    padding-right: 0.08em;
    margin-right: -0.08em;
}

/* NEUTRAL TEXT GRADIENT */
body[class*="theme-"] .text-gradient-silver,
.text-gradient-silver {
    background: linear-gradient(to bottom right, #ffffff 30%, #ffffff80);
}
div[data-links-category] .menu-link-text{
    background: linear-gradient(to bottom right, #A1A4A5 30%, #A1A4A5);
}
    
/* THEME TEXT GRADIENTS */
body.theme-frappe .text-gradient,
div[data-links-category="frappe"] a:hover .menu-link-text,
.text-gradient-red    { background: linear-gradient(to bottom right, var(--red-color) 30%, #9b3a3a); }

body.theme-wordpress .text-gradient,
div[data-links-category="wordpress"] a:hover .menu-link-text,
.text-gradient-green  { background: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a); }

body.theme-zoho .text-gradient,
div[data-links-category="zoho"] a:hover .menu-link-text,
.text-gradient-blue   { background: linear-gradient(to bottom right, var(--blue-color) 30%, #3a4a9b); }

body.theme-email .text-gradient,
div[data-links-category="email"] a:hover .menu-link-text,
.text-gradient-purple { background: linear-gradient(to bottom right, var(--purple-color) 30%, #4a3a9b); }

body.theme-operations-and-compliance .text-gradient,
div[data-links-category="operations"] a:hover .menu-link-text,
.text-gradient-yellow { background: linear-gradient(to bottom right, var(--yellow-color) 30%, #a3a33d); }

body.theme-marketing-and-analytics .text-gradient,
div[data-links-category="marketing"] a:hover .menu-link-text,
.text-gradient-orange { background: linear-gradient(to bottom right, var(--orange-color) 30%, #a3713f); }

body.theme-agency-solutions .text-gradient,
div[data-links-category="agency"] a:hover .menu-link-text,
.text-gradient-pink   { background: linear-gradient(to bottom right, var(--pink-color) 30%, #9e4b6c); }

body.theme-ai-and-automation .text-gradient,
div[data-links-category="ai"] a:hover .menu-link-text,
.text-gradient-cyan   { background: linear-gradient(to bottom right, var(--cyan-color) 30%, #339e92); }
/* === END CASCADIA WEB SERVICES - TEXT GRADIENT === */


/* === CUSTOM CTA === */
.primary-button,
.light.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,
.primary-button:hover > div {
    color: var(--black-color);
}

body[class*="theme-"] .light.primary-button,
.light.primary-button {
    background-color: #111111 !important;
    border-color: var(--border-color) !important;
    color: #ffffff !important;
}

body[class*="theme-"] .light.primary-button:hover,
.light.primary-button:hover {
    background: var(--white-color) !important;
}

/* PRIMARY BUTTONS */
body.theme-frappe .primary-button,
.red-button.primary-button,
body.theme-frappe .theme-card:hover .primary-button,
.red-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-color);
}

body.theme-zoho .primary-button,
.blue-button.primary-button,
body.theme-zoho .theme-card:hover .primary-button,
.blue-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--blue-color);
}

body.theme-wordpress .primary-button,
.green-button.primary-button,
body.theme-wordpress .theme-card:hover .primary-button,
.green-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--green-color);
}

body.theme-email .primary-button,
.purple-button.primary-button,
body.theme-email .theme-card:hover .primary-button,
.purple-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--purple-color) ;
}

body.theme-operations-and-compliance .primary-button,
.yellow-button.primary-button,
body.theme-operations-and-compliance .theme-card:hover .primary-button,
.yellow-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--yellow-color);
}

body.theme-marketing-and-analytics .primary-button,
.orange-button.primary-button,
body.theme-marketing-and-analytics .theme-card:hover .primary-button,
.orange-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--orange-color);
}

body.theme-agency-solutions .primary-button,
.pink-button.primary-button,
body.theme-agency-solutions .theme-card:hover .primary-button,
.pink-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--pink-color);
}

body.theme-ai-and-automation .primary-button,
.cyan-button.primary-button,
body.theme-ai-and-automation .theme-card:hover .primary-button,
.cyan-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--cyan-color);
}

/* SUBTLE BUTTONS AND CARDS */
body.theme-frappe .subtle-card .primary-button,
.red-subtle-button.primary-button,
body.theme-frappe.theme-subtle-card:hover .primary-button,
.red-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-subtle-color);
}
body.theme-zoho .subtle-card .primary-button,
.blue-subtle-button.primary-button,
body.theme-zoho.theme-subtle-card:hover .primary-button,
.blue-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--blue-subtle-color);
}
body.theme-wordpress .subtle-card .primary-button,
.green-subtle-button.primary-button,
body.theme-wordpress.theme-subtle-card:hover .primary-button,
.green-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--green-subtle-color);
}
body.theme-email .subtle-card .primary-button,
.purple-subtle-button.primary-button,
body.theme-email.theme-subtle-card:hover .primary-button,
.purple-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--purple-subtle-color);
}
body.theme-operations-and-compliance .subtle-card .primary-button,
.yellow-subtle-button.primary-button,
body.theme-operations-and-compliance.theme-subtle-card:hover .primary-button,
.yellow-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--yellow-subtle-color);
}
body.theme-marketing-and-analytics .subtle-card .primary-button,
.orange-subtle-button.primary-button,
body.theme-marketing-and-analytics.theme-subtle-card:hover .primary-button,
.orange-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--orange-subtle-color);
}
body.theme-agency-solutions .subtle-card .primary-button,
.pink-subtle-button.primary-button,
body.theme-agency-solutions.theme-subtle-card:hover .primary-button,
.pink-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--pink-subtle-color);
}
body.theme-ai-and-automation .subtle-card .primary-button,
.cyan-subtle-button.primary-button,
body.theme-ai-and-automation.theme-subtle-card:hover .primary-button,
.cyan-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--cyan-subtle-color);
}

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

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

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

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

body.theme-operations-and-compliance .primary-button:hover,
.yellow-button.primary-button:hover,
body.theme-operations-and-compliance .theme-card .primary-button:hover,
.yellow-card .primary-button:hover {
    background: var(--yellow-color);
}

body.theme-marketing-and-analytics .primary-button:hover,
.orange-button.primary-button:hover,
body.theme-marketing-and-analytics .theme-card .primary-button:hover,
.orange-card .primary-button:hover {
    background: var(--orange-color);
}

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

body.theme-ai-and-automation .primary-button:hover,
.cyan-button.primary-button:hover,
body.theme-ai-and-automation .theme-card .primary-button:hover,
.cyan-card .primary-button:hover {
    background: var(--cyan-color);
}

body.theme-frappe .subtle-card .primary-button:hover,
.red-subtle-card .primary-button:hover {
    background: var(--red-subtle-color);
}
body.theme-zoho .subtle-card .primary-button:hover,
.blue-subtle-card .primary-button:hover {
    background: var(--blue-subtle-color);
}
body.theme-wordpress .subtle-card .primary-button:hover,
.green-subtle-card .primary-button:hover {
    background: var(--green-subtle-color);
}
body.theme-email .subtle-card .primary-button:hover,
.purple-subtle-card .primary-button:hover {
    background: var(--purple-subtle-color);
}
body.theme-operations-and-compliance .subtle-card .primary-button:hover,
.yellow-subtle-card .primary-button:hover {
    background: var(--yellow-subtle-color);
}
body.theme-marketing-and-analytics .subtle-card .primary-button:hover,
.orange-subtle-card .primary-button:hover {
    background: var(--orange-subtle-color);
}
body.theme-agency-solutions .subtle-card .primary-button:hover,
.pink-subtle-card .primary-button:hover {
    background: var(--pink-subtle-color);
}
body.theme-ai-and-automation .subtle-card .primary-button:hover,
.cyan-subtle-card .primary-button:hover {
    background: var(--cyan-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 DROPDOWN */
.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);
    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);
}

/* MEGA MENU */
.desktop-menu .mega-menu-container {
    transform-origin: top center;
    transform: scaleY(0.85);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out,
        visibility 0.3s ease-in-out;
    background: linear-gradient(to bottom, #111111d9, #000000);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 0 30px 5px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid var(--border-color-soft);
}
.desktop-menu .has-mega-menu:hover .mega-menu-container {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}
.desktop-menu .mega-menu-dropdown::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.desktop-menu .mega-menu-dropdown::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1));
}
.mega-menu-dropdown .links-column {
    border-color: var(--border-color);
}

/* MENU LINK ITEMS */
.menu-link-item {
    position: relative;
    opacity: 1;
    background: var(--darker-color);
    transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
}

.image-text-link-item {
    transition: opacity 0.3s ease-in-out !important;
}
.image-text-link-item img {
    border: 1px solid var(--border-color);
}
.links-column:hover .menu-link-item,
.icon-links-group:hover .menu-icon-link-item,
.links-container:hover .image-text-link-item {
    opacity: 0.7;
}
.links-column:hover .menu-link-item:hover,
.icon-links-group:hover .menu-icon-link-item:hover,
.links-container:hover .image-text-link-item:hover {
    opacity: 1;
    border-color: var(--hovered-border-color);
}
.desktop-menu .mega-menu-dropdown a:hover {
    cursor: pointer;
}
.icon-links-group .menu-icon-link-item {
    position: relative;
    width: fit-content;
    overflow: unset;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
}
.icon-links-group .menu-icon-link-item div {
    font-weight: 500;
    white-space: pre-wrap;
    text-align: left;
}
.icon-links-group .menu-icon-link-item:hover div {
    color: var(--white-color);
}
.icon-links-group .menu-icon-link-item::after,
.menu-link-item::after {
    content: '';
    position: absolute;
    top: 50%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%) translateX(0px);
    filter: invert(1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.icon-links-group .menu-icon-link-item::after {
    right: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
}

.icon-links-group .menu-icon-link-item::after {
    right: 0;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(to bottom right, #ffffff 30%, #ffffff80);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    filter: none;
}
div[data-links-category="frappe"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--red-color) 30%, #9b3a3a);
}
div[data-links-category="zoho"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--blue-color) 30%, #3a4a9b);
}
div[data-links-category="wordpress"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a);
}
div[data-links-category="email"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--purple-color) 30%, #4a3a9b);
}
div[data-links-category="operations"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--yellow-color) 30%, #a3a33d);
}
div[data-links-category="marketing"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--orange-color) 30%, #a3713f);
}
div[data-links-category="agency"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--pink-color) 30%, #9e4b6c);
}
div[data-links-category="ai"] .menu-icon-link-item::after {
    background-image: linear-gradient(to bottom right, var(--cyan-color) 30%, #339e92);
}

.menu-link-item::after {
    right: 35px;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
}

.icon-links-group .menu-icon-link-item:hover::after,
.menu-link-item:hover::after {
    transform: translateY(-50%) translateX(25px);
    opacity: 1;
}

/* MOBILE MENU */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    z-index: 9999999;
    height: 100vh;
    height: 100dvh;
}
.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 0.3s ease;
}
.mobile-nav-link.open .dropdown img {
    transform: rotate(180deg);
}

.drawer-back-button {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}
.drawer-back-button:hover, .drawer-back-button:active {
    opacity: 1;
}
/* MOBILE DRAWER */
.mobile-navigation {
    position: relative;
    overflow: hidden;
    border-color: var(--border-color);
}
.mobile-nav-link {
    position: static;
}
.mobile-nav-link a {
    border-color: var(--border-color);
}
.drawer-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    height: calc(100dvh - 161px);
    z-index: 1;
}
.drawer-container.is-open {
    transform: translateX(0);
}

.drawer-trigger,
.mobile-cta-container  {
    border-color: var(--border-color);
}
.mobile-cta-container {
    z-index: 2;
}
/* === END GLOBAL HEADER === */


/* === BREADCRUMBS === */
.cws-breadcrumb ol {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.cws-breadcrumb li + li::before {
    content: "/";
    color: rgba(255,255,255,0.3);
    margin-right: 3px;
}
.cws-breadcrumb a {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}
.cws-breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.cws-breadcrumb span {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}
/* === END BREADCRUMBS === */


/* === SKELETON UTILITY === */
.skeleton-item {
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    }
    @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
    }
/* === END SKELETON UTILITY === */


/* === BREADCRUMB SKELETON === */
.breadcrumb-skeleton {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.breadcrumb-skeleton li + li::before {
    content: "/";
    color: rgba(255,255,255,0.15);
    margin-right: 3px;
    font-size: 12px;
}
/* === END BREADCRUMB SKELETON === */


/* === 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 === */


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

body.theme-frappe .text-badge,
.text-badge.red {
    /* border-color: var(--red-color); */
    background: color-mix(in srgb, var(--red-color) 10%, black);
}

body.theme-frappe .text-badge div,
.text-badge.red div {
    color: var(--red-color);
}

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

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

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

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

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

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

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

.text-badge.vs {
    z-index: 1;
    transform: rotate(350deg);
    background: var(--white-color) !important;
}
.text-badge.vs div {
    color: var(--black-color) !important;
}
/* === TEXT HERO BADGE STYLE === */

/* === ON PAGE NAVIGATION === */
.opn-nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999999;
    display: none;
    align-items: center;
    gap: 0;
    height: 100dvh;
}

.opn-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--black-color);
    border: 0.5px solid var(--border-color);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    padding: 12px 7px;
    cursor: pointer;
    width: 35px;
    position: relative;
    z-index: 1;
}

.opn-toggle .opn-label {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    color: rgba(255,255,255,0.6);
}

.opn-nav:has(.opn-drawer:not(.collapsed)) .opn-toggle .opn-label {
    color: rgba(255,255,255,1) !important ;
}

.opn-toggle:hover .opn-label {
    color: rgba(255,255,255,1);
}

.opn-bar-track {
    width: 3px;
    height: 80px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    cursor: ns-resize;
}

.opn-bar-thumb {
    width: 100%;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    position: absolute;
    top: 0;
    transition: top 0.2s ease, height 0.2s ease;
}

.opn-drawer {
    background: var(--black-color);
    border-left: 0.5px solid rgba(255,255,255,0.08);
    width: 350px;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    margin-right: -4px;
    transition: none;
}

.opn-drawer.opn-ready {
    transition: width 0.3s ease, opacity 0.3s ease;
}

.opn-drawer.collapsed {
    width: 8px;
    opacity: 1;
    padding: 0;
    pointer-events: none;
}

.opn-drawer::-webkit-scrollbar { display: none; }

.opn-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 28px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid var(--black-color);
    transition: color 0.2s, border-color 0.2s;
    white-space: pre-wrap;
}

.opn-drawer.collapsed .opn-item {
    white-space: nowrap;
}

.opn-item:hover { color: rgba(255,255,255,0.7); }

.opn-item.active {
    color: var(--white-color);
    font-weight: 500;
    border-left-color: var(--white-color);
}
@media screen and (max-width: 768px) {
    .opn-toggle {
        border-radius: 10px 0 0 10px;
        padding: 10px 6px;
        width: 30px;
    }

    .opn-toggle .opn-label {
        font-size: 8px;
        line-height: 8px;
        margin-right: -2px;
    }
    .opn-drawer {
        background: var(--black-color);
        border-left: 0.5px solid rgba(255,255,255,0.08);
        width: 250px;
    }
}
/* === END ON PAGE NAVIGATION === */


/* === 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=== */
.theme-card,
.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%);
}
.theme-card,
.card:hover {
    border-color: var(--hovered-border-color) !important;
    box-shadow: inset -40px -40px 50px -25px rgba(51, 50, 50, 0.5);
}

/* THEME CARDS */
body.theme-frappe .theme-card,
.red-card {
    border: var(--card-border-width) var(--card-border-type) var(--red-border-color) !important;
}

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

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

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

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

body.theme-operations-and-compliance .theme-card,
.yellow-card {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-border-color) !important;
}
body.theme-operations-and-compliance .theme-subtle-card,
.yellow-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--yellow-subtle-border-color) !important;
}

body.theme-marketing-and-analytics .theme-card,
.orange-card {
    border: var(--card-border-width) var(--card-border-type) var(--orange-border-color) !important;
}
body.theme-marketing-and-analytics .theme-subtle-card,
.orange-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--orange-subtle-border-color) !important;
}

body.theme-agency-solutions .theme-card,
.pink-card {
    border: var(--card-border-width) var(--card-border-type) var(--pink-border-color) !important;
}
body.theme-agency-solutions .theme-subtle-card,
.pink-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--pink-subtle-border-color) !important;
}

body.theme-ai-and-automation .theme-card,
.cyan-card {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-border-color) !important;
}
body.theme-ai-and-automation .theme-subtle-card,
.cyan-subtle-card {
    border: var(--card-border-width) var(--card-border-type) var(--cyan-subtle-border-color) !important;
}

/* THEME CARDS HOVER*/
body.theme-frappe .theme-card:hover,
.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;
}
body.theme-frappe .theme-subtle-card:hover,
.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;
}
body.theme-zoho .theme-card:hover,
.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;
}
body.theme-zoho .theme-subtle-card:hover,
.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;
}
body.theme-wordpress .theme-card:hover,
.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;
}
body.theme-wordpress .theme-subtle-card:hover,
.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;
}
body.theme-email .theme-card:hover,
.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;
}
body.theme-email .theme-subtle-card:hover,
.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;
}
body.theme-operations-and-compliance .theme-card:hover,
.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;
}
body.theme-operations-and-compliance .theme-subtle-card:hover,
.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;
}
body.theme-marketing-and-analytics .theme-card:hover,
.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;
}
body.theme-marketing-and-analytics .theme-subtle-card:hover,
.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;
}
body.theme-agency-solutions .theme-card:hover,
.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;
}
body.theme-agency-solutions .theme-subtle-card:hover,
.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;
}
body.theme-ai-and-automation .theme-card:hover,
.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;
}
body.theme-ai-and-automation .theme-subtle-card:hover,
.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;
}

/* VS CARDS - BOX SHADOW */
body.theme-frappe .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--red-subtle-shadow);
}
body.theme-zoho .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--blue-subtle-shadow);
}
body.theme-wordpress .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--green-subtle-shadow);
}
body.theme-email .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--purple-subtle-shadow);
}
body.theme-operations-and-compliance .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--yellow-subtle-shadow);
}
body.theme-marketing-and-analytics .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--orange-subtle-shadow);
}
body.theme-agency-solutions .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--pink-subtle-shadow);
}
body.theme-ai-and-automation .theme-card.in-shadow-card {
    box-shadow: inset var(--card-box-shadow-setting) var(--cyan-subtle-shadow);
}

.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;
}

/* FOOTER SHINE BORDER */
body[class*="theme-"] footer.shine-border::before {
    background: linear-gradient(90deg, transparent 0%, rgba(143, 143, 143, 0.67) 50%, transparent 100%) !important;
}

/* THEME-SPECIFIC SHINE BORDERS */
body.theme-frappe .shine-border::before,
.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;
}
body.theme-zoho .shine-border::before,
.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;
}
body.theme-wordpress .shine-border::before,
.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;
}
body.theme-email .shine-border::before,
.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;
}
body.theme-operations-and-compliance .shine-border::before,
.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;
}
body.theme-marketing-and-analytics .shine-border::before,
.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;
}
body.theme-agency-solutions .shine-border::before,
.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;
}
body.theme-ai-and-automation .shine-border::before,
.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;
}

/* SUBTLE CARDS BORDER */
body.theme-frappe .shine-border::before,
.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;
}
body.theme-zoho .shine-border::before,
.blue-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--blue-transparent) 0%, var(--blue-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-wordpress .shine-border::before,
.green-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--green-transparent) 0%, var(--green-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-email .shine-border::before,
.purple-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--purple-transparent) 0%, var(--purple-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-operations-and-compliance .shine-border::before,
.yellow-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--yellow-transparent) 0%, var(--yellow-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-marketing-and-analytics .shine-border::before,
.orange-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--orange-transparent) 0%, var(--orange-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-agency-solutions .shine-border::before,
.pink-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--pink-transparent) 0%, var(--pink-subtle-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
body.theme-ai-and-automation .shine-border::before,
.cyan-subtle-card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--cyan-transparent) 0%, var(--cyan-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;
}

/* VS CARD */
.vs-card img {
    z-index: 2;
}

/* POPULAR COMPARISON */
/* ZOHO */
.popular-comparison-cards .theme-zoho.card.theme-subtle-card {
    background: var(--dark-blue-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--blue-subtle-border-color) !important;
}
.popular-comparison-cards .theme-zoho.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;
}
.popular-comparison-cards .theme-zoho.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--blue-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-zoho.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--blue-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--blue-color) !important;
}
.popular-comparison-cards .theme-zoho .text-badge {
    background: color-mix(in srgb, var(--blue-color) 10%, black) !important;
}
.popular-comparison-cards .theme-zoho .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--blue-color) 30%, #3a4a9b);
}
.popular-comparison-cards .theme-zoho .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--blue-color) !important;
}
.popular-comparison-cards .theme-zoho.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--blue-subtle-color) !important;
}
.popular-comparison-cards .theme-zoho.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--blue-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--blue-color) !important;
}

/* WORDPRESS */
.popular-comparison-cards .theme-wordpress.card.theme-subtle-card {
    background: var(--dark-green-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--green-subtle-border-color) !important;
}
.popular-comparison-cards .theme-wordpress.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;
}
.popular-comparison-cards .theme-wordpress.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--green-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-wordpress.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--green-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--green-color) !important;
}
.popular-comparison-cards .theme-wordpress .text-badge {
    background: color-mix(in srgb, var(--green-color) 10%, black) !important;
}
.popular-comparison-cards .theme-wordpress .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--green-color) 30%, #3a9b6a);
}
.popular-comparison-cards .theme-wordpress .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--green-color) !important;
}
.popular-comparison-cards .theme-wordpress.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--green-subtle-color) !important;
}
.popular-comparison-cards .theme-wordpress.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--green-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--green-color) !important;
}

/* FRAPPE */
.popular-comparison-cards .theme-frappe.card.theme-subtle-card {
    background: var(--dark-red-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--red-subtle-border-color) !important;
}
.popular-comparison-cards .theme-frappe.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;
}
.popular-comparison-cards .theme-frappe.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--red-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-frappe.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--red-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--red-color) !important;
}
.popular-comparison-cards .theme-frappe .text-badge {
    background: color-mix(in srgb, var(--red-color) 10%, black) !important;
}
.popular-comparison-cards .theme-frappe .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--red-color) 30%, #9b3a3a);
}
.popular-comparison-cards .theme-frappe .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-color) !important;
}
.popular-comparison-cards .theme-frappe.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--red-subtle-color) !important;
}
.popular-comparison-cards .theme-frappe.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--red-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--red-color) !important;
}

/* EMAIL */
.popular-comparison-cards .theme-email.card.theme-subtle-card {
    background: var(--dark-purple-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--purple-subtle-border-color) !important;
}
.popular-comparison-cards .theme-email.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;
}
.popular-comparison-cards .theme-email.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--purple-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-email.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--purple-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--purple-color) !important;
}
.popular-comparison-cards .theme-email .text-badge {
    background: color-mix(in srgb, var(--purple-color) 10%, black) !important;
}
.popular-comparison-cards .theme-email .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--purple-color) 30%, #4a3a9b);
}
.popular-comparison-cards .theme-email .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--purple-color) !important;
}
.popular-comparison-cards .theme-email.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--purple-subtle-color) !important;
}
.popular-comparison-cards .theme-email.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--purple-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--purple-color) !important;
}


/* MARKETING AND ANALYTICS */
.popular-comparison-cards .theme-marketing-and-analytics.card.theme-subtle-card {
    background: var(--dark-orange-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--orange-subtle-border-color) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics.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;
}
.popular-comparison-cards .theme-marketing-and-analytics.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--orange-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--orange-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--orange-color) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics .text-badge {
    background: color-mix(in srgb, var(--orange-color) 10%, black) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--orange-color) 30%, #a3713f);
}
.popular-comparison-cards .theme-marketing-and-analytics .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--orange-color) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--orange-subtle-color) !important;
}
.popular-comparison-cards .theme-marketing-and-analytics.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--orange-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--orange-color) !important;
}

/* AI AND AUTOMATION */
.popular-comparison-cards .theme-ai-and-automation.card.theme-subtle-card {
    background: var(--dark-cyan-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--cyan-subtle-border-color) !important;
}
.popular-comparison-cards .theme-ai-and-automation.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;
}
.popular-comparison-cards .theme-ai-and-automation.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--cyan-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-ai-and-automation.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--cyan-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--cyan-color) !important;
}
.popular-comparison-cards .theme-ai-and-automation .text-badge {
    background: color-mix(in srgb, var(--cyan-color) 10%, black) !important;
}
.popular-comparison-cards .theme-ai-and-automation .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--cyan-color) 30%, #339e92);
}
.popular-comparison-cards .theme-ai-and-automation .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--cyan-color) !important;
}
.popular-comparison-cards .theme-ai-and-automation.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--cyan-subtle-color) !important;
}
.popular-comparison-cards .theme-ai-and-automation.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--cyan-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--cyan-color) !important;
}

/* OPERATIONS AND COMPLIANCE */
.popular-comparison-cards .theme-operations-and-compliance.card.theme-subtle-card {
    background: var(--dark-yellow-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--yellow-subtle-border-color) !important;
}
.popular-comparison-cards .theme-operations-and-compliance.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;
}
.popular-comparison-cards .theme-operations-and-compliance.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--yellow-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-operations-and-compliance.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--yellow-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--yellow-color) !important;
}
.popular-comparison-cards .theme-operations-and-compliance .text-badge {
    background: color-mix(in srgb, var(--yellow-color) 10%, black) !important;
}
.popular-comparison-cards .theme-operations-and-compliance .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--yellow-color) 30%, #a3a33d);
}
.popular-comparison-cards .theme-operations-and-compliance .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--yellow-color) !important;
}
.popular-comparison-cards .theme-operations-and-compliance.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--yellow-subtle-color) !important;
}
.popular-comparison-cards .theme-operations-and-compliance.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--yellow-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--yellow-color) !important;
}

/* AGENCY AND SOLUTIONS */
.popular-comparison-cards .theme-agency-and-solutions.card.theme-subtle-card {
    background: var(--dark-pink-gradient);
    border: var(--card-border-width) var(--card-border-type) var(--pink-subtle-border-color) !important;
}
.popular-comparison-cards .theme-agency-and-solutions.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;
}
.popular-comparison-cards .theme-agency-and-solutions.card.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--pink-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
}
.popular-comparison-cards .theme-agency-and-solutions.card:hover.shine-border::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, var(--pink-color) 50%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0px 0px 40px 2px var(--pink-color) !important;
}
.popular-comparison-cards .theme-agency-and-solutions .text-badge {
    background: color-mix(in srgb, var(--pink-color) 10%, black) !important;
}
.popular-comparison-cards .theme-agency-and-solutions .text-badge div.text-gradient-theme {
    background-image: linear-gradient(to bottom right, var(--pink-color) 30%, #9e4b6c);
}
.popular-comparison-cards .theme-agency-and-solutions .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--pink-color) !important;
}
.popular-comparison-cards .theme-agency-and-solutions.theme-subtle-card:hover .primary-button {
    border: var(--button-border-width) var(--button-border-type) var(--pink-subtle-color) !important;
}
.popular-comparison-cards .theme-agency-and-solutions.theme-subtle-card .primary-button:hover, .green-subtle-card .primary-button:hover {
    background: var(--pink-color) !important;
    border: var(--button-border-width) var(--button-border-type) var(--pink-color) !important;
}

/* MOUNTDEV SECTION */
.mountdev-container .theme-default.card {
    background: linear-gradient(176deg, #000000 60%, #131313 100%);
    border: var(--card-border-width) var(--card-border-type) var(--border-color) !important;
}
.mountdev-container .theme-default.card:hover {
    border: var(--card-border-width) var(--card-border-type) var(--hovered-border-color) !important;
}
/* === 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 === */

/* === HOMEPAGE - MOUNTDEV SECTION === */
.mountdev-container .grid-cards {
    border-color: var(--border-color);
}
/* === END HOMEPAGE - MOUNTDEV 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: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 50px);
    overflow: hidden;
    z-index: 1;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 6px, #ffffff40 6px, #ffffff40 12px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
}
.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(--red-color); }
.triangle:nth-child(2)  { --color: var(--blue-color); }
.triangle:nth-child(3)  { --color: var(--green-color); }
.triangle:nth-child(4)  { --color: var(--purple-color); }
.triangle:nth-child(5)  { --color: var(--yellow-color); }
.triangle:nth-child(6)  { --color: var(--orange-color); }
.triangle:nth-child(7)  { --color: var(--pink-color); }
.triangle:nth-child(8)  { --color: var(--cyan-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: 75px;   --y: 30px; }
    .triangle:nth-child(5)  { --x: -30px;  --y: -90px; }
    .triangle:nth-child(6)  { --x: 45px;   --y: 70px; }
    .triangle:nth-child(7)  { --x: -100px; --y: 20px; }
    .triangle:nth-child(8)  { --x: 30px;   --y: -110px; }

    .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 > div {
    overflow: visible !important;
}

.other-services-wrapper {
    height: auto !important;
    overflow: visible !important;
}

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

.services-filter-category a {
    display: flex;
    align-items: center;
    min-width: 90px;
}

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

body.theme-frappe .services-filter-category a:hover,
.services-filter-category.red a:hover { border-color: var(--red-border-color); }

body.theme-zoho .services-filter-category.red a:hover,
.services-filter-category.blue a:hover { border-color: var(--blue-border-color); }

body.theme-wordpress .services-filter-category.red a:hover,
.services-filter-category.green a:hover { border-color: var(--green-border-color); }

body.theme-email .services-filter-category.red a:hover,
.services-filter-category.purple a:hover { border-color: var(--purple-border-color); }

body.theme-operations-and-compliance .services-filter-category.red a:hover,
.services-filter-category.yellow a:hover { border-color: var(--yellow-border-color); }

body.theme-marketing-and-analytics .services-filter-category.red a:hover,
.services-filter-category.orange a:hover { border-color: var(--orange-border-color); }

body.theme-agency-solutions .services-filter-category a:hover,
.services-filter-category.pink a:hover { border-color: var(--pink-border-color); }

body.theme-ai-and-automation .services-filter-category a:hover,
.services-filter-category.cyan a:hover { border-color: var(--cyan-border-color); }

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


body.theme-frappe .services-filter-category a.active,
.services-filter-category.red a.active { background: var(--red-color); border-color: var(--red-color); box-shadow: 0 4px 12px var(--red-shadow); }

body.theme-zoho .services-filter-category a.active,
.services-filter-category.blue a.active { background: var(--blue-color); border-color: var(--blue-color); box-shadow: 0 4px 12px var(--blue-shadow); }

body.theme-wordpress .services-filter-category a.active,
.services-filter-category.green a.active { background: var(--green-color); border-color: var(--green-color); box-shadow: 0 4px 12px var(--green-shadow); }

body.theme-email .services-filter-category a.active,
.services-filter-category.purple a.active { background: var(--purple-color); border-color: var(--purple-color); box-shadow: 0 4px 12px var(--purple-shadow); }

body.theme-operations-and-compliance .services-filter-category a.active,
.services-filter-category.yellow a.active { background: var(--yellow-color); border-color: var(--yellow-color); box-shadow: 0 4px 12px var(--yellow-shadow); }

body.theme-marketing-and-analytics .services-filter-category a.active,
.services-filter-category.orange a.active { background: var(--orange-color); border-color: var(--orange-color); box-shadow: 0 4px 12px var(--orange-shadow); }

body.theme-agency-solutions .services-filter-category a.active,
.services-filter-category.pink a.active { background: var(--pink-color); border-color: var(--pink-color); box-shadow: 0 4px 12px var(--pink-shadow); }

body.theme-ai-and-automation .services-filter-category a.active,
.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 / KNOWLEDGE BASE 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;
}

.blog-posts,
.kb-posts {
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

.blog-posts.is-fading-out,
.kb-posts.is-fading-out {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.blog-posts.is-fading-in,
.kb-posts.is-fading-in {
    opacity: 0;
    transform: translateY(6px);
}
@media only screen and (max-width: 1023px) {
    .hero-section-inner.single-blog-post::before{
        background: rgba(0, 0, 0, 0.6); 
    }
}
/* === END BLOG / KNOWLEDGE BASE 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;
}

body.theme-frappe .tabination .tab-button::after,
.tabination.red .tab-button::after {
    background: var(--red-color);
}
body.theme-zoho .tabination .tab-button::after,
.tabination.blue .tab-button::after {
    background: var(--blue-color);
}
body.theme-wordpress .tabination .tab-button::after,
.tabination.green .tab-button::after {
    background: var(--green-color);
}
body.theme-email .tabination .tab-button::after,
.tabination.purple .tab-button::after {
    background: var(--purple-color);
}
body.theme-operations-and-compliance .tab-button::after,
.tabination.yellow .tab-button::after {
    background: var(--yellow-color);
}
body.theme-marketing-and-analytics .tab-button::after,
.tabination.orange .tab-button::after {
    background: var(--orange-color);
}
body.theme-agency-solutions .tab-button::after,
.tabination.pink .tab-button::after {
    background: var(--pink-color);
}
body.theme-ai-and-automation .tab-button::after,
.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;
}

body.theme-frappe .comparison-featured-rotator,
.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
    );
}
body.theme-zoho .comparison-featured-rotator,
.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
    );
}
body.theme-wordpress .comparison-featured-rotator,
.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
    );
}
body.theme-email .comparison-featured-rotator,
.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
    );
}
body.theme-operations-and-compliance .comparison-featured-rotator,
.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
    );
}
body.theme-marketing-and-analytics .comparison-featured-rotator,
.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
    );
}
body.theme-agency-solutions .comparison-featured-rotator,
.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
    );
}
body.theme-ai-and-automation .comparison-featured-rotator,
.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;
    }

    body.theme-frappe .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-zoho .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-wordpress .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-email .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-operations-and-compliance .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-marketing-and-analytics .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-agency-solutions .comparison-row .comparison-value.is-featured::before,
    .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);
    }
    body.theme-ai-and-automation .comparison-row .comparison-value.is-featured::before,
    .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 === */

body.theme-frappe .comp-card,
.theme-red.comp-card {
    background: var(--dark-red-gradient);
}
body.theme-zoho .comp-card,
.theme-blue.comp-card {
    background: var(--dark-blue-gradient);
}
body.theme-wordpress .comp-card,
.theme-green.comp-card {
    background: var(--dark-green-gradient);
}
body.theme-email .comp-card,
.theme-purple.comp-card {
    background: var(--dark-purple-gradient);
}
body.theme-operations-and-compliance .comp-card,
.theme-yellow.comp-card {
    background: var(--dark-yellow-gradient);
}
body.theme-marketing-and-analytics .comp-card,
.theme-orange.comp-card {
    background: var(--dark-orange-gradient);
}
body.theme-agency-solutions .comp-card,
.theme-pink.comp-card {
    background: var(--dark-pink-gradient);
}
body.theme-ai-and-automation .comp-card,
.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;
}

.body.theme-frappe .row-list::before,
.row-list.red::before {
    background: var(--dark-red-gradient);
}
.body.theme-zoho .row-list::before,
.row-list.blue::before {
    background: var(--dark-blue-gradient);
}
.body.theme-wordpress .row-list::before,
.row-list.green::before {
    background: var(--dark-green-gradient);
}
.body.theme-email .row-list::before,
.row-list.purple::before {
    background: var(--dark-purple-gradient);
}
.body.theme-operations-and-compliance .row-list::before,
.row-list.yellow::before {
    background: var(--dark-yellow-gradient);
}
.body.theme-marketing-and-analytics .row-list::before,
.row-list.orange::before {
    background: var(--dark-orange-gradient);
}
.body.theme-agency-solutions .row-list::before,
.row-list.pink::before {
    background: var(--dark-pink-gradient);
}
.body.theme-ai-and-automation .row-list::before,
.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);
}

body.theme-frappe .comp-explainer,
.comp-explainer.red {
    --service-color: var(--red-color);
    --service-shadow: var(--red-shadow);
}

body.theme-zoho .comp-explainer,
.comp-explainer.blue {
    --service-color: var(--blue-color);
    --service-shadow: var(--blue-shadow);
}

body.theme-wordpress .comp-explainer,
.comp-explainer.green {
    --service-color: var(--green-color);
    --service-shadow: var(--green-shadow);
}

body.theme-email .comp-explainer,
.comp-explainer.purple {
    --service-color: var(--purple-color);
    --service-shadow: var(--purple-shadow);
}

body.theme-operations-and-compliance .comp-explainer,
.comp-explainer.yellow {
    --service-color: var(--yellow-color);
    --service-shadow: var(--yellow-shadow);
}

body.theme-marketing-and-analytics .comp-explainer,
.comp-explainer.orange {
    --service-color: var(--orange-color);
    --service-shadow: var(--orange-shadow);
}

body.theme-agency-solutions .comp-explainer, 
.comp-explainer.pink {
    --service-color: var(--pink-color);
    --service-shadow: var(--pink-shadow);
}

body.theme-ai-and-automation .comp-explainer,
.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);
}

.col-panel.them .capsule.is-muted {
    background: #d3d1c7;
    color: #444441;
}

.col-panel.them .capsule.is-muted-light {
    background: #e8e6e0;
    color: #5F5E5A;
}

@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 */
body.theme-frappe .left-panel.is-us,
.theme-red .left-panel.is-us {
    background: var(--dark-red-gradient);
}

body.theme-zoho .left-panel.is-us,
.theme-blue .left-panel.is-us {
    background: var(--dark-blue-gradient);
}

body.theme-wordpress .left-panel.is-us,
.theme-green .left-panel.is-us {
    background: var(--dark-green-gradient);
}

body.theme-email .left-panel.is-us,
.theme-purple .left-panel.is-us {
    background: var(--dark-purple-gradient);
}

body.theme-operations-and-compliance .left-panel.is-us,
.theme-yellow .left-panel.is-us {
    background: var(--dark-yellow-gradient);
}

body.theme-marketing-and-analytics .left-panel.is-us,
.theme-orange .left-panel.is-us {
    background: var(--dark-orange-gradient);
}

body.theme-agency-solutions .left-panel.is-us,
.theme-pink .left-panel.is-us {
    background: var(--dark-pink-gradient);
}

body.theme-ai-and-automation .left-panel.is-us,
.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);
}
body.theme-frappe .panel-state.state-us,
.theme-red .panel-state.state-us,
body.theme-frappe #block-us .scroll-item,
.theme-red #block-us .scroll-item {
    background: var(--dark-red-gradient);
}
body.theme-zoho .panel-state.state-us,
.theme-blue .panel-state.state-us,
body.theme-zoho #block-us .scroll-item,
.theme-blue #block-us .scroll-item {
    background: var(--dark-blue-gradient);
}
body.theme-wordpress .panel-state.state-us,
.theme-green .panel-state.state-us,
body.theme-wordpress #block-us .scroll-item,
.theme-green #block-us .scroll-item {
    background: var(--dark-green-gradient);
}
body.theme-email .panel-state.state-us,
.theme-purple .panel-state.state-us,
body.theme-email #block-us .scroll-item,
.theme-purple #block-us .scroll-item {
    background: var(--dark-purple-gradient);
}
body.theme-operations-and-compliance .panel-state.state-us,
.theme-yellow .panel-state.state-us,
body.theme-operations-and-compliance #block-us .scroll-item,
.theme-yellow #block-us .scroll-item {
    background: var(--dark-yellow-gradient);
}
body.theme-marketing-and-analytics .panel-state.state-us,
.theme-orange .panel-state.state-us,
body.theme-marketing-and-analytics #block-us .scroll-item,
.theme-orange #block-us .scroll-item {
    background: var(--dark-orange-gradient);
}
body.theme-agency-solutions .panel-state.state-us,
.theme-pink .panel-state.state-us,
body.theme-agency-solutions #block-us .scroll-item,
.theme-pink #block-us .scroll-item {
    background: var(--dark-pink-gradient);
}
body.theme-ai-and-automation .panel-state.state-us,
.theme-cyan .panel-state.state-us,
body.theme-ai-and-automation #block-us .scroll-item,
.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);
}
body.theme-frappe .counter-card,
.theme-red .counter-card {
    background: var(--dark-red-gradient);
}
body.theme-zoho .counter-card,
.theme-blue .counter-card {
    background: var(--dark-blue-gradient);
}
body.theme-wordpress .counter-card,
.theme-green .counter-card {
    background: var(--dark-green-gradient);
}
body.theme-email .counter-card,
.theme-purple .counter-card {
    background: var(--dark-purple-gradient);
}
body.theme-operations-and-compliance .counter-card,
.theme-yellow .counter-card {
    background: var(--dark-yellow-gradient);
}
body.theme-marketing-and-analytics .counter-card,
.theme-orange .counter-card {
    background: var(--dark-orange-gradient);
}
body.theme-agency-solutions .counter-card,
.theme-pink .counter-card {
    background: var(--dark-pink-gradient);
}
body.theme-ai-and-automation .counter-card,
.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;
    flex-direction: column;
    justify-content: space-between;
}
.pin-cell--whitelabel {
    grid-column: 2;
    grid-row: 1;
}
.pin-cell--proactive {
    grid-column: 3;
    grid-row: 1;
}
.pin-cell--services {
    grid-column: 2 / 4;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}
.pin-cell--maintenence {
    grid-column: 1;
    grid-row: 3;
}
.pin-cell--performance {
    grid-column: 2;
    grid-row: 3;
}
.pin-cell--transactional {
    grid-column: 3;
    grid-row: 3;
}

body.theme-frappe .pin-cell,
.theme-red.pin-cell {
    background: var(--dark-red-gradient);
}
body.theme-zoho .pin-cell,
.theme-blue.pin-cell {
    background: var(--dark-blue-gradient);
}
body.theme-wordpress .pin-cell,
.theme-green.pin-cell {
    background: var(--dark-green-gradient);
}
body.theme-email .pin-cell,
.theme-purple.pin-cell {
    background: var(--dark-purple-gradient);
}
body.theme-operations-and-compliance .pin-cell,
.theme-yellow.pin-cell {
    background: var(--dark-yellow-gradient);
}
body.theme-marketing-and-analytics .pin-cell,
.theme-orange.pin-cell {
    background: var(--dark-orange-gradient);
}
body.theme-agency-solutions .pin-cell,
.theme-pink.pin-cell {
    background: var(--dark-pink-gradient);
}
body.theme-ai-and-automation .pin-cell,
.theme-cyan.pin-cell {
    background: var(--dark-cyan-gradient);
}

.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;
    letter-spacing: -1px;
}

.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: repeat(6, 1fr);
        grid-template-rows: auto;
        height: auto;
        align-items: stretch;
    }

    .pin-cell--hero {
        grid-column: 1 / 7;
        grid-row: 1;
    }

    .pin-cell--whitelabel {
        grid-column: 1 / 4;
        grid-row: 2;
    }
    .pin-cell--proactive {
        grid-column: 4 / 7;
        grid-row: 2;
    }

    .pin-cell--services {
        grid-column: 1 / 7;
        grid-row: 3;
        flex-direction: row;
        align-items: center;
    }

    .pin-cell--maintenence {
        grid-column: 1 / 3;
        grid-row: 4;
    }
    .pin-cell--performance {
        grid-column: 3 / 5;
        grid-row: 4;
    }
    .pin-cell--transactional {
        grid-column: 5 / 7;
        grid-row: 4;
    }

    .pin-vline {
        width: 1px;
        height: auto;
        align-self: stretch;
    }
}

@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,
    .pin-cell--maintenence,
    .pin-cell--performance,
    .pin-cell--transactional {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 200px;
    }
    .pin-cell--services {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .pin-vline {
        width: 100% !important;
        height: 1px !important;
        align-self: auto !important;
    }
    .pin-header {
        flex-direction: column;
    }
    .pin-tagline {
        text-align: left;
        max-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .pin-grid {
        display: flex;
        flex-direction: column;
    }
    .pin-cell {
        min-height: 400px;
    }
}
/* === END BENTO GRID === */


/* === TERMLY POPUP AND CONTENT === */
[class*="termly-styles-root"] ::-webkit-scrollbar-button {
    display: none !important;
}
[class*="termly-styles-root"] ::-webkit-scrollbar {
    width: 2px !important;
}
[class*="termly-styles-root"] ::-webkit-scrollbar-track {
    background: transparent !important;
}
[class*="termly-styles-root"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
}
[class*="termly-styles-root"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}
[class*="termly-styles-root"] {
    scrollbar-color: unset !important;
}

[name="termly-embed"] {
    opacity: 0.92 !important;
    filter: brightness(0.95) !important;
}
[name="termly-embed"] iframe,
[class*="termly-style-container"] iframe[title="Policy"] {
    border: none !important;
    filter: invert(1) saturate(0) brightness(1.2) !important;
}

[class*="termly-style-container"]:has(iframe[title="Policy"]) {
    border-bottom: 2px solid var(--border-color) !important;
}

div#termly-code-snippet-support {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999999;
}

[class*="termly-styles-modal"], .t-consentPrompt {
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
    transition-delay: 0.25s !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 0 0 0 0 rgba(51, 50, 50, 0.5) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(4px) !important;
    background: var(--black-color) !important;
}

[class*="termly-styles-modal"] [class*="termly-styles-root"]:last-child {
    border-top: unset !important;
}
[class*="termly-styles-root"]:not(:last-child):not(span[role="button"]) {
    border-bottom: solid 1px var(--border-color) !important;
}
[class*="termly-styles-inner"] {
    padding: 30px !important;
}
[class*="termly-styles-inner"]:has(button) {
    padding: 15px 30px !important;
}
[class*="termly-styles-closeTagContainer"] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
[class*="termly-styles-closeTagContainer"] svg {
    width: 12px;
    height: 12px;
}
[class*="termly-styles-closeTagContainer"] g {
    fill: var(--text-color) !important;
}

[class*="termly-styles-modal"] div[class*="termly-styles-cbLabel"], [class*="termly-styles-modal"] h2[class*="termly-styles-preferenceTitle"],[class*="termly-styles-modal"] h2[class*="termly-styles-title"],[class*="termly-styles-modal"] h3 {
    font-family: var(--primary-font) !important;
    color: var(--white-color) !important;
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: -0.5px !important;
}
[class*="termly-styles-modal"] div[class*="termly-styles-cbLabel"] {
    font-size: 14px;
}
[class*="termly-styles-modal"] h2[class*="termly-styles-preferenceTitle"],
[class*="termly-styles-modal"] h2[class*="termly-styles-title"] {
    font-size: 24px !important;
}
[class*="termly-styles-modal"] h3 {
    font-size: 18px !important;
}

span[role="button"], [class*="termly-styles-modal"] [class*="termly-styles-module-label"],
[class*="termly-styles-modal"] [class*="termly-styles-link"] {
    color: var(--white-color) !important;
    text-decoration: none !important;
}

[class*="termly-styles-modal"] :where(p, div[class*="termly-styles-body"], span[role="button"]) {
    font-family: var(--primary-font) !important;
    letter-spacing: -0.5px !important;
}
span[role="button"] {
    border-bottom: unset !important;
}

[class*="termly-styles-modal"] :where(p, div[class*="termly-styles-body"]) {
    color: var(--text-color) !important;
}

.t-backButton {
    padding: 0 !important;
    color: var(--text-color) !important;
    font-weight: 400 !important;
}
.t-backButton svg {
    fill: var(--text-color) !important;
}
.t-backButton:hover {
    color: var(--white-color) !important;
}
.t-backButton:hover svg {
    fill: var(--white-color) !important;
}

[class*="termly-styles-modal"] > [class*="termly-styles-root"], [class^="termly-styles-buttons"] {
    background: transparent !important;
}

.t-consentPrompt:hover {
    border-color: var(--hovered-border-color) !important;
    box-shadow: inset -40px -40px 50px -25px rgba(51, 50, 50, 0.5) !important;
}
.t-consentPrompt::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    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;
}
.t-consentPrompt:hover::before {
    top: 0px;
    width: 100%;
}

[class^="termly-styles-message"] {
    font-family: 'Inter' !important;
    color: var(--text-color) !important;
}

[class*="termly-styles-modal"]:has(section[aria-label="Policy"]) .t-backButton,
.t-declineAllButton,
.t-allowAllButton,
.t-discardButton,
.t-saveButton,
.t-consentPrompt button {
    background: var(--darker-color) !important;
    padding: 12px 25px !important;
    height: auto !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    color: var(--white-color) !important;
    font-weight: 500 !important;
    transition: border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

[class*="termly-styles-modal"]:has(section[aria-label="Policy"]) .t-backButton:hover,
.t-declineAllButton:hover,
.t-allowAllButton:hover,
.t-discardButton:hover,
.t-saveButton:hover,
.t-consentPrompt button:hover {
    background: var(--white-color) !important;
    border-color: var(--white-color) !important;
    color: var(--black-color) !important;
}


[class*="termly-styles-module-checkbox"] {
    background-color: var(--darker-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    color: var(--white-color) !important;
    transition: border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out !important;
}
[class*="termly-styles-module-checkbox"]:hover {
    border: 1px solid var(--hovered-border-color) !important;
}

[class*="termly-styles-module-checked"] {
    background-color: var(--white-color) !important;
    filter: saturate(0);
}

[class*="termly-styles-container"] table {
    border-color: var(--border-color) !important;
}
[class*="termly-styles-container"] table th {
    background: var(--black-color) !important;
    color: var(--white-color) !important;
    font-family: var(--primary-font) !important;
}
[class*="termly-styles-container"] table td {
    background-color: var(--darker-color) !important;
    color: var(--text-color) !important;
    font-family: var(--primary-font) !important;
}
.termly-styles-root-be220e {
    padding: 15px 0 0 0 !important;
}
.termly-styles-header-b4d848 {
    color: var(--white-color);
    font-family: var(--primary-font);
    letter-spacing: -0.5px;
    padding-top: 30px;
}
.termly-styles-description-e5da53 {
    color: var(--text-color);
}

[name="termly-embed"] {
    position: relative !important;
    display: block !important;
}

[name="termly-embed"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: var(--black-color);
    z-index: 10;
    pointer-events: none;
}
[class*="termly-styles-modal"]:has(section[aria-label="Policy"]) {
    padding: 0 0 30px 0 !important;
}


/* === END TERMLY POPUP AND CONTENT === */


/* === 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 === */


/* ================================================= */
/* =============== CWS SYSTEM STYLES =============== */
/* ================================================= */
:root {
    --sidebar-link-bg: rgba(255, 255, 255, 0);
    --sidebar-link-hover-bg: linear-gradient(to right, #0B0B0B 0%, #0f0f0f 82%, #131313 100%);
    --sidebar-link-hover-border: #1e1e1e;
    --sidebar-link-shadow: inset 5px 5px 4px 0px rgba(69, 69, 69, 0), inset -5px -5px 10px 0px rgba(0, 0, 0, 0);
    --sidebar-link-hover-shadow: inset 5px 5px 4px 0px rgba(69, 69, 69, 0.10), inset -5px -5px 10px 0px rgba(0, 0, 0, 0.44);
    --sidebar-link-hover-border: var(--hovered-border-color);

    --cws-system-button-bg: rgba(255, 255, 255, 0);
    --cws-system-button-hover-bg: linear-gradient(to right, #0B0B0B 0%, #0f0f0f 82%, #131313 100%);
    --cws-system-button-hover-border: #1e1e1e;
    --cws-system-button-shadow: inset 5px 5px 4px 0px rgba(69, 69, 69, 0), inset -5px -5px 10px 0px rgba(0, 0, 0, 0);
    --cws-system-button-hover-shadow: inset 5px 5px 4px 0px rgba(69, 69, 69, 0.10), inset -5px -5px 10px 0px rgba(0, 0, 0, 0.44);
    --cws-system-button-hover-border: var(--hovered-border-color);
    
    --banner-height: 0px;
}

/* === CWS SYSTEM GLOBAL STYLES === */
svg.icon {
    stroke-width: 1.2px !important;
}

.icon-hosting { stroke: var(--blue-color); }
.icon-performance { stroke: var(--green-color); }
.icon-seo { stroke: var(--pink-color); }
.icon-transactional-email { stroke: var(--orange-color); }
.icon-business-email { stroke: var(--purple-color); }    
.icon-maintenance { stroke: var(--purple-color); }
.icon-zoho { stroke: var(--red-color); }
.icon-general { stroke: var(--text-color); }
/* === END CWS SYSTEM GLOBAL STYLES === */

/* === START NOTIFICATION BANNER === */
.notification-banner {
    max-height: 42px;
    background-color: var(--dark-yellow-gradient);
    border-color: var(--border-color);
}
body:has(.notification-banner) {
    --banner-height: 42px;
}
.main-layout {
    height: calc(100vh - var(--banner-height));
    transition: height 0.4s ease;
}
/* === END NOTIFICATION BANNER === */


/* === SYSTEM ACTIONS STYLES === */
.system-text-link {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}
.system-text-link:hover {
    opacity: 1;
}
/* === END SYSTEM ACTIONS STYLES === */


/* === START SIDEBAR === */
.main-sidebar, .logo-wrapper, .sidebar-bottom-nav {
    border-color: var(--border-color);
}

.sidebar-nav-link-item {
    box-shadow: var(--sidebar-link-shadow);
    opacity: 0.5;
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
    border-radius: 10px;
}

.sidebar-nav-link-item:hover,
.sidebar-nav-link-item.active {
    background: var(--sidebar-link-hover-bg);
    border-color: var(--sidebar-link-hover-border);
    box-shadow: var(--sidebar-link-hover-shadow);
    opacity: 1;
}

.main-sidebar {
    width: 240px;
    transition: width 0.2s ease-in-out;
    overflow: hidden;
}

/* COLLAPSED SIDEBAR */
.main-sidebar.is-collapsed {
    width: 60px;
}

.main-sidebar.is-collapsed :where(.sidebar-logo-wrapper, .sidebar-nav) {
    justify-content: center;
    padding: 15px 10px;
}

.main-sidebar.is-collapsed .sidebar-bottom-nav {
    padding: 10px;
}

:where(.nav-text, .logo-content) p {
    white-space: nowrap !important;
}

.main-sidebar.is-collapsed :where(.nav-text, .logo-content) {
    display: none;
}

.main-sidebar.is-collapsed .text-gradient,
.main-sidebar.is-collapsed .services-card-content,
.main-sidebar.is-collapsed .sidebar-logo-wrapper img ~ div {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.15s ease-in-out, width 0.2s ease-in-out;
}
.main-sidebar.is-collapsed .nav-icon {
    margin: 0 auto;
}
.main-sidebar.is-collapsed .sidebar-nav-link-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.main-sidebar.is-collapsed .has-multi-sidebar > img:last-child {
    display: none;
}
.main-layout {
    transition: grid-template-columns 0.2s ease-in-out;
}
.main-sidebar.is-collapsed ~ .main-header .collapse-button img,
.collapse-button img {
    transition: transform 0.2s ease-in-out;
}
.main-sidebar.is-collapsed ~ .main-header .collapse-button img {
    transform: rotate(180deg);
}
.ad-holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--border-color);
    opacity: 1;
    transition: opacity 0.15s ease-in-out 0s;
    border-radius: 10px;
}
.main-sidebar.is-collapsed .ad-holder {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out 0s;
}
.ad-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -0.5px;
    color: var(--white-color);
    font-family: var(--primary-font);
}
.ad-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ad-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ad-body {
    font-family: var(--primary-font);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}
.ad-cta {
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--white-color);
}
/* === END SIDEBAR === */


/* === MAIN HEADER === */
.collapse-button {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}
.collapse-button:hover {
    opacity: 1;
}
.icon-button {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    border-color: var(--border-color);
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.icon-button:hover {
    background: var(--cws-system-button-hover-bg);
    border-color: var(--cws-system-button-hover-border);
    box-shadow: var(--cws-system-button-hover-shadow);
    border-color: var(--cws-system-button-hover-border);
    opacity: 1;
}
.icon-button img, 
.avatar div {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}
.icon-button:hover img,
.avatar div:hover {
    opacity: 1;
}
.avatar {
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    border-color: var(--border-color);
}
/* === END MAIN HEADER === */

/* === MAIN LAYOUT === */
body:has(.notification-banner) .main-wrapper {
    height: calc(100vh - 102px);
}
.main-panel::-webkit-scrollbar,
.side-panel::-webkit-scrollbar {
    width: 2px;
}
.main-panel::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track {
    background: transparent;
}

.main-panel::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 999px;
}

.main-panel::-webkit-scrollbar-thumb:hover, 
.side-panel::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}
/* === END MAIN LAYOUT === */

/* === CUSTOMIZER DROPDOWN === */
.dashboard-customizer {
    position: relative;
    z-index: 10;
}
.customizer-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #111111;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
}

.customizer-dropdown.is-open { display: flex; }

.customizer-dropdown-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px 15px;
}
.customizer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--border-color);
}
.customizer-row:last-child {
    border-bottom: 0px solid var(--border-color);
}
.customizer-row:hover { background: rgba(255,255,255,0.05); }
.customizer-row.is-locked { cursor: default; }

.customizer-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
}
.customizer-upgrade svg {
    width: 16px;
}
.customizer-row.is-locked .customizer-name {
    color: rgba(255,255,255,0.4);
}

.customizer-row.is-active {
    background: var(--dark-silver-gradient);
    border-color: var(--active-border-color);
}
.customizer-row.is-active .customizer-name {
    color: var(--white-color);
}
.customizer-row.is-active[data-key="performance"] :where(.customizer-name, .customizer-eye) {
    color: var(--green-color);
}
.customizer-row.is-active[data-key="maintenance"] :where(.customizer-name, .customizer-eye) {
    color: var(--red-color);
}
.customizer-row.is-active[data-key="hosting"] :where(.customizer-name, .customizer-eye) {
    color: var(--blue-color);
}
.customizer-row.is-active[data-key="zoho"] :where(.customizer-name, .customizer-eye) {
    color: var(--cyan-color);
}
.customizer-row.is-active[data-key="business-email"] :where(.customizer-name, .customizer-eye) {
    color: var(--purple-color);
}
.customizer-row.is-active[data-key="transactional-email"] :where(.customizer-name, .customizer-eye) {
    color: var(--orange-color);
}
.customizer-row.is-active[data-key="seo"] :where(.customizer-name, .customizer-eye) {
    color: var(--pink-color);
}

.customizer-row:not(.is-active):not(.is-locked) :where(.customizer-name, .customizer-eye) {
    color: var(--text-color);
}

.customizer-upgrade {
    font-size: 10px;
    font-weight: 600;
    color: var(--white-color);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 2px;
}

.customizer-row.is-active[data-key="performance"] {
    background: var(--dark-green-gradient);
}
.customizer-row.is-active[data-key="maintenance"] {
    background: var(--dark-red-gradient);
}
.customizer-row.is-active[data-key="hosting"] {
    background: var(--dark-blue-gradient);
}
.customizer-row.is-active[data-key="zoho"] {
    background: var(--dark-cyan-gradient);
}
.customizer-row.is-active[data-key="business-email"] {
    background: var(--dark-purple-gradient);
}
.customizer-row.is-active[data-key="transactional-email"] {
    background: var(--dark-orange-gradient);
}
.customizer-row.is-active[data-key="seo"] {
    background: var(--dark-pink-gradient);
}

.customizer-row.is-active[data-key="performance"] {
    background: var(--dark-green-gradient);
}
.customizer-row.is-active[data-key="maintenance"] {
    background: var(--dark-red-gradient);
}
.customizer-row.is-active[data-key="hosting"] {
    background: var(--dark-blue-gradient);
}
.customizer-row.is-active[data-key="zoho"] {
    background: var(--dark-cyan-gradient);
}
.customizer-row.is-active[data-key="business-email"] {
    background: var(--dark-purple-gradient);
}
.customizer-row.is-active[data-key="transactional-email"] {
    background: var(--dark-orange-gradient);
}
.customizer-row.is-active[data-key="seo"] {
    background: var(--dark-pink-gradient);
}

.customizer-row.is-locked .customizer-upgrade {
    color: rgba(255,255,255,0.4);
}

.customizer-row.is-locked[data-key="performance"] .customizer-upgrade:hover {
    color: var(--green-color);
}
.customizer-row.is-locked[data-key="maintenance"] .customizer-upgrade:hover {
    color: var(--red-color);
}
.customizer-row.is-locked[data-key="hosting"] .customizer-upgrade:hover {
    color: var(--blue-color);
}
.customizer-row.is-locked[data-key="zoho"] .customizer-upgrade:hover {
    color: var(--cyan-color);
}
.customizer-row.is-locked[data-key="business-email"] .customizer-upgrade:hover {
    color: var(--purple-color);
}
.customizer-row.is-locked[data-key="transactional-email"] .customizer-upgrade:hover {
    color: var(--orange-color);
}
.customizer-row.is-locked[data-key="seo"] .customizer-upgrade:hover {
    color: var(--pink-color);
}

.customizer-eye {
    font-size: 12px;
    transition: color 0.15s;
    flex-shrink: 0;
    width: 16px;
}

/* ── LOCKED CARD STATE ── */
.is-locked-card {
    opacity: 0.38;
    pointer-events: none;
}
.card-upgrade-overlay {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #ffbb77;
    background: rgba(255,187,119,0.12);
    border: 1px solid rgba(255,187,119,0.3);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    pointer-events: all;
    text-decoration: none !important;
}
/* === END CUSTOMIZER DROPDOWN === */


/* === OVERVIEW CARDS === */
.system-card-header, .system-card-data {
    z-index: 2;
}
.system-card-overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgb(0 0 0) 50%, rgb(6 6 6 / 50%) 100%);
    z-index: 1;
}
.website-selector-wrapper {
    position: relative;
    overflow: visible !important;
    z-index: 2;
}
.website-selector-logo {
    width: 21px;
    height: 21px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}
.dashboard-stats .heading-wrapper {
    overflow: visible !important;
}
.selector-group {
    padding: 8px;
}
.ws-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
}
.ws-trigger-label {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
    letter-spacing: -0.5px;
}
.ws-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    z-index: 100;
    background: #111111;
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    width: calc(100% + 2px);
    border-top: 0;
}
.ws-dropdown.is-open {
    display: block;
}
.ws-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}
.ws-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ws-option.is-active {
    background: rgba(255, 255, 255, 0.05);
}
.ws-option span {
    color: var(--text-color);
}
.ws-option.is-active span {
    color: var(--white-color);
}
.ws-option-logo {
    width: 21px;
    height: 21px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

.website-selector-wrapper {
    transition: border-radius 0s ease-in-out, border-color 0s ease-in-out;
}

.website-selector-wrapper:has(.ws-dropdown.is-open) {
    border-radius: 20px 20px 0 0;
    border-bottom-color: transparent;
}

.overview-cards .card {
    border-radius: 20px;
}
/* === END OVERVIEW CARDS === */

/* === SUPPORT TICKETS === */
.support-ticket-row-list-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    background-color: var(--dark-silver-gradient);
    border-radius: 15px;
}
.support-ticket-row[data-service="performance"]:hover {
    border-color: var(--green-border-color);
    background: var(--dark-green-gradient);
}
.support-ticket-row[data-service="maintenance"]:hover {
    border-color: var(--purple-border-color);
    background: var(--dark-purple-gradient);
}
.support-ticket-row[data-service="hosting"]:hover {
    border-color: var(--blue-border-color);
    background: var(--dark-blue-gradient);
}
.support-ticket-row[data-service="zoho"]:hover {
    border-color: var(--red-border-color);
    background: var(--dark-red-gradient);
}
.support-ticket-row[data-service="business-email"]:hover {
    border-color: var(--purple-border-color);
    background: var(--dark-purple-gradient);
}
.support-ticket-row[data-service="transactional-email"]:hover {
    border-color: var(--orange-border-color);
    background: var(--dark-orange-gradient);
}
.support-ticket-row[data-service="seo"]:hover {
    border-color: var(--pink-border-color);
    background: var(--dark-pink-gradient);
}
.support-ticket-row[data-service="general"]:hover {
    border-color: var(--white-border-color);
    background: var(--dark-silver-gradient);
}

.support-ticket-row:hover {
    border-color: var(--hovered-border-color);
    background: var(--dark-ash-gradient);
}

.support-ticket-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.support-ticket-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-ticket-icon.service-performance { background: var(--green-shadow); }
.support-ticket-icon.service-maintenance { background: var(--red-shadow); }
.support-ticket-icon.service-hosting { background: var(--blue-shadow); }
.support-ticket-icon.service-seo { background: var(--pink-shadow); }
.support-ticket-icon.service-transactional-email { background: var(--orange-shadow); }
.support-ticket-icon.service-business-email { background: var(--purple-shadow); }
.support-ticket-icon.service-zoho { background: var(--red-shadow); }
.support-ticket-icon.service-general { background: var(--border-color-soft); }

.support-ticket-icon-svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    fill: none;
}

.support-ticket-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.support-ticket-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
}

.support-ticket-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-ticket-time {
    font-size: 12px;
    color: var(--text-color);
}

.support-ticket-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-color);
    flex-shrink: 0;
}

.support-ticket-status {
    font-size: 12px;
    font-weight: 500;
}

.support-ticket-status.service-hosting { color: var(--blue-color); }
.support-ticket-status.service-performance { color: var(--green-color); }
.support-ticket-status.service-seo { color: var(--pink-color); }
.support-ticket-status.service-transactional-email { color: var(--orange-color); }
.support-ticket-status.service-business-email { color: var(--purple-color); }
.support-ticket-status.service-maintenance { color: var(--red-color); }
.support-ticket-status.service-zoho { color: var(--red-color); }
.support-ticket-status.service-general { color: var(--text-color); }

.support-ticket-action {
    flex-shrink: 0;
}

.support-ticket-row.is-closed {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.support-ticket-check-wrapper .support-ticket-icon-svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-color);
}

.support-ticket-chevron-svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-color);
    stroke-width: 2;
    opacity: 0.4;
}
/* === END SUPPORT TICKETS === */


/* === TIPS - AD CONTAINER === */
.tips-ad-container {
    position: relative;
    border-color: var(--border-color-soft);
    background: var(--dark-orange-gradient);
    border-radius: 20px;
}

.tip-ad-icon svg {
    color: var(--orange-color);
    display: block;
}

.tip-ad-button {
    background: var(--darker-color);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.tip-ad-button div {
    color: var(--white-color);
    transition: color 0.2s ease-in-out;
}
.tip-ad-button:hover {
    background: var(--white-color);
    border: 1px solid var(--white-color);
}
.tip-ad-button:hover div {
    color: var(--black-color);
}

/* === END TIPS - AD CONTAINER === */

/* === SPEED SCORE GRAPH === */
.speed-score-graph {
    background: #0d0d0d;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.switched-day {
    color: #fff;
}

.day-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    background: #111111;
    border: 1px solid var(--border-color-soft);
    border-radius: 100px;
    padding: 3px;
    width: fit-content;
}

.day-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    border-radius: 100px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    width: auto;
    flex: none;
}

.day-btn.active {
    background: #2a2a2a;
    color: #fff;
}

.day-btn:hover:not(.active) {
    color: #e5e7eb;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
}
/* === END SPEED SCORE GRAPH === */


/* === RECENT ACTIVITY FEED === */
.ra-item-wrapper, .ra-status-wrapper, .ra-details-group {
    display: flex;
}
.ra-item-wrapper {
    align-items: center;
    gap: 10px;
}
.ra-heading {
    color: var(--white-color);
    font-size: 14px;
    font-family: 'Inter';
    letter-spacing: -0.5px;
}
.ra-status-wrapper {
    align-items: center;
    gap: 4px;
}

.ra-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
}
.ra-icon {
    background: var(--dark-silver-gradient);
    padding: 8px;
    border-radius: 100px;
    border: 1px solid Var(--border-color-soft);
}
.ra-item-wrapper[data-service="performance"] .ra-icon {
    background: var(--dark-green-gradient);
    border-color: var(--green-subtle-border-color);
}
.ra-item-wrapper[data-service="maintenance"] .ra-icon {
    background: var(--dark-red-gradient);
    border-color: var(--red-subtle-border-color);
}
.ra-item-wrapper[data-service="hosting"] .ra-icon {
    background: var(--dark-blue-gradient);
    border-color: var(--blue-subtle-border-color);
}
.ra-item-wrapper[data-service="zoho"] .ra-icon {
    background: var(--dark-cyan-gradient);
    border-color: var(--cyan-subtle-border-color);
}
.ra-item-wrapper[data-service="business-email"] .ra-icon {
    background: var(--dark-purple-gradient);
    border-color: var(--purple-subtle-border-color);
}
.ra-item-wrapper[data-service="transactional-email"] .ra-icon {
    background: var(--dark-orange-gradient);
    border-color: var(--orange-subtle-border-color);
}
.ra-item-wrapper[data-service="seo"] .ra-icon {
    background: var(--dark-pink-gradient);
    border-color: var(--pink-subtle-border-color);
}
.ra-icon::before, .ra-icon::after {
    content: '';
    position: absolute;
    width: 1px;
    height: calc(50% - 21px);
    background: var(--border-color);
    left: 50%;
    transform: translateX(-50%);
}
.ra-icon::before {
    top: 0;
}
.ra-item-wrapper:first-child .ra-icon::before {
    display: none;
}
.ra-icon::after {
    bottom: 0;
}
.ra-item-wrapper:last-child .ra-icon::after {
    display: none;
}


.ra-item-wrapper:first-child .ra-details-group {
    margin-top: -10px;
}
.ra-details-group {
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
}
.ra-item-wrapper:last-child .ra-details-group {
    margin-bottom: -10px;
}
.ra-details-group {
    flex-direction: column;
    gap: 5px;
}

.ra-capsule-tag {
    font-family: var(--primary-font);
    font-size: 12px;
    color: var(--white-color);
    padding: 3px 9px;
    background: var(--dark-color);
    border-radius: 100px;
}
.ra-item-wrapper[data-service="performance"] .ra-capsule-tag {
    color: var(--green-color);
    background: var(--green-shadow);
}
.ra-item-wrapper[data-service="maintenance"] .ra-capsule-tag {
    color: var(--red-color);
    background: var(--red-shadow);
}
.ra-item-wrapper[data-service="hosting"] .ra-capsule-tag {
    color: var(--blue-color);
    background: var(--blue-shadow);
}
.ra-item-wrapper[data-service="zoho"] .ra-capsule-tag {
    color: var(--cyan-color);
    background: var(--cyan-shadow);
}
.ra-item-wrapper[data-service="business-email"] .ra-capsule-tag {
    color: var(--purple-color);
    background: var(--purple-shadow);
}
.ra-item-wrapper[data-service="transactional-email"] .ra-capsule-tag {
    color: var(--orange-color);
    background: var(--orange-shadow);
}
.ra-item-wrapper[data-service="seo"] .ra-capsule-tag {
    color: var(--pink-color);
    background: var(--pink-shadow);
}

.ra-timeago {
    font-size: 12px;
    color: var(--text-color);
    letter-spacing: -0.5px;
}
/* === END RECENT ACTIVITY FEED === */

/* === SYSTEM REUSABLE DROPDOWN MENU === */
.dm-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-family: var(--primary-font);
}

.dm-panel.is-visible {
    display: block;
}

.dm-panel.is-open {
    opacity: 1;
    transform: translateY(0);
}

.dm-panel[data-align="left"] {
    right: auto;
    left: 0;
}

.dm-panel[data-align="center"] {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
}

.dm-panel[data-align="center"].is-open {
    transform: translateX(-50%) translateY(0);
}

.dm-panel[data-width="sm"] { min-width: 160px; }
.dm-panel[data-width="md"] { min-width: 256px; }
.dm-panel[data-width="lg"] { min-width: 320px; }

[aria-haspopup="menu"][data-state="open"] { opacity: 0.8; }

.dm-sep {
    height: 1px;
    background: var(--border-color);
    margin: 3px -4px;
}

.dm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.1s ease, color 0.1s ease;
    font-family: var(--primary-font);
}

.dm-item:hover { background: #ffffff0d; color: var(--white-color); }

.dm-item-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.1s ease;
}

.dm-item-icon:empty          { display: none; }
.dm-item:hover .dm-item-icon { color: #999; }

.dm-icon-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-item-label { flex: 1; }

.dm-item.is-danger               { color: var(--red-color); }
.dm-item.is-danger:hover         { background: var(--red-shadow); }
.dm-item.is-danger .dm-item-icon { color: var(--red-color); }

.dm-item.is-primary               { color: var(--white-color); }
.dm-item.is-primary:hover         { background: #ffffff; color: #000000; }
.dm-item.is-primary .dm-item-icon { color: var(--white-color); }
.dm-item.is-primary:hover .dm-item-icon { color: #000000; }

/* User */
.dm-user-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
}

.dm-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--white-color);
    overflow: hidden;
    font-family: var(--primary-font);
}

.dm-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dm-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.dm-user-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--white-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--primary-font);
}

.dm-user-email {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--primary-font);
}

/* Notification */
.dm-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 6px;
}

.dm-notif-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--white-color);
    font-family: var(--primary-font);
}

.dm-notif-mark-read {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    cursor: pointer;
    transition: color 0.1s;
}

.dm-notif-mark-read:hover { color: #999; }

.dm-notif-check-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}

.dm-notif-item:hover { background: #ffffff0d; }

.dm-notif-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.dm-notif-icon-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-notif-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.dm-notif-text {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.4;
    font-family: var(--primary-font);
}

.dm-notif-item.is-unread .dm-notif-text {
    color: var(--white-color);
}

.dm-notif-time {
    font-size: 11px;
    color: #555;
    font-family: var(--primary-font);
}

.dm-notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    background: transparent;
}

.dm-notif-dot.is-unread { background: var(--red-color); }

.dm-notif-footer {
    display: block;
    text-align: center;
    padding: 7px 8px;
    font-size: 11px;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
    font-family: var(--primary-font);
}

.dm-notif-footer:hover {
    background: #ffffff0d;
    color: var(--white-color);
}
/* === END SYSTEM REUSABLE DROPDOWN MENU === */