/* Theme Name: Thrico Theme 
 * URI: https://pulseplaydigital.com 
 * Author: PulsePlay Digital 
 * Description: Lightweight custom WordPress theme. 
 * Version: 1.0 Text Domain: thrico */

body {
  margin: 0;
  padding: 0;
}

.site-header {
  background: #133063;
  color: #fff;
  padding: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-weight:800;
	    padding: 8px 0;
}
h3.thrico-col-header.thrico-download {
    padding-top: 30px;
}
/* Headings */
h1 {
    font-size: 60px;
    line-height: 1.2;
}

h2 {
    font-size: 48px;
    line-height: 1.25;
}

/* Paragraph */
p {
    font-size: 18px;
    line-height: 1.7;
}

/* Button */
.btn,
button,
input[type="submit"],
.wp-element-button {
    font-size: 18px;
    padding: 8px 24px; /* 8px top-bottom */
    line-height: 1.4;
    font-weight: 600;
}
.privacy-policy-text h2 {
    text-transform: uppercase;
}
a {
    color: #1E7AE5;
}
a:hover{
				opacity:1 !important;

}
figure.wp-block-image.is-resized img {
    border-radius: 20px;
    object-fit: cover;
    width: 100% !important;
}
.site-footer {
  background: #f5f5f5;
  padding: 20px;
  text-align: center;
}
h2.main-heading-white {
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 0 !important;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    -webkit-padding-after: 0.1em;
    padding-block-end: 0.1em;
    background-image: linear-gradient(98deg, #ffffff 39.06%, #8F8F8F 62.81%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ---------------------------------------------------- */
/* Built for Security, Scale & Compliance (Compact CSS) */
/* ---------------------------------------------------- */

.security-compliance-section {
    background-color: #070709;
    color: #ffffff;
    padding: 100px 24px 120px 24px;
    position: relative;
    z-index: 20;
    font-family: var(--font-main, 'Plus Jakarta Sans', sans-serif);
}

.security-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.security-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 55px auto;
}

.security-title {
    font-size: 2.85rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 16px;
}

.security-subtitle {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.65;
    font-weight: 400;
    margin: 0 auto;
    max-width: 620px;
}

/* 6-Card Grid (3 columns x 2 rows) */
.security-card-grid {
    background: rgba(13, 14, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.security-card {
    padding: 32px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    background: #000;
    transition: all 0.25s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.security-card:nth-child(3n) {
    border-right: none;
}

.security-card:nth-child(4),
.security-card:nth-child(5),
.security-card:nth-child(6) {
    border-bottom: none;
}

/* Card hover glow */

.security-card-heading {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 20px;
    color: #ffffff;
    margin-bottom: 6px;
}

.security-card-desc {
    font-size: 14px;
    line-height: 24px;
    color: #B4B4B4;
    margin-bottom: 20px;
}

.security-graphic-box {
    position: relative;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Pause animations by default; run on card hover */
.security-card * {
    animation-play-state: paused !important;
}

.security-card:hover * {
    animation-play-state: running !important;
}
 .care-console-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem 1rem;
        }
        .care-console-title {
            font-size: 1.75rem;
            font-weight: bold;
            line-height: 1.2;
            margin: 0;
        }
        @media (min-width: 768px) {
            .care-console-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 2.5rem 2rem;
            }
            .care-console-title {
                font-size: 2.5rem;
            }
        }
/* ==================================================== */
/* 1. IDENTITY & ACCESS (Strict 1-At-A-Time Highlight)  */
/* ==================================================== */
.sso-list-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: rgba(18, 20, 29, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sso-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    background: transparent;
}

.sso-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sso-icon {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.sso-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: #cbd5e1;
}

.sso-check {
    font-size: 0.8rem;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Default static state: only Microsoft SSO is active */
.sso-item.active-sso-item {
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%);
    border: 1px solid rgba(253, 85, 49, 0.6);
}

.sso-item.active-sso-item .sso-check {
    opacity: 1;
}

/* When mouse enters the container/card, remove default active style so sequence runs cleanly */
.security-card.card-identity:hover .sso-item.active-sso-item {
    background: transparent;
    border-color: transparent;
}

.security-card.card-identity:hover .sso-item.active-sso-item .sso-check {
    opacity: 0;
}

/* Card hover animation sequence: EXACTLY ONE ITEM HIGHLIGHTED AT A TIME */
.security-card.card-identity:hover .sso-item:nth-child(1) {
    animation: sso1Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(2) {
    animation: sso2Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(3) {
    animation: sso3Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(4) {
    animation: sso4Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(1) .sso-check {
    animation: check1Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(2) .sso-check {
    animation: check2Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(3) .sso-check {
    animation: check3Step 3.2s infinite linear;
}

.security-card.card-identity:hover .sso-item:nth-child(4) .sso-check {
    animation: check4Step 3.2s infinite linear;
}

@keyframes sso1Step {

    0%,
    24% {
        background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%);
        border: 1px solid rgba(253, 85, 49, 0.6);
    }

    25%,
    100% {
        background: transparent;
        border: 1px solid transparent;
    }
}

@keyframes sso2Step {

    0%,
    24.9% {
        background: transparent;
        border: 1px solid transparent;
    }

    25%,
    49% {
        background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%);
        border: 1px solid rgba(253, 85, 49, 0.6);
    }

    50%,
    100% {
        background: transparent;
        border: 1px solid transparent;
    }
}

@keyframes sso3Step {

    0%,
    49.9% {
        background: transparent;
        border: 1px solid transparent;
    }

    50%,
    74% {
        background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%);
        border: 1px solid rgba(253, 85, 49, 0.6);
    }

    75%,
    100% {
        background: transparent;
        border: 1px solid transparent;
    }
}

@keyframes sso4Step {

    0%,
    74.9% {
        background: transparent;
        border: 1px solid transparent;
    }

    75%,
    99% {
        background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%);
        border: 1px solid rgba(253, 85, 49, 0.6);
    }

    100% {
        background: transparent;
        border: 1px solid transparent;
    }
}

@keyframes check1Step {

    0%,
    24% {
        opacity: 1;
    }

    25%,
    100% {
        opacity: 0;
    }
}

@keyframes check2Step {

    0%,
    24.9% {
        opacity: 0;
    }

    25%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes check3Step {

    0%,
    49.9% {
        opacity: 0;
    }

    50%,
    74% {
        opacity: 1;
    }

    75%,
    100% {
        opacity: 0;
    }
}

@keyframes check4Step {

    0%,
    74.9% {
        opacity: 0;
    }

    75%,
    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* When mouse directly hovers over a specific list item, override sequence & highlight ONLY THAT ITEM */
.sso-list-container:hover .sso-item {
    animation: none !important;
    background: transparent !important;
    border-color: transparent !important;
}

.sso-list-container:hover .sso-item .sso-check {
    animation: none !important;
    opacity: 0 !important;
}

.sso-list-container .sso-item:hover {
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.15) -8.35%, rgba(253, 85, 49, 0.6) 103.3%) !important;
    border: 1px solid rgba(253, 85, 49, 0.6) !important;
}

.sso-list-container .sso-item:hover .sso-check {
    opacity: 1 !important;
}

.sso-list-container .sso-item:hover .sso-name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ==================================================== */
/* 2. SECURITY (Orange Starburst & Shield Rays)          */
/* ==================================================== */
.shield-waves-svg {

    pointer-events: none;
}

.shield-waves-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 25px;
    left: 0;
    z-index: 1;
}

.sec-line {
    opacity: 0;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-dasharray: 8 8;
    pointer-events: none;
    transition: opacity 0.4s ease, stroke 0.4s ease;
}

/* On card hover: reveal lines & run dashed flow animation toward center */
.security-card.card-security:hover .sec-line {
    opacity: 0.85;
    stroke: rgba(8, 102, 255, 0.7);
    animation: secLineDashFlow 1.2s linear infinite;
}

.security-card.card-security:hover .sec-line[class*="sec-r"] {
    animation: secLineDashFlowReverse 1.2s linear infinite;
}

@keyframes secLineDashFlow {
    0% {
        stroke-dashoffset: 32;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes secLineDashFlowReverse {
    0% {
        stroke-dashoffset: -32;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* Outer circular icon badges - hidden initially (Normal state), revealed on hover */
.sec-badge {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #111319;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 0.82rem;
    z-index: 4;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.badge-top-left {
    top: 95px;
    left: 75px;
}

.badge-bottom-left {
    top: 161px;
    left: 50px;
}

.badge-top-right {
    top: 67px;
    right: 50px;
}

.badge-bottom-right {
    top: 130px;
    right: 50px;
}

.security-card.card-security:hover .sec-badge {
    opacity: 1;
    transform: scale(1);
    border-color: #FD5531;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(253, 85, 49, 0.7), inset 0 0 8px rgba(253, 85, 49, 0.4);
}

/* Center bracket frame & starburst hub - visible initially in Normal state */
.sec-center-hub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    height: 100%;
    margin: 0 auto;
    z-index: 3;
}

.sec-center-hub svg {
    max-width: 100%;
    height: auto;
}

/* 4 corner brackets around center frame */
.sec-corner {
    position: absolute;
    width: 14px;
    height: 14px;
}

.corner-tl {
    top: -2px;
    left: -2px;
    border-top: 2px solid #FD5531;
    border-left: 2px solid #FD5531;
}

.corner-tr {
    top: -2px;
    right: -2px;
    border-top: 2px solid #FD5531;
    border-right: 2px solid #FD5531;
}

.corner-bl {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid #0866FF;
    border-left: 2px solid #0866FF;
}

.corner-br {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid #0866FF;
    border-right: 2px solid #0866FF;
}

.sec-starburst {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
    position: absolute;
    z-index: 3333;
    top: 22px;
    left: 0px;
    right: 0px;
    width: 100%;
    bottom: 0px;
    height: 100%;
    pointer-events: none;
}

.security-card.card-security:hover .sec-starburst {
    animation: starburstRotateFast 4s linear infinite;
}

@keyframes starburstRotateFast {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==================================================== */
/* 3. INFRASTRUCTURE (Stacked Provider Cards)            */
/* ==================================================== */
.infra-stack {
    position: relative;
    width: 260px;
    max-width: 100%;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.infra-card {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 240px;
    max-width: 90%;
    height: 54px;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(18, 20, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.infra-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.infra-icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.infra-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: 0.01em;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #10b981;
    background: transparent;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
    flex-shrink: 0;
}

/* Base stack positions with hardware-accelerated translateY */
.infra-card-4 {
    top: 5px;
    transform: translateY(0px) scale(0.85);
    opacity: 0.45;
    z-index: 1;
}

.infra-card-3 {
    top: 5px;
    transform: translateY(20px) scale(0.90);
    opacity: 0.65;
    z-index: 2;
}

.infra-card-2 {
    top: 5px;
    transform: translateY(40px) scale(0.95);
    opacity: 0.85;
    z-index: 3;
}

.infra-card-1 {
    top: 5px;
    transform: translateY(60px) scale(1);
    opacity: 1;
    z-index: 4;
    background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
    border-color: rgba(253, 85, 49, 0.6);
    box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
}

/* Background blur glow filter matching user specification */
.infra-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(253, 85, 49, 0.57) 43.75%, rgba(8, 102, 255, 0.57) 43.75%);
    filter: blur(29.0566px);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.infra-card-1::before {
    opacity: 0.85;
}

/* Hover position swapping animation - Smooth GPU accelerated hardware transforms */
.security-card.card-infra:hover .infra-card-1 {
    animation: stackSwap1 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.security-card.card-infra:hover .infra-card-2 {
    animation: stackSwap2 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.security-card.card-infra:hover .infra-card-3 {
    animation: stackSwap3 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.security-card.card-infra:hover .infra-card-4 {
    animation: stackSwap4 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes stackSwap1 {

    0%,
    20% {
        transform: translateY(60px) scale(1);
        opacity: 1;
        z-index: 4;
        background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
        border-color: rgba(253, 85, 49, 0.6);
        box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
    }

    25%,
    45% {
        transform: translateY(0px) scale(0.85);
        opacity: 0.45;
        z-index: 1;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    50%,
    70% {
        transform: translateY(20px) scale(0.90);
        opacity: 0.65;
        z-index: 2;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    75%,
    95% {
        transform: translateY(40px) scale(0.95);
        opacity: 0.85;
        z-index: 3;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    100% {
        transform: translateY(60px) scale(1);
        opacity: 1;
        z-index: 4;
        background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
        border-color: rgba(253, 85, 49, 0.6);
        box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
    }
}

@keyframes stackSwap2 {

    0%,
    20% {
        transform: translateY(40px) scale(0.95);
        opacity: 0.85;
        z-index: 3;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    25%,
    45% {
        transform: translateY(60px) scale(1);
        opacity: 1;
        z-index: 4;
        background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
        border-color: rgba(253, 85, 49, 0.6);
        box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
    }

    50%,
    70% {
        transform: translateY(0px) scale(0.85);
        opacity: 0.45;
        z-index: 1;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    75%,
    95% {
        transform: translateY(20px) scale(0.90);
        opacity: 0.65;
        z-index: 2;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    100% {
        transform: translateY(40px) scale(0.95);
        opacity: 0.85;
        z-index: 3;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }
}

@keyframes stackSwap3 {

    0%,
    20% {
        transform: translateY(20px) scale(0.90);
        opacity: 0.65;
        z-index: 2;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    25%,
    45% {
        transform: translateY(40px) scale(0.95);
        opacity: 0.85;
        z-index: 3;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    50%,
    70% {
        transform: translateY(60px) scale(1);
        opacity: 1;
        z-index: 4;
        background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
        border-color: rgba(253, 85, 49, 0.6);
        box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
    }

    75%,
    95% {
        transform: translateY(0px) scale(0.85);
        opacity: 0.45;
        z-index: 1;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    100% {
        transform: translateY(20px) scale(0.90);
        opacity: 0.65;
        z-index: 2;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }
}

@keyframes stackSwap4 {

    0%,
    20% {
        transform: translateY(0px) scale(0.85);
        opacity: 0.45;
        z-index: 1;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    25%,
    45% {
        transform: translateY(20px) scale(0.90);
        opacity: 0.65;
        z-index: 2;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    50%,
    70% {
        transform: translateY(40px) scale(0.95);
        opacity: 0.85;
        z-index: 3;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }

    75%,
    95% {
        transform: translateY(60px) scale(1);
        opacity: 1;
        z-index: 4;
        background: linear-gradient(90deg, rgba(253, 85, 49, 0.4) 0%, rgba(8, 102, 255, 0.4) 100%), rgba(18, 20, 29, 0.95);
        border-color: rgba(253, 85, 49, 0.6);
        box-shadow: 0 10px 30px rgba(253, 85, 49, 0.35), 0 0 20px rgba(8, 102, 255, 0.3);
    }

    100% {
        transform: translateY(0px) scale(0.85);
        opacity: 0.45;
        z-index: 1;
        background: rgba(18, 20, 29, 0.95);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    }
}

/* ==================================================== */
/* 4. ENTERPRISE READY (Mock Browser URL Typing)        */
/* ==================================================== */
.mock-browser-window {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: 160px;
    background: #0d0e12;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.browser-header {
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.browser-dots span:nth-child(1) {
    background: #ff5f56;
}

.browser-dots span:nth-child(2) {
    background: #ffbd2e;
}

.browser-dots span:nth-child(3) {
    background: #27c93f;
}

.browser-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.browser-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.8rem;
}

.url-bar {
    flex: 1;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.url-lock {
    color: #fd5531;
    font-size: 0.72rem;
}

.url-text {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    display: inline-block;
    border-right: 2px solid transparent;
}

.security-card.card-ent-browser:hover .url-bar {
    border-color: rgba(253, 85, 49, 0.5);
}

.security-card.card-ent-browser:hover .url-text {
    animation: urlTypeFast 1.5s steps(15) infinite alternate;
}

@keyframes urlTypeFast {
    0% {
        width: 0;
        border-color: #fd5531;
    }

    50%,
    100% {
        width: 120px;
        border-color: transparent;
        color: #ffffff;
    }
}

/* ==================================================== */
/* 5. DEPLOYMENT OPTIONS (Strict 1-At-A-Time Highlight) */
/* ==================================================== */
.deploy-terminal {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: #090a0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    font-family: 'Fira Code', 'Courier New', monospace;
}

.deploy-top-rim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0866FF 0%, #FD5531 60%, transparent 100%);
    z-index: 10;
}

.deploy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.deploy-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deploy-hdr-icon {
    font-size: 0.78rem;
    color: #94a3b8;
}

.deploy-hdr-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: #f1f5f9;
}

.deploy-hdr-comment {
    font-size: 0.65rem;
    color: #64748b;
    font-style: italic;
}

.deploy-terminal-body {
    height: 112px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.deploy-terminal-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Smooth Auto-Scroll on Card Hover */
.security-card.card-deployment:hover .deploy-terminal-list {
    animation: deployAutoScroll 6s ease-in-out infinite;
}

@keyframes deployAutoScroll {

    0%,
    20% {
        transform: translateY(0);
    }

    25%,
    45% {
        transform: translateY(-56px);
    }

    50%,
    70% {
        transform: translateY(-112px);
    }

    75%,
    95% {
        transform: translateY(-168px);
    }

    100% {
        transform: translateY(0);
    }
}

.deploy-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.25s ease;
    box-sizing: border-box;
    font-size: 0.73rem;
}

.security-card.card-deployment:hover .deploy-row:hover {
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.12) -8.35%, rgba(253, 85, 49, 0.3) 103.3%);
    border-left: 3px solid #FD5531;
}

.deploy-key-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 115px;
    padding-top: 2px;
}

.deploy-key {
    color: #e2e8f0;
    font-weight: 600;
}

.deploy-colon {
    color: #64748b;
    padding-top: 2px;
}

.deploy-val {
    color: #34d399;
    font-size: 0.71rem;
    line-height: 1.35;
    white-space: normal;
}

.deploy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.25s ease;
    white-space: nowrap;
    font-size: 0.76rem;
}

.security-card.card-deployment:hover .deploy-row:hover {
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.12) -8.35%, rgba(253, 85, 49, 0.3) 103.3%);
    border-left: 2px solid #FD5531;
}

.deploy-key-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.deploy-key {
    color: #e2e8f0;
    font-weight: 600;
}

.deploy-colon {
    color: #64748b;
}

.deploy-val {
    color: #34d399;
    font-size: 0.73rem;
}

/* Direct row hover overrides so only 1 row lights up */
.deploy-terminal:hover .deploy-row {
    animation: none !important;
    background: transparent !important;
    border-left-color: transparent !important;
}

.deploy-terminal .deploy-row:hover {
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.1) -8.35%, rgba(253, 85, 49, 0.5) 103.3%) !important;
    border-left-color: #fd5531 !important;
}

/* ==================================================== */
/* 6. 20+ INTEGRATIONS (Dual Marquee Slider on Hover)   */
/* ==================================================== */
.integrations-marquee-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    padding: 6px 0;
    position: relative;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.integ-marquee-row {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.integ-track {
    display: flex;
    gap: 10px;
    white-space: nowrap;
    will-change: transform;
}

.integ-track-right {
    transform: translateX(-50%);
}

/* Dual Marquee Slider triggers on card hover */
.security-card.card-integrations:hover .integ-track-left {
    animation: marqueeLeft 8s linear infinite;
}

.security-card.card-integrations:hover .integ-track-right {
    animation: marqueeRight 8s linear infinite;
}

@keyframes marqueeLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marqueeRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.integ-tile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(18, 20, 29, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.integ-tile:hover {
    transform: scale(1.18) !important;
    background: linear-gradient(292.47deg, rgba(8, 102, 255, 0.2) -8.35%, rgba(253, 85, 49, 0.6) 103.3%) !important;
    border-color: #fd5531 !important;
    box-shadow: 0 0 16px rgba(253, 85, 49, 0.6) !important;
    z-index: 10;
}

/* ==================================================== */
/* COMPREHENSIVE RESPONSIVE STYLES (All Breakpoints)    */
/* ==================================================== */

/* 2-Column Grid for Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .security-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .security-card {
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .security-card:nth-child(2n) {
        border-right: none !important;
    }

    .security-card:nth-child(5),
    .security-card:nth-child(6) {
        border-bottom: none !important;
    }
}

/* 1-Column Grid for Mobile Phones (<= 767px) */
@media (max-width: 767px) {
    .security-compliance-section {
        padding: 50px 16px 60px 16px;
    }

    .security-header {
        margin-bottom: 35px;
    }

    .security-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .security-subtitle {
        font-size: 0.95rem;
    }

    .security-card-grid {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .security-card {
        padding: 24px 18px;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        min-height: 320px;
    }

    .security-card:last-child {
        border-bottom: none !important;
    }

    .security-graphic-box {
        height: 242px;
    }

    .sso-list-container,
    .integrations-marquee-container {
        max-width: 100%;
    }

    .integ-tile {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
}

/* Extra Small Phones (<= 480px) */
@media (max-width: 480px) {
    .security-compliance-section {
        padding: 40px 12px 50px 12px;
    }

    .security-card {
        padding: 20px 14px;
        min-height: 300px;
    }

    .security-card-desc {
        font-size: 0.85rem;
        margin-bottom: 14px;
    }

    .security-graphic-box {
        height: 268px;
    }

    .infra-stack {
        transform: scale(0.9);
        transform-origin: center center;
    }

    .integ-tile {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
}

/* Touch Devices (Smartphones & Tablets): Keep marquee slider & stack animations active automatically */
@media (hover: none) {
    .integ-track-left {
        animation: marqueeLeft 8s linear infinite !important;
    }

    .integ-track-right {
        animation: marqueeRight 8s linear infinite !important;
    }

    .infra-card-1 {
        animation: stackSwap1 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    }

    .infra-card-2 {
        animation: stackSwap2 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    }

    .infra-card-3 {
        animation: stackSwap3 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    }

    .infra-card-4 {
        animation: stackSwap4 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    }
}
/*the-most-modern-section*/
/* ---------------------------------------------------- */
/* Platform Features Section (Dark Theme & Micro-Animations) */
/* ---------------------------------------------------- */
.platform-features-section {
    background-color: #070709;
    color: #ffffff;
    padding: 100px 24px 120px 24px;
    position: relative;
    z-index: 20;
    overflow: hidden;
    font-family: var(--font-main, 'Plus Jakarta Sans', sans-serif);
}

.features-container {
    margin: auto;
    width: 95%;
    max-width: 80rem;
}

.features-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 55px auto;
}

.features-title {
    font-size: 2.85rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 16px;
}

.features-subtitle {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.65;
    font-weight: 400;
    margin: 0 auto;
    max-width: 600px;
}

/* Outer Box Grid containing 4 cards (Equal width) */
.features-card-grid {
    background: rgba(13, 14, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
}

.feature-col {
    padding: 34px 16px 0 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    position: relative;
    background: #000;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.feature-col:last-child {
    border-right: none;
}

.feature-card-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.015em;
    padding: 0 8px;
}

.graphic-display-box {
    position: relative;
    width: 100%;
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ==================================================== */
/* HOVER-ONLY ANIMATION PLAY/PAUSE LOGIC FOR ALL CARDS  */
/* ==================================================== */

.feature-col .running-mascot-wrapper,
.feature-col .mascot-svg,
.feature-col .top-celebration,
.feature-col .achievement-crown,
.feature-col .crown-outline,
.feature-col .celebration-spark,
.feature-col .shield-aura,
.feature-col .laser-scanner,
.feature-col .starburst-spin,
.feature-col .scan-tag,
.feature-col .pulse-path,
.feature-col .hub-pulse-ring,
.feature-col .net-node,
.feature-col .insights-dashboard-card,
.feature-col .spin-icon,
.feature-col .active-chart-area,
.feature-col .active-chart-line,
.feature-col .active-members-widget circle,
.feature-col .chart-dot-pulse,
.feature-col .bar-chart-mini .bar,
.feature-col .circle-val,
.feature-col .live-area-line {
    animation-play-state: paused !important;
}

.feature-col:hover .running-mascot-wrapper,
.feature-col:hover .mascot-svg,
.feature-col:hover .top-celebration,
.feature-col:hover .achievement-crown,
.feature-col:hover .crown-outline,
.feature-col:hover .celebration-spark,
.feature-col:hover .shield-aura,
.feature-col:hover .laser-scanner,
.feature-col:hover .starburst-spin,
.feature-col:hover .scan-tag,
.feature-col:hover .pulse-path,
.feature-col:hover .hub-pulse-ring,
.feature-col:hover .net-node,
.feature-col:hover .insights-dashboard-card,
.feature-col:hover .spin-icon,
.feature-col:hover .active-chart-area,
.feature-col:hover .active-chart-line,
.feature-col:hover .active-members-widget circle,
.feature-col:hover .chart-dot-pulse,
.feature-col:hover .bar-chart-mini .bar,
.feature-col:hover .circle-val,
.feature-col:hover .live-area-line {
    animation-play-state: running !important;
}

/* 1. Gamification Micro-Animations */
.col-gamification .graphic-display-box {
    align-items: flex-end;
    padding-bottom: 10px;
}

.staircase-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
}

.staircase-animation-container {
    position: relative;
    width: 100%;
    height: 180px;
    margin-top: 0;
}

.step-path {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.4));
}

.running-mascot-wrapper {
    position: absolute;
    left: -5px;
    bottom: 33px;
    width: 50px;
    height: 48px;
    z-index: 10;
    opacity: 1;
    pointer-events: none;
    animation: runStaircase 5s linear infinite;
}

.running-mascot-wrapper svg,
.running-mascot-wrapper img {
    width: 100%;
    height: auto;
}

.mascot-svg {
    animation: mascotWiggle 5s ease-in-out infinite;
}

@keyframes mascotWiggle {

    0%,
    54%,
    84%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    5%,
    15%,
    25%,
    35%,
    45% {
        transform: rotate(4deg) translateY(-3px);
    }

    10%,
    20%,
    30%,
    40%,
    50% {
        transform: rotate(-4deg) translateY(0px);
    }
}

/* =========================================
   RUNNING MASCOT
========================================= */

@keyframes runStaircase {
    0% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    4% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    /* First horizontal */
    14% {
        transform: translate(50px, 0px);
    }

    /* First step */
    19% {
        transform: translate(50px, -46px);
    }

    /* Second horizontal */
    29% {
        transform: translate(105px, -46px);
    }

    /* Second step */
    34% {
        transform: translate(105px, -94px);
    }

    /* Third horizontal */
    44% {
        transform: translate(160px, -94px);
    }

    /* Third step */
    49% {
        transform: translate(160px, -139px);
    }

    /* Reach upper line */
    54% {
        transform: translate(200px, -139px);
        opacity: 1;
    }

    /* Pause on top line for winning celebration */
    84% {
        transform: translate(200px, -139px);
        opacity: 1;
    }

    /* Disappear at end */
    88% {
        transform: translate(200px, -139px);
        opacity: 0;
    }

    /* Reset to start invisibly */
    92% {
        transform: translate(0px, 0px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

/* =========================================
   TOP ACHIEVEMENT CELEBRATION
========================================= */

.top-celebration {
    position: absolute;
    left: 175px;
    top: -110px;
    width: 80px;
    height: 70px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    animation: topCelebration 5s linear infinite;
}

/* =========================================
   CROWN
========================================= */

.achievement-crown {
    position: absolute;
    left: 14px;
    top: 15px;
    width: 52px;
    height: 44px;
    filter: drop-shadow(0 0 4px #3b82f6) drop-shadow(0 0 10px rgba(59, 130, 246, 0.8));
    transform: scale(0.4) translateY(8px);
    opacity: 0;
    animation: crownPop 5s linear infinite;
}

.crown-outline {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: crownDraw 5s linear infinite;
}

/* =========================================
   CELEBRATION TIMING
========================================= */

@keyframes topCelebration {

    0%,
    54% {
        opacity: 0;
    }

    /* Person reaches upper line and pauses -> crown appears */
    57% {
        opacity: 1;
    }

    /* Stay visible while person pauses at top */
    83% {
        opacity: 1;
    }

    /* Fade before reset */
    87%,
    100% {
        opacity: 0;
    }
}

/* Crown pops in */
@keyframes crownPop {

    0%,
    54% {
        opacity: 0;
        transform: scale(0.3) translateY(15px);
    }

    59% {
        opacity: 1;
        transform: scale(1.15) translateY(-5px);
    }

    63% {
        transform: scale(0.95) translateY(0);
    }

    67%,
    83% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    87%,
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(15px);
    }
}

/* Crown drawing effect */
@keyframes crownDraw {

    0%,
    54% {
        stroke-dashoffset: 150;
    }

    62%,
    83% {
        stroke-dashoffset: 0;
    }

    88%,
    100% {
        stroke-dashoffset: 150;
    }
}

/* =========================================
   SPARK PARTICLES
========================================= */

.celebration-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 5px #60a5fa, 0 0 10px #3b82f6;
    opacity: 0;
    animation: sparkAnimation 5s linear infinite;
}

.spark-1 {
    left: 12px;
    top: 27px;
}

.spark-2 {
    left: 27px;
    top: 8px;
}

.spark-3 {
    left: 50px;
    top: 12px;
}

.spark-4 {
    left: 66px;
    top: 28px;
}

.spark-5 {
    left: 7px;
    top: 48px;
}

.spark-6 {
    left: 58px;
    top: 50px;
}

.spark-7 {
    left: 20px;
    top: 56px;
}

.spark-8 {
    left: 72px;
    top: 45px;
}

@keyframes sparkAnimation {

    0%,
    54% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }

    60% {
        opacity: 1;
        transform: scale(1.3) translateY(0);
    }

    66% {
        opacity: 1;
    }

    82% {
        opacity: 0.7;
        transform: scale(0.8) translateY(-8px);
    }

    87%,
    100% {
        opacity: 0;
        transform: scale(0) translateY(10px);
    }
}

/* 2. Content Moderation Micro-Animations */
.shield-wrapper {
    position: relative;
    width: 130px;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shield-aura {
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.25) 0%, rgba(59, 130, 246, 0.15) 50%, rgba(0, 0, 0, 0) 70%);
    animation: shieldAuraPulse 3s ease-in-out infinite alternate;
}

@keyframes shieldAuraPulse {
    0% {
        transform: scale(0.85);
        opacity: 0.35;
    }

    100% {
        transform: scale(1.18);
        opacity: 0.75;
    }
}

.laser-scanner {
    position: absolute;
    left: 15px;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #3b82f6 30%, #f97316 70%, rgba(0, 0, 0, 0) 100%);
    box-shadow: 0 0 12px #3b82f6, 0 0 20px #f97316;
    z-index: 5;
    animation: scanUpDown 2.8s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes scanUpDown {
    0% {
        top: 20px;
        opacity: 0.3;
    }

    50% {
        top: 125px;
        opacity: 1;
    }

    100% {
        top: 20px;
        opacity: 0.3;
    }
}

.shield-center-logo {
    position: absolute;
    z-index: 6;
}

.starburst-spin {
    animation: starburstBreathe 6s ease-in-out infinite alternate;
}

@keyframes starburstBreathe {
    0% {
        transform: scale(0.92) rotate(0deg);
    }

    100% {
        transform: scale(1.08) rotate(45deg);
    }
}

.scan-tag {
    position: absolute;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #a7f3d0;
    backdrop-filter: blur(4px);
    z-index: 10;
}

.tag-top {
    top: 25px;
    right: 15px;
    animation: tagPulse 3s infinite alternate;
}

.tag-bottom {
    bottom: 25px;
    left: 15px;
    animation: tagPulse 3s infinite alternate 1.5s;
}

@keyframes tagPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* 3. Enterprise Ready Micro-Animations */
.enterprise-network-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 200px;
}

.pulse-path {
    stroke-dasharray: 20 80;
    animation: flowData 2.4s linear infinite;
}

.pulse-1 {
    animation-delay: 0s;
}

.pulse-2 {
    animation-delay: 0.4s;
}

.pulse-3 {
    animation-delay: 0.8s;
}

.pulse-4 {
    animation-delay: 0.2s;
}

.pulse-5 {
    animation-delay: 0.6s;
}

.pulse-6 {
    animation-delay: 1.0s;
}

.pulse-7 {
    animation-delay: 1.2s;
}

.pulse-8 {
    animation-delay: 1.4s;
}

@keyframes flowData {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.network-hub-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #11131a;
    border: 2px solid #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.network-hub-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
    text-align: center;
    z-index: 11;
}

/* .graphic-display-box:last-of-type .network-hub-center::after {
    content: "Mentorship";
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cbd5e1;
    text-align: center;
    z-index: 11;
} */

.hub-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #f97316;
    animation: hubRingExpand 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes hubRingExpand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.net-node {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #161822;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    transition: all 0.3s ease;
    animation: nodeGlowPulse 2.4s ease-in-out infinite alternate;
}

/* Mathematically centered relative to the 240x200 SVG path start points */
.node-left-1 {
    left: calc(50% - 90px);
    top: calc(50% - 75px);
    transform: translate(-50%, -50%);
    animation-delay: 0s;
}

.node-left-2 {
    left: calc(50% - 90px);
    top: calc(50% - 25px);
    transform: translate(-50%, -50%);
    animation-delay: 0.4s;
}

.node-left-3 {
    left: calc(50% - 90px);
    top: calc(50% + 25px);
    transform: translate(-50%, -50%);
    animation-delay: 0.8s;
}

.node-left-4 {
    left: calc(50% - 90px);
    top: calc(50% + 75px);
    transform: translate(-50%, -50%);
    animation-delay: 1.2s;
}

.node-right-1 {
    left: calc(50% + 90px);
    top: calc(50% - 75px);
    transform: translate(-50%, -50%);
    animation-delay: 0.2s;
}

.node-right-2 {
    left: calc(50% + 90px);
    top: calc(50% - 25px);
    transform: translate(-50%, -50%);
    animation-delay: 0.6s;
}

.node-right-3 {
    left: calc(50% + 90px);
    top: calc(50% + 25px);
    transform: translate(-50%, -50%);
    animation-delay: 1.0s;
}

.node-right-4 {
    left: calc(50% + 90px);
    top: calc(50% + 75px);
    transform: translate(-50%, -50%);
    animation-delay: 1.4s;
}

@keyframes nodeGlowPulse {
    0% {
        border-color: rgba(255, 255, 255, 0.2);
        color: #94a3b8;
        box-shadow: none;
    }

    50% {
        border-color: #f97316;
        color: #ffffff;
        box-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
    }

    100% {
        border-color: #3b82f6;
        color: #ffffff;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
    }
}

/* 4. Insights Micro-Animations */
.insights-display-box {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

.insights-dashboard-card {
    position: relative;
    width: 258px;
    height: 209px;
    box-sizing: border-box;
    padding: 10px;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background:
        linear-gradient(#08090d, #08090d) padding-box,
        linear-gradient(90deg, #ff4b1f 0%, #ff4b1f 30%, #ff6b35 50%, #3b82f6 100%) border-box;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 18px rgba(59, 130, 246, 0.08);
    animation: cardBorderGlow 4s ease-in-out infinite alternate;
}

@keyframes cardBorderGlow {
    0% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 12px rgba(249, 115, 22, 0.08);
    }

    100% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45), 0 0 18px rgba(59, 130, 246, 0.12);
    }
}

.insights-card-header {
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 1px 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.insights-card-title {
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
}

.spin-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    animation: spinSlow 12s linear infinite;
}

@keyframes spinSlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.insights-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.widget-box {
    position: relative;
    height: 65px;
    box-sizing: border-box;
    padding: 7px 9px;
    background: #0d0f14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    overflow: hidden;
}

.widget-label {
    position: relative;
    z-index: 3;
    font-size: 0.54rem;
    line-height: 1.1;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 3px;
    white-space: nowrap;
}

.widget-value {
    position: relative;
    z-index: 3;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.active-members-widget .widget-value {
    color: #60a5fa;
}

.text-success {
    color: #22c55e !important;
}

.active-members-widget .line-chart-svg {
    position: absolute;
    left: 7px;
    right: 6px;
    bottom: 4px;
    width: calc(100% - 13px);
    height: 36px;
    overflow: visible;
}

.active-chart-area {
    opacity: 0.55;
    animation: activeAreaPulse 3s ease-in-out infinite alternate;
}

@keyframes activeAreaPulse {
    0% {
        opacity: 0.35;
    }

    100% {
        opacity: 0.75;
    }
}

.active-chart-line {
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    animation: activeLineDraw 3s ease-in-out infinite alternate;
}

@keyframes activeLineDraw {
    0% {
        stroke-dashoffset: 130;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.active-members-widget .line-chart-svg circle {
    animation: activePointPulse 2s ease-in-out infinite alternate;
}

@keyframes activePointPulse {
    0% {
        opacity: 0.45;
    }

    100% {
        opacity: 1;
    }
}

.active-members-widget .chart-dot-pulse {
    animation: activeLastPoint 1.4s ease-in-out infinite alternate;
}

@keyframes activeLastPoint {
    0% {
        r: 2px;
        opacity: 0.5;
    }

    100% {
        r: 3.5px;
        opacity: 1;
        filter: drop-shadow(0 0 5px #3b82f6);
    }
}

.bar-chart-mini {
    position: absolute;
    right: 8px;
    bottom: 6px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
}

.bar-chart-mini .bar {
    width: 5px;
    background: #3b82f6;
    border-radius: 1px 1px 0 0;
    animation: barPulseHeight 1.8s ease-in-out infinite alternate;
}

.bar-1 {
    height: 35%;
    animation-delay: 0s;
}

.bar-2 {
    height: 55%;
    animation-delay: 0.3s;
}

.bar-3 {
    height: 70%;
    animation-delay: 0.6s;
}

.bar-4 {
    height: 82%;
    animation-delay: 0.2s;
}

.bar-5 {
    height: 100%;
    animation-delay: 0.5s;
}

@keyframes barPulseHeight {
    0% {
        transform: scaleY(0.5);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(1);
        transform-origin: bottom;
        background: #60a5fa;
    }
}

.donut-chart-mini {
    position: absolute;
    right: 7px;
    bottom: 5px;
    width: 38px;
    height: 38px;
}

.donut-chart-mini svg {
    width: 38px;
    height: 38px;
}

.circle-val {
    animation: donutRotateVal 4s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes donutRotateVal {
    0% {
        stroke-dasharray: 40, 100;
        stroke: #f97316;
    }

    100% {
        stroke-dasharray: 85, 100;
        stroke: #3b82f6;
    }
}

.area-chart-svg {
    position: absolute;
    left: 7px;
    right: 5px;
    bottom: 3px;
    width: calc(100% - 12px);
    height: 31px;
    opacity: 0.95;
}

.live-area-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 50;
    animation: areaWave 3.5s ease-in-out infinite alternate;
}

@keyframes areaWave {
    0% {
        stroke-dashoffset: 50;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {
    .features-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .feature-col:nth-child(1),
    .feature-col:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .feature-col:nth-child(3),
    .feature-col:nth-child(4) {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .platform-features-section {
        padding: 60px 16px 80px 16px;
    }

    .features-title {
        font-size: 2rem;
    }

    .features-subtitle {
        font-size: 0.92rem;
    }

    .features-card-grid {
        grid-template-columns: 1fr;
    }

    .feature-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 28px 20px;
        /* min-height: 340px; */
    }

    .feature-col:last-child {
        border-bottom: none !important;
    }
}
/*end-sec*/
/*scrolll-sec*/
body {
  margin: 0;
}
.wp-block-paragraph a {
    color: #2b6cb0;
    text-decoration: underline;
}
.wp-block-heading {
    font-size: 28px !important;
    line-height: 1.2;
}
.ai-feature-wrapper {
  --hover-transition-duration: 100ms;
  --hover-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --home-brain-gutter: calc((20px + max(0px, (100vw - 1440px) / 2)) * (1 - var(--home-brain-bleed, 0)));
  --home-brain-clip-radius: calc(32px * (1 - var(--home-brain-bleed, 0)));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 100vw;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
}

@media (max-width: 900px) {
  .ai-feature-wrapper {
    padding: 0;
  }
}

.ai-feature-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  inline-size: 100%;
  border-radius: calc(32px * (1 - var(--home-brain-bleed, 0)));
  background: #000;
  -webkit-clip-path: inset(0 var(--home-brain-gutter) 0 var(--home-brain-gutter) round var(--home-brain-clip-radius));
  clip-path: inset(0 var(--home-brain-gutter) 0 var(--home-brain-gutter) round var(--home-brain-clip-radius));
}

@media (max-width: 900px) {
  .ai-feature-panel {
    border-radius: 0;
    -webkit-clip-path: none;
    clip-path: none;
  }
}

.ai-feature-cards-band,
.ai-feature-hero-band {
  position: relative;
  inline-size: 100%;
  background: #000;
}

.ai-feature-hero-band {
  position: relative;
  overflow: hidden;
  padding-block-start: 80px;
  padding-block-end: 42px;
}

@media (max-width: 900px) {
  .ai-feature-hero-band {
    padding-block-start: 110px;
    padding-block-end: 72px;
  }
}

@media (max-width: 600px) {
  .ai-feature-hero-band {
    padding-block-start: 64px;
    padding-block-end: 56px;
  }
}

@media (max-width: 1100px) {
  .ai-feature-hero-band {
    padding-inline-start: var(--spacing-mobile-padding-gutter, 20px);
    padding-inline-end: var(--spacing-mobile-padding-gutter, 20px);
  }
}

.ai-feature-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 820px;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  text-align: center;
  isolation: isolate;
}

@media (max-width: 600px) {
  .ai-feature-hero-inner {
    gap: 18px;
  }
}

.ai-feature-hero-band-glow {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -450px;
  z-index: 0;
  inline-size: min(1000px, 100%);
  block-size: 798px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .ai-feature-hero-band-glow {
    inset-block-end: -340px;
    inline-size: min(760px, 100%);
    block-size: 600px;
  }
}

@media (max-width: 600px) {
  .ai-feature-hero-band-glow {
    inset-block-end: -260px;
    inline-size: min(560px, 100%);
    block-size: 460px;
  }
}

.ai-feature-title {
  margin: 0;
  -webkit-padding-after: 2px;
  padding-block-end: 2px;
  background: linear-gradient(0deg, #8f8f8f -15%, #fff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -3.2px;
  text-align: center;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

@media (max-width: 900px) {
  .ai-feature-title {
    font-size: 28px;
    letter-spacing: -1.68px;
  }
}

@media (max-width: 600px) {
  .ai-feature-title {
    font-size: 28px;
    letter-spacing: -1.68px;
  }
}

.ai-feature-subtitle {
  max-inline-size: 560px;
  margin: 0;
  color: #B4B4B4;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.4px;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .ai-feature-subtitle {
    font-size: 17px;
    line-height: 26px;
  }
}

.ai-feature-download-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
  -webkit-margin-before: 4px;
  margin-block-start: 4px;
}

@media (max-width: 600px) {
  .ai-feature-download-group {
    gap: 16px;
  }
}

.ai-feature-cards-band {
  -webkit-padding-before: 0;
  padding-block-start: 0;
  -webkit-padding-after: 80px;
  padding-block-end: 80px;
}

@media (max-width: 900px) {
  .ai-feature-cards-band {
    -webkit-padding-after: 56px;
    padding-block-end: 56px;
  }
}

@media (max-width: 600px) {
  .ai-feature-cards-band {
    -webkit-padding-after: 40px;
    padding-block-end: 40px;
  }
}

@media (max-width: 1100px) {
  .ai-feature-cards-band {
    -webkit-padding-start: var(--spacing-mobile-padding-gutter, 20px);
    padding-inline-start: var(--spacing-mobile-padding-gutter, 20px);
    -webkit-padding-end: var(--spacing-mobile-padding-gutter, 20px);
    padding-inline-end: var(--spacing-mobile-padding-gutter, 20px);
  }
}

.ai-feature-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 1px;
  gap: 1px;
  overflow: hidden;
  inline-size: 100%;
  width: 95%;
    max-width: 80rem;
    margin: 0 auto;
  margin: 0;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  padding: 0;
  border: 1px solid #2a2a2a;
  background: #2a2a2a;
  list-style: none;
}

@media (max-width: 900px) {
  .ai-feature-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ai-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  min-inline-size: 0;
  background: #000;
  transition: background-color 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ai-feature-card:hover {
  background: #060606;
}

.ai-feature-card-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 0;
}

@media (max-width: 900px) {
  .ai-feature-card-copy {
    padding: 24px 24px 0;
  }
}

.ai-feature-card-label {
  margin: 0;
  color: #eee;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
}

.ai-feature-pillars-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 720px;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
  -webkit-padding-before: 80px;
  padding-block-start: 80px;
  -webkit-padding-after: 56px;
  padding-block-end: 56px;

}
.thp-compare-section {
       width: 95%;
    max-width: 80rem;
    margin: auto;
} .thp-compare-title {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 40px;
        color: #111827;
        letter-spacing: -0.02em;
    }
    .thp-compare-title span {
        color: #9ca3af;
    }
    .thp-compare-table-wrapper {
        width: 100%;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        overflow: visible;
        background: #ffffff;
    }
    .thp-compare-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        table-layout: fixed;
    }
    .thp-compare-table th,
    .thp-compare-table td {
        padding: 20px 16px;
        border-bottom: 1px solid #f3f4f6;
        border-right: 1px solid #f3f4f6;
        font-size: 14px;
        color: #4b5563;
        vertical-align: middle;
    }
    .thp-compare-table th:last-child,
    .thp-compare-table td:last-child {
        border-right: none;
    }
    .thp-compare-table tbody tr:last-child td {
        border-bottom: none;
    }
    /* Sticky Header */
    .thp-compare-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .thp-compare-table thead th:nth-child(1) {
        text-align: left;
        background: #f8fafc;
        border-top-left-radius: 12px;
    }
    .thp-compare-table thead th:nth-child(2) {
        background: #f8fafc;
    }
    .thp-compare-table thead th:nth-child(3) {
        background: #bfdbfe; /* Light blue for Growth */
    }
    .thp-compare-table thead th:nth-child(4) {
        background: #f8fafc;
    }
    .thp-compare-table thead th:nth-child(5) {
        background: #f8fafc;
        border-top-right-radius: 12px;
    }

    /* Column Backgrounds */
    .thp-compare-table tbody td:nth-child(1) {
        text-align: left;
        font-weight: 500;
        color: #111827;
    }
    .thp-compare-table tbody td:nth-child(3) {
        background: #f8fafc; /* Very light blue/gray for Growth column */
    }

    /* Header text styling */
    .thp-compare-header-title {
        font-weight: 600;
        color: #111827;
        font-size: 16px;
        margin-bottom: 4px;
    }
    .thp-compare-header-subtitle {
        font-size: 14px;
        color: #111827;
        font-weight: 600;
    }
    .thp-compare-table thead th:nth-child(3) .thp-compare-header-subtitle {
        color: #1e3a8a; /* Darker blue for Most chosen */
    }

    /* Section Rows */
    .thp-compare-section-row td {
        background: #f0f9ff !important;
        text-align: left;
        padding: 16px 20px !important;
        font-weight: 600;
        color: #111827;
        border-bottom: 1px solid #e0f2fe !important;
    }
    .thp-compare-section-number {
        color: #3b82f6;
        font-size: 16px;
        margin-right: 8px;
    }
    .thp-compare-section-desc {
        color: #64748b;
        font-size: 13px;
        font-weight: 400;
        margin-left: 8px;
    }

    /* Checkmark */
    .thp-check {
        color: #4b5563;
        font-weight: normal;
        font-size: 12px;
    }
     .thp-compare-table-wrapper {
    margin-top: 40px;
}
    /* Responsive Design for Tablet & Mobile */
    @media (max-width: 1024px) {
       
        .thp-compare-table-wrapper {
            overflow-x: auto; /* Enable horizontal scrolling */
        }
        .thp-compare-table {
            min-width: 900px; /* Ensure columns don't squish too much */
        }
        .thp-compare-table-wrapper {
    margin-top: 40px;
}
    }

    @media (max-width: 768px) {
        .thp-compare-title {
            font-size: 32px;
            margin-bottom: 24px;
        }
        .thp-compare-table {
            min-width: 750px;
        }
        .thp-compare-table th,
        .thp-compare-table td {
            padding: 14px 12px;
            font-size: 13px;
        }
        .thp-compare-header-title {
            font-size: 14px;
        }
        .thp-compare-header-subtitle {
            font-size: 12px;
        }
        .thp-compare-section-row td {
            padding: 12px 16px !important;
        }
        .thp-compare-section-number {
            font-size: 14px;
        }
        .thp-compare-section-desc {
            font-size: 12px;
        }
        .thp-compare-table-wrapper {
    margin-top: 30px;
}
figure.wp-block-image.is-resized img {
    height: 300px !important;
}
    }
    
    @media (max-width: 480px) {
        .thp-compare-table {
            min-width: 650px;
        }
        .thp-compare-table th,
        .thp-compare-table td {
            padding: 12px 8px;
            font-size: 12px;
        }
        .thp-compare-table-wrapper {
    margin-top: 30px;
}
figure.wp-block-image.is-resized img {
    height: 300px !important;
}
    }
@media (max-width: 900px) {
  .ai-feature-pillars-header {
    gap: 12px;
    -webkit-padding-before: 56px;
    padding-block-start: 56px;
    -webkit-padding-after: 40px;
    padding-block-end: 40px;
  }
}

@media (max-width: 600px) {
  .ai-feature-pillars-header {
    -webkit-padding-before: 40px;
    padding-block-start: 40px;
    -webkit-padding-after: 32px;
    padding-block-end: 32px;
  }
}

.ai-feature-closing-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 901px) {
  .ai-feature-closing-backdrop {
    inset-inline-start: 50%;
    inline-size: 100vw;
    -webkit-margin-start: -50vw;
    margin-inline-start: -50vw;
  }
}

.agents-preview-layered-section {
  position: relative;
  z-index: 9;
}

.agents-preview-agent-main {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: 808px;
  block-size: auto;
  opacity: 0;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .agents-preview-agent-main {
    display: none;
  }
}
p.ai-feature-card-text {
    color: #B4B4B4;
    font-size: 14px;
    margin: 0;
}
.security-scale .ai-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 1px;
    gap: 1px;
    overflow: hidden;
    inline-size: 100%;
      width: 95%;
    max-width: 80rem;
    margin: 0;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-margin-end: auto;
    margin-inline-end: auto;
    padding: 0;
    border: 1px solid #2a2a2a;
    background: #2a2a2a;
    list-style: none;
}
/* Engagement Section */
.thp-engagement-container {
    width: 95%;
    max-width: 80rem;
    margin: 0 auto;
}

.thp-engagement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.thp-engagement-title-area h2 {
    margin: 0 0 8px 0;
	text-align:left;
}

.thp-engagement-title-area p {
    font-size: 16px;
    color: #5B544B;
    margin: 0;
}

.thp-btn-explore {
    padding: 10px 20px;
    font-size: 14px !important;
    border-radius: 12px;
    white-space: nowrap;
}

.thp-engagement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #eaeaea;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.thp-engagement-item {
    padding: 32px 24px;
    border-right: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thp-engagement-item:last-child {
    border-right: none;
}

.thp-engagement-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: #edf5ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.thp-engagement-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px 0;
}

.thp-engagement-item p {
    font-size: 14px;
    color: #5B544B;
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1024px) {
    .thp-engagement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .thp-engagement-item:nth-child(2) {
        border-right: none;
    }
    .thp-engagement-item:nth-child(1), .thp-engagement-item:nth-child(2) {
        border-bottom: 1px solid #eaeaea;
    }
	.thp-engagement-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-direction: column;
    gap: 15px;
}
}

@media (max-width: 768px) {
    .thp-engagement-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .thp-engagement-grid {
        grid-template-columns: 1fr;
    }
    .thp-engagement-item {
        border-right: none;
        border-bottom: 1px solid #eaeaea;
    }
    .thp-engagement-item:last-child {
        border-bottom: none;
    }
	.thp-engagement-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-direction: column;
    gap: 15px;
}
	.security-scale .ai-feature-cards {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
/*roi-calculater*/
/* Base overrides if needed to match design */
.ai-solutions-card {
    background-color: #e2e8f0; /* Gray background for the card section */
    padding: 32px;
    border-radius: 16px;
    gap: 14px;
    display: flex;
}
.ai-solutions-card-left, .ai-solutions-card-right {
    width: 50%;
}
.roi-calculator-section .ai-solutions-card  {
    background: transparent;
    padding: 0;
    gap: 20px;
}

.roi-inputs-wrapper {
       background: linear-gradient(360deg, rgba(162, 223, 246, 0.6) 0%, rgba(209, 239, 250, 0.6) 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    height: 100%;
}
.roi-inputs-header {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.roi-input-group {
    margin-bottom: 28px;
}
.roi-label-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.roi-label-col {
    display: flex;
    flex-direction: column;
}
.roi-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}
.roi-sublabel {
    font-size: 11px;
    color: #475569;
    margin-top: 4px;
}
.roi-value {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
}
.roi-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    outline: none;
    cursor: pointer;
    margin: 12px 0 0 0;
}
.roi-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border: none;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    /* Red cross, blue cross on white circle */
    background: white url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L12 22M2 12L22 12" stroke="%23ef4444" stroke-width="2" stroke-linecap="round"/><path d="M4.93 4.93L19.07 19.07M4.93 19.07L19.07 4.93" stroke="%233b82f6" stroke-width="2" stroke-linecap="round"/></svg>') center/14px no-repeat;
    border: 2px solid white;
    border-radius: 50%;
    margin-top: -9px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.roi-outputs-wrapper {
background: linear-gradient(360deg, rgba(162, 223, 246, 0.6) 0%, rgba(209, 239, 250, 0.6) 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.roi-impact-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px 24px;
    margin-bottom: 24px;
    text-align: center;
}
.roi-impact-label {
    font-size: 11px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.roi-impact-value {
    font-size: 42px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.roi-impact-sub {
    font-size: 12px;
    color: #475569;
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
.roi-grid-item {
    border: 1px solid #d1d5db;
    background: transparent;
    border-radius: 8px;
    padding: 16px 20px;
}
.roi-grid-label {
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.roi-grid-value {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}
roi-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border: none;
    border-radius: 3px;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    /* Updated SVG logo per user request */
    background: #ffffff url('https://thrico.com/wp-content/uploads/2026/08/roi-logo.svg') center/16px no-repeat;
    border: 1px solid #cbd5e1; /* Thin gray border matching the image */
    border-radius: 50%;
    margin-top: -9px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.roi-formula-banner {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 12px;
}
.roi-formula-bar {
    background: #111827;
    color: white;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}
.roi-formula-breakdown {
    font-size: 12px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
.roi-formula-row {
    display: flex;
    justify-content: space-between;
}
.roi-formula-row .roi-f-val {
    font-weight: 700;
    color: #111827;
}
.roi-why-link {
    font-size: 12px;
    color: #475569;
    text-decoration: none;
    margin-top: 24px;
    display: inline-block;
}
@media screen and (max-width: 991px) {
    .roi-calculator-section  .ai-solutions-card {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
    }
    .ai-solutions-card-left, .ai-solutions-card-right {
        width: 100%;
    }
    .roi-calculator-section section.tab-sections {
    padding: 0 20px;
}
    .roi-inputs-wrapper, .roi-outputs-wrapper {
        padding: 24px 16px;
    }
    .roi-impact-box {
        padding: 24px 16px;
    }
    .roi-impact-value {
        font-size: 32px;
    }
    .roi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .roi-formula-row {
        flex-direction: column;
        gap: 4px;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 8px;
    }
    .roi-formula-row:last-child {
        border-bottom: none;
    }
}
/*pricing-sec*/
 .thp-pricing-container {
    padding: 0 20px;
   width: 95%;
    max-width: 80rem;
    margin: 0 auto;
}

        /* Header Controls */
        .thp-pricing-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .thp-billing-toggle-wrapper {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .thp-billing-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .thp-status-dot {
            width: 6px;
            height: 6px;
            background-color: #22c55e;
            border-radius: 50%;
        }

        .thp-billing-toggle {
            display: flex;
            background-color: #f4f4f5;
            padding: 4px;
            border-radius: 12px;
        }

        .thp-toggle-btn {
            padding: 8px 16px;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
            cursor: pointer;
            border: none;
            background: transparent;
            color: #555;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .thp-toggle-btn.thp-active {
            background-color: #111;
            color: #fff;
        }

        .thp-save-badge {
            color: #3b82f6;
        }

        .thp-region-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 32px 8px 16px; /* Increased right padding for the arrow */
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            background-color: #fff;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 16px center; /* Move arrow away from right edge */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: 13.92px;
            font-weight: 500;
            cursor: pointer;
            color: #333;
        }

        /* Pricing Cards Grid */
        .thp-pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            align-items: stretch;
        }

        /* Individual Card Styling */
        .thp-pricing-card {
            background: #fff;
            border: 1px solid #eaeaea;
            border-radius: 24px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
        }

        .thp-pricing-card.thp-highlighted {
            background: #f0f6ff;
            border: 1px solid #bfdbfe;
        }

        .thp-most-popular-badge {
            position: absolute;
            top: -12px;
            right: 20px;
            background: #1d4ed8;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 12px;
        }

       .thp-plan-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0px;
    color: #111;
}
        .thp-pricing-card.thp-highlighted .thp-plan-name {
            color: #1d4ed8;
        }
.thp-plan-desc {
    font-size: 16px;
    color: #5B544B;    line-height: 1.5;
    margin-bottom: 0;
    min-height: 58px;
}

        .thp-plan-price-wrapper {
            margin-bottom: 10px;
        }

        .thp-plan-price {
            font-size: 30px;
            font-weight: 600;
            color: #111;
            margin-bottom: 4px;
            line-height: 1.1;
        }

        .thp-plan-price.thp-talk {
            font-size: 26px;
            margin-bottom: 8px;
        }
.thp-plan-billing-info {
    font-size: 14px;
    color: #0E0B08;
    font-weight: 400;
}

        .thp-divider {
            border-top: 1px dashed #e5e5e5;
            margin: 0 0 10px 0;
            width: 100%;
        }

        .thp-pricing-card.thp-highlighted .thp-divider {
            border-top: 1px dashed #93c5fd;
        }

        /* Stats Grid */
        .thp-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        .thp-stat-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .thp-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 400;
    color: #5B544B;
    letter-spacing: 0.5px;
}
.thp-stat-value {
    font-size: 14px;
    font-weight: 400;
    color: #0E0B08;
}

       .thp-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    flex-grow: 1;
    padding: 0;
}

      .thp-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #0E0B08;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 8px;
}

        .thp-feature-icon {
            flex-shrink: 0;
            margin-top: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Buttons */
        .thp-btn {
            width: 100%;
            padding: 8px 16px;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
            text-decoration: none;
            display: inline-block;
        }

        .thp-btn-dark {
            background: #111;
            color: #fff;
            border: 1px solid #111;
        }

        .thp-btn-dark:hover {
            background: #333;
            border-color: #333;
        }

        .thp-btn-light {
            background: #fff;
            color: #111;
            border: 1px solid #fff;
        }

        .thp-btn-light:hover {
            background: #f9f9f9;
        }

        /* Responsive */
        @media (max-width: 1280px) {
            .thp-pricing-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 800px) {
            .thp-pricing-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .thp-pricing-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 500px) {
            .thp-pricing-grid {
                grid-template-columns: 1fr;
            }
            .thp-pricing-card {
                padding: 24px 16px;
            }
            .thp-stats-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .thp-billing-toggle-wrapper {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                width: 100%;
            }
            .thp-pricing-header {
                width: 100%;
            }
            .thp-region-selector {
                width: 100%;
                justify-content: space-between;
            }
            .thp-toggle-btn {
                padding: 6px 12px;
                font-size: 13px;
            }
        }

/*main-slider*/
.thrive-uses_clip {
    padding: 70px 100px  10px  100px;
}
.thrive-flow_ui-bkg.t-mod-h {
    z-index: 10;
    margin-bottom: -5rem !important;
    margin-left: 0.75rem;
    position: absolute;
}
.left-img-sec {
    width: 552px !important;
    object-fit: cover;
    height: 343px;
}
.right-img-sec {
    width: 208px !important;
    object-fit: cover;
    height: 427px;
}
.best-for-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 9px !important;
    align-items: center;
    margin-top: 12px;
}

.best-for-tags span{
    position: relative;
    padding-left: 14px;
    font-size: 16px !important;
    line-height: 1.5;
    color: #4b5563 !important;
    font-weight: 400;
}

.best-for-tags span::before{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5B5B5B;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile */
@media (max-width: 767px){
    .best-for-tags{
        gap: 10px 14px;
    }

    .best-for-tags span{
        font-size: 14px;
    }
}
/*pricing*/
 :root {
            --ink: #202020;
            --ink-soft: #646464;
            --ink-faint: #838383;
            --ink-lighter: #949494;
            --line: #e8e8e8;
            --line-soft: #f0f0f0;
            --surface: #f8f9fa;
            --accent: #4a2fff;
            --white: #ffffff;
            --green: #1a9c53;
        }

         .pricing-sec ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .pricing-sec .wrap {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .pricing-sec img {
            max-width: 100%;
            display: block;
        }

        /* HERO */
        .pricing-sec .hero {
            display: flex;
            justify-content: center;
            padding: 80px 20px 40px;
        }

        .pricing-sec .hero h1 {
            font-weight: 700;
            font-size: 56px;
            line-height: 1.12;
            margin: 0 !important;
            letter-spacing: -2px;
            text-align: center;
            max-width: 900px;
            background: linear-gradient(114deg, #202020 44%, #8f8f8f 87%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* GUARANTEE / TOGGLE */
        .pricing-sec .bar {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            max-width: 1120px;
            margin: 0 auto;
            padding: 32px 20px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .pricing-sec .guarantee {
            display: flex;
            align-items: center;
            gap: 9px;
            background: var(--surface);
            border-radius: 30px;
            padding: 8px 16px 8px 12px;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: -.15px;
            white-space: nowrap;
        }

        .pricing-sec .guarantee svg {
            flex: none;
            color: var(--green);
        }

        .pricing-sec .toggle-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .pricing-sec .toggle-note {
            color: var(--accent);
            font-size: 12px;
            font-weight: 500;
            text-align: center;
        }

        .pricing-sec .toggle {
            display: flex;
            background: var(--surface);
            border-radius: 170px;
            padding: 4px;
            width: 206px;
        }

        .pricing-sec .toggle button {
            flex: 1;
            border: none;
            background: none;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: -.15px;
            color: var(--ink-faint);
        }

        .pricing-sec .toggle button.active {
            background: var(--white);
            color: var(--ink);
            box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
        }

        /* PRICING CARDS */
        .pricing-sec .plans {
            display: flex;
            justify-content: center;
            padding: 0 20px 60px;
        }

        .pricing-sec .plans-inner {
            display: flex;
            max-width: 1120px;
            width: 100%;
            align-items: stretch;
        }

     .pricing-sec .plan {
    flex: 1;
    min-width: 0;
    background: var(--white);
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
}
.pricing-sec .dark span.plan-eyebrow {
    color: #fff !important;
}

        .pricing-sec .plan+.pricing-sec .plan {
            border-left: none;
        }

        .pricing-sec .plan.dark {
            background: var(--ink);
            border-color: var(--ink);
            color: var(--white);
        }

        .pricing-sec .plan-top {
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-height: 246px;
        }

        .pricing-sec .plan-head {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
        }

        .pricing-sec .plan-name-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pricing-sec .plan-name {
            font-size: 26px;
            font-weight: 650;
            letter-spacing: -.91px;
            text-transform: capitalize;
        }

        .pricing-sec .badge {
            background: #f7f7f7;
            color: var(--ink);
            font-size: 12px;
            font-weight: 500;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .pricing-sec .price-row {
            min-height: 51px;
        }

        .pricing-sec .price {
            font-size: 34px;
            font-weight: 650;
            letter-spacing: -.36px;
            display: block;
        }

        .pricing-sec .price-sub {
            font-size: 12px;
            color: var(--ink-faint);
            font-weight: 500;
            letter-spacing: -.54px;
            padding-top: 8px;
            display: block;
        }

        .pricing-sec .plan-cta {
            width: 100%;
            height: 32px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -.15px;
        }

        .pricing-sec .plan-cta.primary {
            background: var(--ink);
            color: var(--white);
        }

        .pricing-sec .plan-cta.secondary {
            background: var(--line-soft);
            color: var(--ink);
        }

        .pricing-sec .plan.dark .plan-cta.secondary {
            background: var(--white);
            color: var(--ink);
        }

        .pricing-sec .plan-demo {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -.36px;
            text-align: left;
        }

        .pricing-sec .plan-body {
            border-top: 1px solid var(--line-soft);
            padding: 40px 24px 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
        }

        .pricing-sec .plan.dark .pricing-sec .plan-body {
            border-top-color: rgba(255, 255, 255, .12);
        }

        .pricing-sec .plan-eyebrow {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .pricing-sec .plan.dark .pricing-sec .plan-eyebrow {
            color: #bbb;
        }

        .pricing-sec .feat-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .pricing-sec .feat-list li {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            font-size: 14px;
            color: var(--ink-soft);
            letter-spacing: -.15px;
            line-height: 20px;
        }

        .pricing-sec .plan.dark .feat-list li {
            color: var(--white);
        }

        .pricing-sec .feat-list svg {
            flex: none;
            margin-top: 2px;
            color: var(--ink);
        }

        .pricing-sec .plan.dark .feat-list svg {
            color: var(--white);
        }

        .pricing-sec .feat-more {
            padding-left: 26px;
            font-size: 14px;
            color: var(--ink-lighter);
            font-style: italic;
        }

        .pricing-sec .plan.dark .pricing-sec .feat-more {
            color: rgba(255, 255, 255, .5);
        }

        .pricing-sec .value-chip {
            display: inline-block;
            margin-top: 4px;
            background: rgba(255, 255, 255, .12);
            color: var(--white);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: -.15px;
            padding: 2px 8px;
            border-radius: 999px;
        }

        .pricing-sec .value-chip .light {
            background: rgba(99, 91, 255, .1);
            color: var(--ink-soft);
        }

        /* LOGOS */
        .pricing-sec .logos-section {
            padding: 0 20px;
        }

        .pricing-sec .logos {
            max-width: 1160px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 40px;
            flex-wrap: wrap;
            gap: 24px;
        }

        .pricing-sec .logos .label {
            font-size: 13px;
            color: var(--ink-faint);
            text-transform: uppercase;
        }

        .pricing-sec .logo-list {
            display: flex;
            gap: 48px;
            align-items: center;
            flex-wrap: wrap;
        }

        .pricing-sec .logo-list span {
            font-size: 17px;
            font-weight: 600;
            color: #b7b7b7;
            letter-spacing: -.3px;
        }

        /* COMPARISON TABLE */
        .pricing-sec .compare-section {
            padding: 80px 20px;
            background: var(--white);
        }

        .pricing-sec .compare-head {
            max-width: 1120px;
            margin: 0 auto 24px;
            text-align: center;
        }

        .pricing-sec .compare-head h2 {
            font-size: 36px;
            font-weight: 700;
            letter-spacing: -1px;
        }

        .pricing-sec .compare-wrap {
            max-width: 1120px;
            margin: 0 auto;
            border: 1px solid var(--line-soft);
            border-radius: 12px;
        }

        .pricing-sec table.compare {
            width: 100%;
            border-collapse: collapse;
            min-width: 900px;
        }

        .pricing-sec table.compare thead th {
            background: var(--white);
            text-align: center;
            padding: 16px 12px;
            vertical-align: top;
            border-bottom: 1px solid var(--line);
            position: sticky;
            top: 60px;
            z-index: 10;
        }

        .pricing-sec table.compare thead th:first-child {
            text-align: left;
        }

        .pricing-sec .th-plan {
            font-size: 18px;
            font-weight: 650;
            color: var(--ink);
        }

        .pricing-sec .th-price {
            font-size: 14px;
            color: var(--ink-soft);
            margin-top: 6px;
        }

        .pricing-sec .th-cta {
            margin-top: 12px;
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            background: var(--line-soft);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .pricing-sec table.compare td,
        .pricing-sec table.compare th {
            padding: 14px 12px;
        }

        .pricing-sec table.compare tbody td {
            border-bottom: 1px solid var(--line-soft);
            text-align: center;
            font-size: 14px;
            color: var(--ink-soft);
        }

        .pricing-sec table.compare tbody td.feat {
            text-align: left;
            font-weight: 500;
            color: var(--ink);
        }

        .pricing-sec table.compare tbody td.biz {
            background: #fafaff;
        }

        .pricing-sec table.compare tr.cat-row td {
            text-align: left;
            font-family: 'Sometype Mono', ui-monospace, monospace;
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            padding-top: 32px;
            padding-bottom: 10px;
            border-bottom: none;
            background: var(--white);
        }

        .pricing-sec .compare .check {
            width: 14px;
            height: 13px;
            color: var(--green);
        }

        .pricing-sec .compare .dash {
            color: #d5d5d5;
        }

        .pricing-sec .compare .val {
            white-space: normal;
        }

        /* FAQ */
       .pricing-sec .faq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

        .pricing-sec .faq-head {
            max-width: 604px;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        .pricing-sec .faq-head h2 {
            font-size: 44px;
            font-weight: 700;
            margin: 0 !important;
            letter-spacing: -1.5px;
            line-height: 1.15;
            background: linear-gradient(146deg, #202020 44%, #8f8f8f 87%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .pricing-sec .faq-head p {
            font-size: 17px;
            color: var(--ink-soft);
            line-height: 1.5;
			margin:0 !important;
        }

        .pricing-sec .faq-head a {
            color: var(--ink);
            text-decoration: underline;
        }

        .pricing-sec .contact-btn {
            background: var(--ink);
            color: var(--white);
            border: none;
            border-radius: 12px;
            padding: 12px 20px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
        }

        .pricing-sec .faq-list {
            width: 100%;
            max-width: 851px;
            display: flex;
			gap:20px;
            flex-direction: column;
        }
.pricing-sec .faq-item {
    border-bottom: 1px solid #e8e8e8;
}

        .pricing-sec .faq-q {
            width: 100%;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 16px 0;
            text-align: left;
            font-size: 16px;
            font-weight: 500;
            color: var(--ink);
            letter-spacing: -.32px;
        }

        .pricing-sec .faq-q svg {
            flex: none;
            transition: transform .2s ease;
            color: var(--ink);
        }

        .pricing-sec .faq-item.open .faq-q svg {
            transform: rotate(180deg);
        }

        .pricing-sec .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s ease;
            font-size: 16px;
            color: var(--ink-soft);
            line-height: 22px;
            letter-spacing: -.32px;
        }

        .pricing-sec .faq-item.open .faq-a {
            max-height: 200px;
            padding-bottom: 16px;
        }

        .pricing-sec .load-more {
            background: var(--line-soft);
            border: none;
            border-radius: 12px;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            gap: 10px;
            align-items: center;
            cursor: pointer;
        }

        @media (max-width:900px) {
            .pricing-sec .plans-inner {
                flex-direction: column;
            }

            .pricing-sec .plan+.pricing-sec .plan {
                border-left: 1px solid var(--line);
                border-top: none;
            }

            .pricing-sec .hero h1 {
                font-size: 34px;
                letter-spacing: -1px;
            }

            .pricing-sec .bar {
                justify-content: center;
                text-align: center;
            }

            .pricing-sec .faq-head h2 {
                font-size: 30px;
            }

            .pricing-sec .compare-head h2 {
                font-size: 28px;
            }

            .pricing-sec .compare-wrap {
                overflow-x: auto;
            }
        }
   :root {
      --ink: #202020;
      --ink-soft: #090c1d;
      --gray-700: #646464;
      --gray-500: #838383;
      --gray-300: #e8e8e8;
      --gray-100: #f0f0f0;
      --gray-50: #f8f9fa;
      --accent: #6647f0;
      --link: #7b68ee;
      --white: #ffffff;
      --max: 1160px;
    }

   .startup-sec .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 40px;
    }

    .startup-sec .eyebrow {
      font-family: 'Sometype Mono', monospace;
      font-weight: 500;
      font-size: 16px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .02em;
      margin-bottom: 8px;
      display: block;
    }

  .startup-sec .hero {
      padding: 80px 0 0;
    }

    .startup-sec .hero-inner {
      display: flex;
      gap: 48px;
      align-items: center;
      flex-wrap: wrap;
    }

    .startup-sec .hero-copy {
      flex: 1 1 460px;
      max-width: 542px;
    }

    .startup-sec .hero-copy h1 {
      font-size: 56px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: -0.03em;
      background: linear-gradient(120deg, #202020 44%, #8f8f8f 87%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 16px;
    }

    .startup-sec .hero-copy p.lead {
      font-size: 18px;
      line-height: 1.4;
      color: var(--gray-700);
      letter-spacing: -.01em;
      margin-bottom: 24px;
    }

    .startup-sec  .hero-cta {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .startup-sec .hero-cta small {
      display: block;
      font-size: 12px;
      color: var(--gray-700);
      line-height: 1.5;
    }

    .startup-sec .hero-media {
      flex: 1 1 460px;
      max-width: 851px;
    }

    .startup-sec .hero-media .startup-sec .frame {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .25);
    }

    .startup-sec .hero-media img {
      width: 100%;
      display: block;
    }

    .startup-sec .trusted {
      padding: 50px 0 90px;
    }

   .startup-sec  .trusted-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
    }

    .startup-sec .trusted-row .label {
      font-family: 'Sometype Mono', monospace;
      font-size: 14px;
      color: var(--gray-500);
      text-transform: uppercase;
    }

    .startup-sec .logos {
      display: flex;
      gap: 48px;
      align-items: center;
      flex-wrap: wrap;
      opacity: .75;
      font-weight: 700;
      font-size: 20px;
      color: #333;
    }

   .startup-sec section {
      padding-top: 160px;
    }

   .startup-sec  .section-head {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

   .startup-sec  .section-head h2 {
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -.03em;
      background: linear-gradient(120deg, #202020 44%, #8f8f8f 87%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 12px;
    }

    .startup-sec .section-head p {
      font-size: 18px;
      color: var(--gray-700);
    }

    /* split feature */
    .startup-sec .split {
      display: flex;
      align-items: center;
      gap: 0;
      margin-top: 48px;
    }

   .startup-sec .split.reverse {
      flex-direction: row-reverse;
    }

   .startup-sec  .split-copy {
      flex: 1;
      padding: 48px;
    }

   .startup-sec  .split-copy h2 {
      font-size: 40px;
      font-weight: 650;
      letter-spacing: -.04em;
      line-height: 1.2;
      margin-bottom: 12px;
      max-width: 444px;
    }

    .startup-sec .split-copy p {
      font-size: 18px;
      color: var(--gray-700);
      line-height: 1.35;
      max-width: 444px;
      margin-bottom: 20px;
    }

    .startup-sec .split-media {
      flex: 1;
      overflow: hidden;
      border-radius: 14px;
    }

    .startup-sec .split-media img {
      width: 100%;
      display: block;
      object-fit: cover;
      border-radius: 14px;
    }

    /* feature articles (sticky-scroll style, simplified to a stacked showcase) */
    .startup-sec .articles {
      max-width: 851px;
      margin: 64px auto 0;
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .startup-sec .article {
      border-top: 1px solid var(--gray-300);
      padding-top: 40px;
    }

    .startup-sec .article h3 {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -.03em;
      margin-bottom: 10px;
    }

    .startup-sec .article p {
      font-size: 18px;
      color: var(--gray-700);
      line-height: 1.35;
      margin-bottom: 28px;
      max-width: 851px;
    }

    .startup-sec .article p a {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .startup-sec .article img {
      width: 100%;
      border-radius: 14px;
      display: block;
    }

    /* templates grid */
   .startup-sec  .templates-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 48px;
    }

    .startup-sec .template-card {
      background: var(--gray-50);
      border-radius: 8px;
      padding: 16px;
    }

    .startup-sec .template-card img {
      width: 100%;
      border-radius: 6px;
      margin-bottom: 20px;
      aspect-ratio: 317/210;
      object-fit: cover;
    }

   .startup-sec  .template-card h4 {
      font-size: 18px;
      font-weight: 650;
      color: var(--ink-soft);
      letter-spacing: -.01em;
    }

    /* integrations marquee */
   .startup-sec  .integrations-wrap {
      margin-top: 48px;
      overflow: hidden;
      position: relative;
    }

    .startup-sec  .integrations-wrap::before,
    .startup-sec .integrations-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
    }

    .startup-sec .integrations-wrap::before {
      left: 0;
      background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
    }

    .startup-sec .integrations-wrap::after {
      right: 0;
      background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
    }

    .startup-sec .integrations-track {
      display: flex;
      gap: 16px;
      width: max-content;
      animation: scrollx 40s linear infinite;
    }

   .startup-sec  .integrations-track:hover {
      animation-play-state: paused;
    }

    @keyframes scrollx {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .startup-sec .integration-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--gray-50);
      border: 1px solid var(--gray-300);
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
    }

   .startup-sec  .integration-chip .dot {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      background: var(--accent);
      flex-shrink: 0;
    }

    /* faq */
   .startup-sec  .faq {
      max-width: 750px;
      margin: 48px auto 0;
    }

   .startup-sec  .faq-item {
      border-top: 1px solid var(--gray-300);
    }

   .startup-sec  .faq-item:last-child {
      border-bottom: 1px solid var(--gray-300);
    }

    .startup-sec .faq-item button {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 26px 0;
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--gray-700);
      font-family: 'Inter', sans-serif;
      letter-spacing: -.01em;
    }

    .startup-sec .faq-item .plus {
      font-size: 22px;
      color: var(--gray-500);
      transition: transform .2s ease;
      flex-shrink: 0;
      margin-left: 20px;
    }

    .startup-sec .faq-item.open .plus {
      transform: rotate(45deg);
    }

   .startup-sec  .faq-item .answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
      font-size: 15px;
      color: var(--gray-700);
      line-height: 1.5;
    }

   .startup-sec  .faq-item.open .answer {
      max-height: 200px;
      padding-bottom: 24px;
    }

   .startup-sec footer {
      background: #fafafa;
      margin-top: 160px;
    }

   .startup-sec  .footer-top {
      padding: 62px 40px 0;
      max-width: 1512px;
      margin: 0 auto;
    }

   .startup-sec  .footer-top .wrap-inner {
      max-width: 1160px;
      margin: 0 auto;
    }

    .startup-sec .footer-logo img {
      height: 22px;
    }

    .startup-sec .footer-cols {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 40px;
      max-width: 1160px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 0 40px;
    }

    .startup-sec .footer-col h4 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--ink);
    }

   .startup-sec  .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
    }

   .startup-sec  .footer-col li a {
      display: block;
      padding: 9px 0;
      font-size: 13px;
      color: var(--gray-700);
    }

   .startup-sec  .footer-col li a:hover {
      color: var(--ink);
    }

    .startup-sec .footer-bottom {
      max-width: 1160px;
      margin: 0 auto;
      padding: 24px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      border-top: 1px solid var(--gray-300);
    }

    .startup-sec .social-icons {
      display: flex;
      gap: 8px;
    }

   .startup-sec  .social-icons a {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .startup-sec .compliance {
      display: flex;
      gap: 24px;
      font-size: 11px;
      color: var(--gray-700);
      font-weight: 600;
    }

   .startup-sec  .compliance small {
      display: block;
      font-weight: 400;
      color: var(--gray-500);
    }

   .startup-sec  .footer-final {
      max-width: 1160px;
      margin: 0 auto;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 14px;
      color: var(--gray-700);
    }

    .startup-sec .footer-final .links {
      display: flex;
      gap: 8px;
      align-items: center;
    }

   .startup-sec  .footer-final .links a {
      padding: 9px 10px;
      border-radius: 8px;
    }

    .startup-sec .footer-final .links a:hover {
      background: var(--gray-100);
    }

    .startup-sec .cookie-btn {
      background: var(--gray-100);
      padding: 9px 14px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 13px;
      border: none;
      cursor: pointer;
    }

    @media (max-width:900px) {
      .startup-sec .wrap {
        padding: 0 20px;
      }

     .startup-sec  .hero-inner {
        flex-direction: column;
      }

      .startup-sec .split,
     .startup-sec  .split.reverse {
        flex-direction: column;
      }

     .startup-sec .split-copy,
     .startup-sec  .split-copy h2,
     .startup-sec  .split-copy p {
        max-width: 100%;
      }

      .startup-sec .templates-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .startup-sec .footer-cols {
        grid-template-columns: repeat(2, 1fr);
      }

     .startup-sec  .article h3 {
        font-size: 30px;
      }
    }
.social-community{
    position: relative;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.social-community{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    border-radius: 28px;
}

.social-community-bottom-glow{
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    width: 120%;
    z-index: 0;
    pointer-events: none;
}

.social-community-bottom-glow img{
    display: block;
    width: 100%;
    height: auto;
    opacity: .9;
}

.social-community-header,
.social-community-grid{
    position: relative;
    z-index: 2;
}
/*compounding-sec*/
   .compounding-sec {
      width: 100%;
      padding: 80px 24px;
    }

    .compounding-sec-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .compounding-sec-header h1 {
      margin: 0 0 20px 0;
    }

    .compounding-sec-header p {
      font-size: 16px;
      color: #666666;
      line-height: 1.6;
      margin: 0;
    }

    .compounding-sec-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .compounding-sec-grid-item {
      padding: 20px;
      text-align: center;
    }

    .compounding-sec-grid-item:nth-child(3n) {
      border-right: none;
    }

    .compounding-sec-grid-item:nth-child(n+7) {
      border-bottom: none;
    }
.compounding-sec-icon svg {
    stroke: #0866FF !important;
}
  .compounding-sec-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50% !important;
    background-color: #edf5ff !important;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compounding-sec-icon svg {
      width: 32px;
      height: 32px;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

.compounding-sec-grid-item h3 {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    white-space: nowrap;

    background: linear-gradient(139.29deg, #202020 43.8%, #8f8f8f 105%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .compounding-sec-grid-item p {
      font-size: 13px;
      color: #666666;
      line-height: 1.6;
      margin: 0;
      max-width: 280px;
      margin: 0 auto;
    }
.compounding-sec-grid-item {
    display: flex;
	gap: 30px;
        align-items: center;
}
.icon-content {
    text-align: left;
}
    /* Icon Colors */
    .compounding-sec-icon-context svg { stroke: #ff523b; }
    .compounding-sec-icon-content svg { stroke: #22c55e; }
    .compounding-sec-icon-conversations svg { stroke: #a855f7; }
    .compounding-sec-icon-collaborations svg { stroke: #f59e0b; }
    .compounding-sec-icon-communities svg { stroke: #3b82f6; }
    .compounding-sec-icon-commerce svg { stroke: #7dd3fc; }
    .compounding-sec-icon-coins svg { stroke: #2563eb; }
    .compounding-sec-icon-confidentiality svg { stroke: #ea580c; }
    .compounding-sec-icon-care svg { stroke: #10b981; }
    
    @media (max-width: 992px) {
      .compounding-sec-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .compounding-sec-grid-item:nth-child(3n) {

        border-right: none;
      }
      .compounding-sec-grid-item:nth-child(n+7) {
        border-bottom: 1px solid #f0f0f0;
      }
      .compounding-sec-grid-item:last-child,
      .compounding-sec-grid-item:nth-last-child(2) {
        border-bottom: none;
      }
    }
    
    @media (max-width: 640px) {
      .compounding-sec-grid {
        grid-template-columns: 1fr;
      }
      .compounding-sec-grid-item {
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0;
      }
      .compounding-sec-grid-item:last-child {
        border-bottom: none;
      }
    }
/*logo-slider-section*/
:root {
    --icon-size: 52px;
    --icon-radius: 14px;
    --icon-border: #eaedf3;
    --gap: 16px;
    --bg-color: #FFFFFF;
    /* JS will set --shift based on actual width */
    --shift: 0px; 
}

.center-logo img {
    width: 90px;
}

.logos-slider-section {
    background-color: var(--bg-color);
}

.integrations-wrapper {
    position: relative;
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: var(--gap);
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-track.left {
    animation: scrollLeft 45s linear infinite;
}

.marquee-track.right {
    animation: scrollRight 45s linear infinite;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--shift)); }
}

@keyframes scrollRight {
    0% { transform: translateX(var(--shift)); }
    100% { transform: translateX(0); }
}

.icon-box {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--icon-radius);
    border: 1px solid var(--icon-border);
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.icon-box:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: #d0d4dc;
    z-index: 2;
}

.icon-box i {
    width: 26px;
    height: 26px;
    color: #555; /* Default lucide icon color */
}

.center-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.center-logo {
    width: 136px;
    height: 136px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.03),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}

.center-logo:hover {
    transform: scale(1.08);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}

.center-logo img {
    margin-top: 2px;
}

.fade-left,
.fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    z-index: 5;
    pointer-events: none;
}

.fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Icon specific colors */
/* Icon specific colors */
.lucide-message-square-more { stroke: #0ea5e9; }
.lucide-file-text { stroke: #22c55e; }
.lucide-video { stroke: #fb923c; }
.lucide-calendar-days { stroke: #3b82f6; }
.lucide-briefcase-business { stroke: #f59e0b; }
.lucide-party-popper { stroke: #c084fc; }
.lucide-users-round { stroke: #ef4444; }
.lucide-circle-pile { stroke: #16a34a; }
.lucide-hand-coins { stroke: #2563eb; }

 /*team-sec*/
       :root {
            --ff-guides-black: #000;
            --ff-guides-white: #fff;
            --ff-guides-green: #0b7443;
            --ff-guides-card-bg: #fee9d1;
        }

        .ff-guides-section * {
            box-sizing: border-box;
        }

        .ff-guides-section {
            color: var(--ff-guides-black);
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            padding: 0 16px;
        }

        .ff-guides-intro {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            max-width: 850px;
            margin: 0 auto;
            text-align: center;
        }

        .ff-guides-intro p {
            margin: 0;
            max-width: 538px;
            font-size: clamp(14px, 2vw, 16px);
            line-height: 1.5;
            letter-spacing: -0.05px;
            color: #444;
        }

        .ff-guides-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 44px;
            padding: 0 8px;
            border-radius: 20px;
            font-size: 14px;
            letter-spacing: -0.056px;
            font-weight: 500;
            color: var(--ff-guides-black);
            text-decoration: underline;
            cursor: pointer;
            background: none;
            border: none;
        }

        /* Photo strip Base */
        .ff-guides-photo-row {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 340px;
            margin-top: 28px;
            width: 100%;
        }

        .ff-guides-photo-card {
            width: 212px;
            height: 282px;
            margin-left: -15px;
            border-radius: 12px;
            background: var(--ff-guides-card-bg);
            box-shadow:
                0 15px 10px -5px rgba(0, 0, 0, 0.05),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ff-guides-photo-card:first-child {
            margin-left: 0;
              background: linear-gradient(0deg, #17AEE8 0%, #D1EFFA 100%);
        }

        .ff-guides-photo-card img,
        .ff-guides-photo-card video,
        .ff-guides-photo-card iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 12px;
        }

        .ff-guides-photo-card video,
        .ff-guides-photo-card iframe,
        .ff-guides-card-iframe {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            border: none;
        }

        .ff-guides-photo-card iframe,
        .ff-guides-card-iframe {
            width: 100% !important;
            height: 100% !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
        }

        /* Desktop Rotation Overlay */
        .ff-guides-r1 {
            transform: rotate(-2.65deg);
            z-index: 1;
            background: #F0F8FF;
        }

        .ff-guides-r2 {
            transform: rotate(1.59deg) translateY(4px);
            z-index: 2;
background: linear-gradient(0deg, #FE9901 0%, #FFEFD6 100%);   
        }

        .ff-guides-r3 {
            transform: rotate(-1.04deg);
            z-index: 3;
background: linear-gradient(0deg, #F00F73 0%, #FCCFE3 100%);     
        }

        .ff-guides-r4 {
            transform: rotate(2.84deg) translateY(2px);
            z-index: 4;
background: linear-gradient(0deg, #DDE51A 0%, #F8FAD1 100%);
        }

        .ff-guides-r5 {
            transform: rotate(-1.26deg);
            z-index: 5;
background: linear-gradient(180deg, #D2DFF9 0%, #789EED 100%);
        }

        .ff-guides-r6 {
            transform: rotate(1.73deg);
            z-index: 6;
background: linear-gradient(180deg, #D9F2E4 0%, #43BC77 100%);
        }

        @media (min-width: 992px) {
            .ff-guides-photo-row .ff-guides-photo-card:hover {
                transform: translateY(-24px) rotate(0deg) scale(1.08) !important;
                z-index: 20 !important;
                box-shadow:
                    0 30px 30px -10px rgba(0, 0, 0, 0.15),
                    0 15px 15px -10px rgba(0, 0, 0, 0.1) !important;
            }

            .ff-guides-photo-row .ff-guides-photo-card:hover video,
            .ff-guides-photo-row .ff-guides-photo-card:hover iframe {
                opacity: 1;
            }
        }

        /* Laptop Breakpoint Optimization (992px - 1199px) */
        @media (min-width: 992px) and (max-width: 1199px) {
            .ff-guides-photo-card {
                width: 180px;
                height: 245px;
                margin-left: -12px;
            }

            .ff-guides-photo-row {
                height: 300px;
            }
        }

        /* Primary Buttons */
        .ff-guides-cta-wrap {
            display: flex;
            justify-content: center;
            margin-top: 36px;
        }

        .ff-guides-cta-button,
        .ff-guides-choose-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            padding: 0 32px;
            border-radius: 12px;
            background: #000000;
            color: #ffffff;
            font-size: 15px;
            letter-spacing: -0.05px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .ff-guides-cta-button:hover,
        .ff-guides-choose-btn:hover {
            background: #e5e5e5;
            color: #000000;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        /* Tooltip */
        .ff-guides-mouse-tooltip {
            position: fixed;
            top: 0;
            left: 0;
            background: #fff;
            color: var(--ff-guides-black);
            padding: 10px 18px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 500;
            pointer-events: none;
            opacity: 0;
            transform: translate(-50%, -100%) scale(0.95);
            transition: opacity 0.2s, transform 0.2s;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            z-index: 30;
            white-space: nowrap;
            margin-top: -10px;
        }

        .ff-guides-mouse-tooltip.ff-guides-visible {
            opacity: 1;
            transform: translate(-50%, -100%) scale(1);
        }

        /* Modal Overlay */
        .ff-guides-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(6px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            padding: 16px;
        }

        .ff-guides-modal-overlay.ff-guides-active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Modal Content */
        .ff-guides-modal-content {
            background: #fff;
            border-radius: 24px;
            width: 860px;
            max-width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            position: relative;
            transform: translateY(20px) scale(0.98);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow-y: auto;
        }

        .ff-guides-modal-overlay.ff-guides-active .ff-guides-modal-content {
            transform: translateY(0) scale(1);
        }

        .ff-guides-modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: #f2f2f2;
            border: none;
            width: 28px !important;
            height: 46px !important;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #000000;
            transition: all 0.25s ease;
            z-index: 20;
        }

        .ff-guides-modal-close:hover {
            background: #000000;
            color: #ffffff;
            transform: scale(1.08);
        }

        /* SVG Icon Fixes for Lucide Icons */
        .ff-guides-modal-close svg,
        .ff-guides-mute-btn svg,
        .ff-guides-nav-btn svg,
        .ff-guides-section svg,
        svg.lucide {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            min-height: 22px !important;
            max-width: 22px !important;
            max-height: 22px !important;
            flex-shrink: 0 !important;
            stroke-width: 2px !important;
            fill: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            overflow: visible !important;
        }

        .ff-guides-modal-close svg {
            color: #000000 !important;
            stroke: #000000 !important;
        }

        .ff-guides-modal-close:hover svg {
            color: #ffffff !important;
            stroke: #ffffff !important;
        }

        .ff-guides-mute-btn svg {
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
            color: #ffffff !important;
            stroke: #ffffff !important;
        }

        .ff-guides-section svg path,
        .ff-guides-section svg line,
        .ff-guides-section svg polygon,
        .ff-guides-section svg polyline,
        .ff-guides-modal-overlay svg path,
        .ff-guides-modal-overlay svg line,
        .ff-guides-modal-overlay svg polygon,
        .ff-guides-modal-overlay svg polyline {
            stroke: currentColor !important;
            stroke-width: 2px !important;
            fill: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .ff-guides-modal-top {
            display: flex;
            padding: 24px;
            gap: 36px;
            min-height: 440px;
        }

        .ff-guides-modal-left {
            flex: 0 0 42%;
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            background: var(--ff-guides-card-bg);
            min-height: 280px;
        }

        .ff-guides-modal-left video,
        .ff-guides-modal-left iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .ff-guides-modal-left iframe {
            width: 100% !important;
            height: 100% !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
        }

        .ff-guides-mute-btn {
            position: absolute;
            top: 16px;
            left: 16px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 28px !important;
            height: 46px !important;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s ease;
            color: #ffffff;
            z-index: 10;
        }

        .ff-guides-mute-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            transform: scale(1.08);
        }

        .ff-guides-modal-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-right: 20px;
        }

        .ff-guides-modal-right h2 {
            margin: 0 0 4px 0;
            font-size: clamp(24px, 3vw, 34px);
            font-weight: 600;
            letter-spacing: -0.5px;
        }

        .ff-guides-role {
            font-size: 14px;
            color: #666;
            margin: 0 0 16px 0;
        }

        .ff-guides-desc {
            font-size: 15px;
            line-height: 1.5;
            color: #444;
            margin-bottom: auto;
        }

        .ff-guides-desc p {
            margin: 0 0 12px 0;
        }

        .ff-guides-watch-full-wrap {
            margin-top: 24px;
        }

        .ff-guides-watch-full-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #000;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            padding: 10px 22px;
            border-radius: 30px;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .ff-guides-watch-full-btn:hover {
            background: #222;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        }

        .ff-guides-watch-full-btn svg {
            color: #ffffff;
            flex-shrink: 0;
        }

        .ff-guides-style-sec {
            margin-top: 24px;
        }

        .ff-guides-style-sec h4 {
            font-size: 14px;
            font-weight: 500;
            color: #222;
            margin: 0 0 10px 0;
        }

        .ff-guides-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .ff-guides-tags span {
            background: #f4f7f9;
            color: #222;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ff-guides-modal-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 28px;
            border-top: 1px solid #f0f0f0;
            background: #fff;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }

        .ff-guides-nav-btn {
            background: none;
            border: none;
            border-radius: 0;
            color: #000000;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.2s, opacity 0.2s;
            padding: 8px 0;
            width: auto;
        }

        .ff-guides-nav-btn.ff-guides-prev {
            justify-content: flex-start;
        }

        .ff-guides-nav-btn.ff-guides-next {
            justify-content: flex-end;
        }

        .ff-guides-nav-btn:hover {
            color: #444444;
            opacity: 0.8;
        }

        /* Mobile & Tablet Responsiveness (< 992px) */
        @media (max-width: 991px) {
            .ff-guides-photo-row {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                align-items: center !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                scroll-snap-type: x mandatory !important;
                touch-action: pan-x !important;
                -webkit-overflow-scrolling: touch !important;
                gap: 16px !important;
                height: auto !important;
                padding: 20px 16px 30px 16px !important;
                margin-top: 20px !important;
                width: 100% !important;
                scrollbar-width: none !important;
                cursor: grab;
            }

            .ff-guides-photo-row::-webkit-scrollbar {
                display: none !important;
            }

            .ff-guides-photo-card {
                flex: 0 0 200px !important;
                width: 200px !important;
                height: 270px !important;
                margin-left: 0 !important;
                transform: none !important;
                scroll-snap-align: start !important;
                border-radius: 12px !important;
            }

            .ff-guides-photo-row .ff-guides-photo-card:hover {
                transform: translateY(-4px) !important;
            }

            .ff-guides-modal-top {
                flex-direction: column;
                gap: 20px;
                padding: 20px 16px;
                min-height: auto;
            }

            .ff-guides-modal-left {
                width: 100%;
                height: 280px;
                flex: 0 0 auto;
            }

            .ff-guides-modal-right {
                padding-right: 0;
            }
        }

        /* Small Mobile Responsiveness (< 576px) */
        @media (max-width: 575px) {
            .ff-guides-photo-card {
                flex: 0 0 170px !important;
                width: 170px !important;
                height: 230px !important;
            }

            .ff-guides-modal-left {
                height: 240px;
            }

            .ff-guides-modal-footer {
                flex-wrap: wrap;
                gap: 12px;
                justify-content: space-between;
                padding: 14px 16px;
            }

            .ff-guides-choose-btn {
                width: 100%;
                order: -1;
            }

            .ff-guides-nav-btn {
                font-size: 14px;
            }
        }
.best-for-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    margin-top: 12px;
}

.best-for-tags span{
    position: relative;
    padding-left: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #2F2F2F;
    font-weight: 400;
}

.best-for-tags span::before{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5B5B5B;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile */
@media (max-width: 767px){
    .best-for-tags{
        gap: 10px 14px;
    }

    .best-for-tags span{
        font-size: 14px;
    }
}
/*tab-sec*/
   .ai-solutions-page {
    width: 95%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p.ai-solutions-subtitle {
    text-align: center;
}
        .services-tabs {
            display: flex;
            gap: 16px;
            align-items: center;
            justify-content: center;
            padding-bottom: 40px;
            flex-wrap: wrap;
        }

        .ai-solutions-tab {
            border: 1.5px dashed #cccccc;
            border-radius: 40px;
            padding: 10px 24px;
            font-weight: 500;
            font-size: 14px;
            color: #646464;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .ai-solutions-tab:hover {
            border-color: #a0a0a0;
        }

        .ai-solutions-tab.active {
            background: #ffffff;
            border: 1px solid #0091ff;
            color: #0091ff;
            /* Box shadow to match the glowing light blue effect if necessary */
            box-shadow: inset 0 0 0 1px rgba(0, 145, 255, 0.1);
        }

        .ai-solutions-card {
            background: #f6f5f2;
            border-radius: 32px;
            width: 100%;
            padding: 48px 56px;
            box-sizing: border-box;
            gap: 64px;
        }

        .ai-solutions-tab-pane {
            display: none;
        }

        .ai-solutions-tab-pane.active {
            display: flex;
        }

        .ai-solutions-card-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ai-solutions-heading {
            margin: 0 0 16px 0;
            font-weight: 600;
            font-size: 42px;
            line-height: 1.2;
            color: #222222;
        }

        .ai-solutions-desc {
            margin: 0 0 40px 0;
            font-size: 17px;
            line-height: 1.5;
            color: #222222;
            max-width: 440px;
        }

        .best-for-section {
            margin-bottom: 36px;
        }

        .best-for-label {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 500;
            color: #000;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .best-for-list {
            font-size: 14px;
            color: #000;
            line-height: 1.9;
            font-weight: 500;
        }

        .best-for-list span {
            display: inline-block;
        }

        .best-for-list .dot {
            color: #000;
            margin: 0 8px;
            font-size: 14px;
        }

        .explore-btn {
            background: #222222;
            color: #ffffff;
            border: none;
            border-radius: 30px;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            align-self: flex-start;
            text-decoration: none;
            transition: background 0.3s ease;
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin-top: 8px;
        }

        .explore-btn:hover {
            background: #000000;
        }

        .ai-solutions-card-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ai-solutions-agent-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .ai-solutions-agent-item {
            background: #ffffff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 12px 20px;
            min-height: 64px;
            box-sizing: border-box;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            transition: transform 0.2s ease;
        }

        .ai-solutions-agent-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .ai-solutions-agent-item img {
            width: 44px;
            height: 44px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .ai-solutions-agent-item p {
            margin: 0;
            font-weight: 500;
            font-size: 15px;
            color: #222222;
        }

        /* Mobile Responsiveness */
        @media (max-width: 900px) {
            .ai-solutions-card {
                padding: 40px 24px;
                border-radius: 24px;
                gap: 40px;
            }

            .ai-solutions-tab-pane.active {
                flex-direction: column;
            }

            .ai-solutions-heading {
                font-size: 32px;
            }

            .services-tabs {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                width: 100%;
                padding-bottom: 24px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .services-tabs::-webkit-scrollbar {
                display: none;
            }
			.main-heading {
    font-size: 28px !important;
    line-height: 1.15;
    margin-bottom: 0 !important;
    
}
			h2.main-heading-white {
    font-size: 28px;
}
        }
/*module-coummunity-sec*/
  :root{
    --bg: #000;
    --panel: #0d0d0d;
    --line: #2a2a2a;
    --text-primary: #eeeeee;
    --text-secondary: #b4b4b4;
    --mono: 'Courier New', monospace;
  }
section.module-coummnity {
    background: #000;
}
 .social-community{
    padding: 80px 0;
    max-width: 1160px;
    margin: 0 auto;
  }

  .social-community .social-community-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    margin-bottom: 56px;
  }

  .social-community .social-community-header h1{
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 650;
    font-size: 44px;
    letter-spacing: -1.76px;
    margin:0;
    color:#fff;
  }
  .social-community .social-community-header h1 sup{
    font-size: 24px;
    letter-spacing: -0.24px;
    top: -0.3em;
  }

  .social-community .social-community-header p{
    margin:0;
    font-size: 17px;
    letter-spacing: -0.34px;
    color: var(--text-secondary);
    line-height: 26px;
  }

  .social-community .social-community-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 0.75px solid var(--line);
  }

  @media (max-width: 900px){
    .social-community .social-community-grid{ grid-template-columns: 1fr; }
  }

  .social-community .brain-feature-card{
    background: #000;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    min-height: 394px;
    overflow:hidden;
  }

  .social-community .brain-feature-card-copy{
    padding: 24px 24px 0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .social-community .brain-feature-card-copy .social-community-eyebrow{
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--text-primary);
  }

  .social-community .brain-feature-card-copy p{
    margin:0;
    max-width: 296px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: var(--text-secondary);
  }

  .social-community .brain-feature-card-visual{
    position: relative;
    height: 216px;
    overflow: hidden;
  }

  /* ---------- Card 1: Memory & Preferences ---------- */
  .social-community .social-community-memory-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }
  .social-community .social-community-memory-card{
    width: 220px;
    border-radius: 15px;
    background: linear-gradient(to bottom, #111 24%, #000);
    padding: 14px 15px;
    box-shadow: 0 0 60px 10px rgba(120,120,255,0.08);
  }
  .social-community .social-community-memory-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .social-community .social-community-memory-card-top span{
    font-size:12px;
    letter-spacing:-0.24px;
    color: var(--text-primary);
  }
  .social-community .social-community-memory-card-top img{ width:18px; height:18px; }
  .social-community .social-community-memory-card-label{
    margin-top: 18px;
    font-family: 'Courier New', monospace;
    font-size:10px;
    text-transform: uppercase;
    color:#868686;
  }
  .social-community .social-community-memory-card-value{
    margin-top:6px;
    font-size:24px;
    letter-spacing:-0.2px;
    color: var(--text-primary);
  }

  /* ---------- Card 2: Every AI, Unlimited ---------- */
  .social-community .social-community-ai-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }
  .social-community .social-community-ai-stack{
    position:relative;
    width:144px;
    height:156px;
  }
  .social-community .social-community-ai-pill{
    position:absolute;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:60px;
    border: 0.75px solid rgba(255,255,255,0.12);
    background: rgba(226,232,255,0.03);
    padding: 7px 14px;
    white-space:nowrap;
    box-shadow: inset 0 -18px 40px -12px rgba(226,232,255,0.12);
  }
  .social-community .social-community-ai-pill img{ width:16px; height:16px; }
  .social-community .social-community-ai-pill span{ font-size:14px; color: rgba(255,255,255,0.8); }
  .social-community .social-community-ai-pill.social-community-gemini{ top:88px; left:10px; }
  .social-community .social-community-ai-pill.social-community-claude{ top:0; left:7px; }
  .social-community .social-community-ai-pill.social-community-chatgpt{
    top:37px; left:0;
    width:144px; height:45px;
    border-radius:90px;
    justify-content:center;
    background: linear-gradient(90deg, rgba(75,142,204,0.35), rgba(228,74,193,0.35));
  }
  .social-community .social-community-ai-pill.social-community-chatgpt span{ color:#fff; font-size:16px; }

  /* ---------- Card 3: Multiplayer AI ---------- */
  .social-community .social-community-team-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    gap: 8px;
    padding-bottom: 10px;
  }
  .social-community .social-community-team-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:16px;
    border:0.75px solid rgba(255,255,255,0.07);
    background: #111;
    padding: 12px 16px;
    width: 200px;
    box-shadow: 0 -12px 28px 0 rgba(0,0,0,0.55);
  }
  .social-community .social-community-team-chip.social-community-dim{ opacity:0.55; width: 178px; }
  .social-community .social-community-team-chip.social-community-active{ background:#030303; width: 222px; }
  .social-community .social-community-team-left{ display:flex; align-items:center; gap:10px; }
  .social-community .social-community-team-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
  .social-community .social-community-team-name{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:15px; letter-spacing:-0.2px; color: var(--text-primary); }
  .social-community .social-community-team-dot{ width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.15); flex-shrink:0; }
  .social-community .social-community-team-dot.social-community-on{ border-color:#00c07a; display:flex; align-items:center; justify-content:center; }
  .social-community .social-community-team-dot.social-community-on::after{ content:""; width:10px; height:10px; border-radius:50%; background:#00c07a; }

  /* ---------- Card 4: Connected Apps & MCP ---------- */
  .social-community .social-community-apps-visual{
    position:relative;
    height:100%;
  }
  .social-community .social-community-apps-icons{
    position:relative;
    height: 170px;
  }
  .social-community .social-community-app-icon{
    position:absolute;
    width:40px; height:40px;
    border-radius:20px;
    background: rgba(226,232,255,0.04);
    border: 0.75px solid rgba(226,232,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .social-community .social-community-app-icon img{ width:22px; height:22px; }
  .social-community .social-community-apps-icons .social-community-center{
    position:absolute;
    left:50%; top:38px; transform:translateX(-50%);
    width:72px; height:72px;
  }
  .social-community .social-community-apps-icons .social-community-center img{ width:100%; height:100%; }
  .social-community .social-community-apps-icons .social-community-i1{ left:14%; top:28px; }
  .social-community .social-community-apps-icons .social-community-i2{ left:2%; top:96px; }
  .social-community .social-community-apps-icons .social-community-i3{ right:12%; top:40px; }
  .social-community .social-community-apps-icons .social-community-i4{ right:0%; top:90px; }
  .social-community .social-community-mcp-pill{
    display:flex;
    align-items:center;
    gap:6px;
    justify-content:center;
    margin: 8px auto 0;
    width:fit-content;
    padding:7px 14px;
    border-radius:100px;
    background: rgba(255,255,255,0.12);
    border:0.75px solid rgba(255,255,255,0.08);
    font-family:'Courier New',monospace;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:-0.1px;
  }

  /* ---------- Card 5: Ambient Intelligence ---------- */
  .social-community .social-community-ambient-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top: 16px;
    position:relative;
    height:100%;
  }
  .social-community .social-community-ambient-card{
    width: 298px;
    height: 62px;
    border-radius:18px;
    border:0.75px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(226,232,255,0.03), rgba(226,232,255,0)) , #030303;
    display:flex;
    align-items:center;
    gap:12px;
    padding: 0 20px;
    box-shadow: 0 -13px 32px 0 rgba(0,0,0,0.55);
    position:relative;
  }
  .social-community .social-community-ambient-card img.social-community-icon{ width:18px; height:18px; }
  .social-community .social-community-ambient-card span{ font-size:14px; color:var(--text-primary); }
  .social-community .social-community-ambient-card img.social-community-brain{ width:30px; height:30px; margin-left:auto; }
  .social-community .social-community-ambient-tags{ position:relative; width:100%; height:90px; margin-top: 20px; }
  .social-community .social-community-tag{
    position:absolute;
    display:flex;
    align-items:center;
    gap:6px;
    background: rgba(255,255,255,0.07);
    border-radius:3px;
    padding: 2px 7px;
    font-family:'Plus Jakarta Sans','Inter',sans-serif;
    font-size:14px;
    letter-spacing:-0.32px;
    color: var(--text-primary);
    white-space:nowrap;
  }
  .social-community .social-community-tag .social-community-sq{ width:7px; height:7px; border-radius:1px; }
  .social-community .social-community-tag.social-community-t1{ top:0; left:20px; }
  .social-community .social-community-tag.social-community-t1 .social-community-sq{ background:#6647f0; }
  .social-community .social-community-tag.social-community-t2{ top:36px; left:88px; }
  .social-community .social-community-tag.social-community-t2 .social-community-sq{ background:#16c0a4; }
  .social-community .social-community-tag.social-community-t3{ top:64px; left:8px; opacity:0.4; font-size:10.5px; }
  .social-community .social-community-tag.social-community-t3 .social-community-sq{ background:#6647f0; }
  .social-community .social-community-tag.social-community-t4{ top:16px; left:160px; opacity:0.4; font-size:9.5px; }
  .social-community .social-community-tag.social-community-t4 .social-community-sq{ background:#6647f0; }

  /* ---------- Card 6: Deep Search ---------- */
  .social-community .social-community-search-visual{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .social-community .social-community-search-visual img.social-community-bloom{
    width: 220px;
    opacity: 0.95;
  }
  .social-community .social-community-search-visual .social-community-fade{
    position:absolute;
    right:0; top:0; bottom:0;
    width:100px;
    background: linear-gradient(to left, #000, rgba(0,0,0,0));
  }

  @media (max-width: 480px){
    .social-community .social-community-header h1{ font-size: 32px; letter-spacing:-1.2px; }
    .social-community{ padding: 48px 16px 32px; }
  }
/*blog*/
.thrico-blog-wrapper {
        border-radius: 24px;
    }
span.thrico-author {
    font-weight: 700;
    color: #0E0B08;
}
    /* Tabs */
    .thrico-blog-tabs-outer {
        display: flex;
        justify-content: center;
        margin-bottom: 32px;
    }

    .thrico-blog-tabs {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        border-radius: 40px;
        padding: 6px;
    }

   .thrico-tab {
   border: 1.5px solid #cccccc;
    border-radius: 40px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 14px;
    color: #646464;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

    .thrico-tab:hover {
        color: #2f6bff;
    }

    .thrico-tab.active {
      border: 1px solid #0091ff;
    color: #0091ff;
    box-shadow: inset 0 0 0 1px rgba(0, 145, 255, 0.1);
    --border-angle: 0turn;
    color: rgb(9, 102, 255);
    border-width: 1.5px;
    border-style: dashed;
    border-color: transparent;
    border-image: none;
    border-radius: 999px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--border-angle), transparent 15%, #0966ff 35%, #ff5733 50%, #0966ff 65%, transparent 85%) border-box;
    animation: 3s linear 0s infinite normal none running border-spin;
    }
.tsb-title .light{
    font-weight:300;
}

.tsb-title .bold{
    font-weight:700;
}
    /* Mobile: horizontal scroll instead of wrapping */
    @media (max-width: 640px) {
        .thrico-blog-tabs-outer {
            justify-content: flex-start;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 4px;
        }

        .thrico-blog-tabs-outer::-webkit-scrollbar {
            display: none;
        }

        .thrico-blog-tabs {
            display: inline-flex;
            flex-wrap: nowrap;
            width: max-content;
            background: #fff;
        }

        .thrico-tab {
            padding: 8px 16px;
            font-size: 13px;
        }
    }

    /* Grid */
    .thrico-blog-posts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        transition: opacity .2s ease;
    }
/*footer-css*/
 :root {
      --thrico-bg-dark: #ffffff;
      --thrico-card-bg: #f4f3f0;
      --thrico-text-muted: #55534e;
      --thrico-text-light: #000000;
      --thrico-accent: #fbbf24;
    }
 .dark-cta {
	     width: 95%;
    max-width: 80rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    }

    .dark-cta .box {
      position: relative;
      background: #0b0b12;
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      align-items: center;
      min-height: 364px;
      border: 1px solid rgba(96, 96, 163, .3);
    }

    .dark-cta .glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(600px 500px at 85% -10%, rgba(102, 71, 240, .55), rgba(247, 54, 153, .35) 45%, transparent 70%);
      pointer-events: none;
    }
a.white-btn {
   background-color: #f0f0f0;
    color: #000;
	padding: 8px 16px;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.white-btn:hover{
        background-color: #dedede !important;
    transform: unset !important;
}
   a.thrico-btns {
                    background-color: #000 !important;
    color: #ffffff;
    font-family: 'Inter';
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
    transition: all 0.2s ease;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

                }

                a.thrico-btns:hover {
                   background-color: #202020cc !important;
    transform: unset !important;
                }
    .dark-cta .copy {
      position: relative;
      padding: 50px;
      max-width: 565px;
    }

    .dark-cta .copy img {
      height: 32px;
      margin-bottom: 20px;
    }

    .dark-cta .copy h3 {
      font-size: 34px;
      font-weight: 650;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -.03em;
      margin-bottom: 12px;
    }

.dark-cta .copy p {
      font-size: 18px;
      color: #fff;
      opacity: .9;
      margin-bottom: 24px;
    }
/* ===== Career Form Styling ===== */
.career-form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 auto;
  padding: 32px;
background: linear-gradient(360deg, rgba(162, 223, 246, 0.6) 0%, rgba(209, 239, 250, 0.6) 100%);
  border-radius: 8px;
}
.wpcf7-list-item {
    display: inline-block;
    margin: 0;
}
.career-form p {
    margin-bottom: 20px;
}
.privacy-check span.wpcf7-list-item-label {
    font-size: 15px;
}
.career-form .half {
  flex: 1 1 calc(50% - 10px);
  min-width: 240px;
}

.career-form .third {
  flex: 1 1 calc(33.333% - 14px);
  min-width: 200px;
}

.career-form .full {
  flex: 1 1 100%;
}

/* Inputs, select, textarea */
.career-form input[type="text"],
.career-form input[type="email"],
.career-form input[type="tel"],
.career-form select,
.career-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: #1a1a1a;
  background: #fafafa;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.career-form input:focus,
.career-form select:focus,
.career-form textarea:focus {
  border-color: #000;
  background: #fff;
}

.career-form textarea {
    min-height: 116px;
    height: 52px;
    resize: vertical;
}

.career-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* File upload field */
.career-form input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed #b5b5b5;
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  cursor: pointer;
}

.career-form small {
  display: block;
  margin-top: 6px;
  color: #777;
  font-size: 12px;
}

/* Privacy checkbox row */
.career-form .privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

.career-form .privacy-check input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #000;
}

/* Submit button */
.career-form input[type="submit"], .career-form .wpcf7-submit {
    background-color: #000 !important;
    color: #ffffff;
    font-family: 'Inter';
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.career-form input[type="submit"]:hover,
.career-form .wpcf7-submit:hover {
  opacity: 0.85;
}

/* Validation messages */
.career-form .wpcf7-not-valid-tip {
  color: #d92d20;
  font-size: 12px;
  margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .career-form .third {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 600px) {
  .career-form {
    padding: 20px;
    gap: 14px;
  }
  .career-form .half,
  .career-form .third {
    flex: 1 1 100%;
  }
}

.career-values-section {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.career-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}

.career-value-card {
  position: relative;
  background: #F8F9FA;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.04);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.career-value-copy {
  padding: 26px 22px 0;
}

.career-value-copy h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
}

.career-value-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
  letter-spacing: -0.02em;
}

.career-value-visual {
  position: relative;
  height: 220px;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.career-value-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.career-visual-growth {
  background: rgba(255, 255, 255, 0.14);
}

.career-visual-passion {
  background: rgba(255, 255, 255, 0.14);
}

.career-visual-hardwork {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 991px) {
  .career-values-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .career-value-card {
    min-height: 360px;
  }
}

@media (max-width: 575px) {
  .career-values-section {
    padding: 0 16px;
  }

  .career-value-card {
    min-height: 320px;
  }

  .career-value-copy {
    padding: 22px 18px 0;
  }

  .career-value-copy p {
    font-size: 13px;
  }
}

    .thrico-footer {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }
a.brand-links {
    font-size: 14px;
    text-decoration: underline;
}
a.brand-links:hover{
    color:#000;
}
    /* Intro Section */
    .thrico-footer-intro {
      text-align: center;
      padding: 100px 24px 80px;
      position: relative;
      z-index: 10;
      max-width: 600px;
    }

    .thrico-intro-title {
      font-size: 32px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin: 0 0 16px;
      color: #000;
    }

    .thrico-intro-desc {
      font-size: 16px;
      color: var(--thrico-text-muted);
      margin: 0 0 32px;
    }

    .thrico-btn-group {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .thrico-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      font-size: 15px;
      font-weight: 500;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .thrico-btn svg {
      margin-left: 8px;
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .thrico-btn:hover svg {
      transform: translateX(4px);
    }

    .thrico-btn-primary {
      background-color: #000;
      color: #000;
      border: 1px solid #000;
    }

    .thrico-btn-primary:hover {
      background-color: #333333;
    }

    .thrico-btn-secondary {
      background-color: transparent;
      color: #000;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .thrico-btn-secondary:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    /* Video/Background Layer */
    .thrico-footer-stack {
      width: 100%;
      position: relative;
      padding-top: 40px;
    }

    .thrico-bg-simulation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://thrico.com/wp-content/uploads/2026/08/Vector.svg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    scale: 1.1;
}

    .thrico-bg-simulation::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
      pointer-events: none;
    }

    /* The Card Wrapper */
    .thrico-card-wrapper {
      width: 95%;
      max-width: 80rem;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

   .thrico-footer-card {
    background-color:#fff;
    padding: 48px 48px 0;
    border: 0;
    border-radius: 3rem;
    margin-bottom: 48px;
}

.thrico-footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.thrico-footer-links a {
  font-size: 14px;
  color: #55534e;
  text-decoration: none;
 transition: color 0.2s ease;
}

.thrico-footer-links a:hover {
     color: #000;
}
    /* Grid */
    .thrico-footer-grid {
      grid-column-gap: 2.5rem;
      grid-row-gap: 1.5rem;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-auto-columns: 1fr;
      display: grid;
		margin-bottom: 48px;
    }

    /* Place Customers and Legal in the correct columns on desktop */
    .thrico-col-customers {
      grid-column: 1;
    }
    .thrico-col-legal {
      grid-column: 4;
    }

    .thrico-col-header {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #000;
    }
.thrico-col-list li{
	margin:0 !important;
}
    .thrico-col-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .thrico-link {
      color: var(--thrico-text-muted);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s ease;
      position: relative;
    }

    .thrico-link:hover {
      color: #000;
    }

    .thrico-jobs-link {
      display: inline-flex;
      align-items: center;
    }

    .thrico-jobs-link::after {
      content: 'We are hiring!';
      margin-left: 8px;
      background-color: var(--thrico-accent);
      color: #000;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      opacity: 0;
      transform: translateX(-4px);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .thrico-jobs-link:hover::after {
      opacity: 1;
      transform: translateX(0);
    }


.thrico-brand img {
    width: 97px;
}
    /* Credit Bar */
  .thrico-credit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 24px;
}

    .thrico-brand {
     display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    }
.thrico-cta-card {
    background: linear-gradient(115deg, #111111 30%, #523b7a 65%, #2f69e6 100%);
    border-radius: 24px;
    padding: 72px;
    display: flex;
    gap: 80px;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    color: #fff;
}
.thrico-cta-logo img {
    width: 213px;
}
.thrico-cta-wrapper {
    width: 95%;
    max-width: 80rem;
    margin: 80px auto 60px auto;
    position: relative;
    z-index: 10;
}
.thrico-cta-content {
    flex: 1;
    max-width: 55%;
}
.thrico-cta-timeline {
    flex: 1;
    position: relative;
    padding-left: 33px;
    margin-top: 20px;
}

.thrico-timeline-line {
    position: absolute;
    top: 6px;
    bottom: 19px;
    left: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
}
.thrico-timeline-item {
    position: relative;
    padding-bottom: 18px;
}
.thrico-timeline-dot {
    position: absolute;
    left: -37px;
    top: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.2);
}
.thrico-timeline-text h4 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    padding: 0;
}
.thrico-timeline-text h5 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}
.thrico-timeline-text p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.thrico-cta-logo {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
}
.thrico-cta-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 24px 0;
    letter-spacing: -0.03em;
    color: #fff;
}
.thrico-cta-desc {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 40px 0;
}
.thrico-cta-actions {
    display: flex;
    gap: 16px;
}
.thrico-cta-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
}
.thrico-cta-btn-solid {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}
.thrico-cta-btn-outline, .thrico-cta-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
        padding: 8px 16px;
    border-radius: 12px;
    font-size: 13.92px !important;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}
    .thrico-credits-text {
      display: flex;
      gap: 24px;
      color: #55534e;
      font-size: 14px;
    }

    .thrico-socials {
    display: flex;
    gap: 10px;
}

 .thrico-socials a {
    color: #55534e;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 6px;
}

    .thrico-socials a:hover {
      color: #000;
    }

  .thrico-socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

    /* Responsive Rules */
    @media (max-width: 1024px) {
      .thrico-footer-card {
               padding: 30px 20px 0;
      }

      .thrico-footer-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .thrico-col-customers,
      .thrico-col-legal {
        grid-column: auto;
      }
		    .thrico-cta-card {
        padding: 56px 40px;
        gap: 40px;
    }
		.dark-cta .box {
    position: relative;
    background: #0b0b12;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 35px;
    min-height: 364px;
    border: 1px solid rgba(96, 96, 163, .3);
    flex-direction: column;
}
.dark-cta .copy {
    position: relative;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

    }

    @media (max-width: 768px) {
      .thrico-footer-card {
        padding: 20px 20px 0;
      }

      .thrico-footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .thrico-credit-bar {
        flex-direction: column;
        text-align: center;
      }

      .thrico-credits-text {
        flex-direction: column;
        gap: 8px;
      }
		.thrico-cta-card {
        flex-direction: column;
        padding: 48px 32px;
        gap: 48px;
        border-radius: 20px;
    }
		    .thrico-cta-content {
        max-width: 100%;
    }
		    .thrico-cta-timeline {
        padding-left: 24px;
        width: 100%;
    }
		    .thrico-cta-actions {
        flex-direction: column;
        gap: 12px;
    }
		.thrico-timeline-dot {
        left: -29px;
    }
		.dark-cta .box {
    position: relative;
    background: #0b0b12;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 35px;
    min-height: 364px;
    border: 1px solid rgba(96, 96, 163, .3);
    flex-direction: column;
}
.dark-cta .copy {
    position: relative;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

    }

    @media (max-width: 480px) {
      .thrico-footer-grid {
        grid-template-columns: 1fr;
      }
    .thrico-cta-actions {
        flex-direction: column;
        gap: 12px;
    }
      .thrico-btn {
        width: 100%;
      }
		    .thrico-cta-card {
        padding: 40px 24px;
        gap: 40px;
        border-radius: 16px;
    }
    }
/*footer-end*/
/*home-page*/
 /* Ambient subtle gradient glow background matching screenshot 1 */
        .hero-bg-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(circle at 0% 35%, rgba(254, 215, 205, 0.45) 0%, rgba(255, 255, 255, 0) 40%),
                radial-gradient(circle at 100% 35%, rgba(219, 234, 254, 0.55) 0%, rgba(255, 255, 255, 0) 40%);
        }

        /* Floating Navbar Container (1400px Max Width) */
        .header-wrapper {
            position: relative;
            z-index: 100;
            padding-top: 1.25rem;
            padding-bottom: 0.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .navbar-custom {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.07);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            border-radius: 100px;
            padding: 6px 16px 6px 22px;
            width: 100%;
            max-width: 1400px;
        }

        .brand-logo-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .brand-logo-img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .brand-title {
            font-weight: 800;
            font-size: 1.45rem;
            color: #1e293b;
            letter-spacing: -0.03em;
            line-height: 1;
            margin: 0;
        }

        .brand-subtitle {
            font-size: 0.65rem;
            font-weight: 600;
            color: #64748b;
            letter-spacing: -0.01em;
            margin: 0;
        }

        .nav-link-custom {
            color: #334155;
            font-weight: 500;
            font-size: 0.88rem;
            padding: 6px 12px !important;
            transition: color 0.2s ease;
        }

        .nav-link-custom:hover {
            color: #0f172a;
        }

        .nav-dropdown-icon {
            font-size: 0.72rem;
            margin-left: 3px;
            color: #94a3b8;
        }
        .hero-title {
    font-size: 60px !important;
    line-height: 1.15;
    margin-bottom: 0 !important;
    font-weight: 800;
    text-align: center;
    color: #2a2a2a;
    letter-spacing: -0.02em;
    -webkit-padding-after: 0.1em;
    padding-block-end: 0.1em;
    background-image: linear-gradient(98deg, #202020 39.06%, #8F8F8F 62.81%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
 .main-heading {
            font-size: 48px;
            line-height: 1.15;
			    margin-bottom: 0 !important;
            font-weight: 700;
			text-align:center;
            color: #2a2a2a;
            letter-spacing: -0.02em;
            -webkit-padding-after: 0.1em;
            padding-block-end: 0.1em;
           background-image: linear-gradient(98deg, #202020 39.06%, #8F8F8F 62.81%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .btn-start-trial-nav {
            background-color: var(--color-btn-dark);
            color: #ffffff;
            font-weight: 600;
            font-size: 0.875rem;
            padding: 10px 22px;
            border-radius: 100px;
            border: none;
            transition: background-color 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-start-trial-nav:hover {
            background-color: #000000;
            color: #ffffff;
        }

         /* Hero Section Container */
       
        /* Full-Width Wrapper for Viewport-Edge Glows */
        .hero-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
            background-color: #ffffff;
        }

        /* Left Glow (Orange/Red #ff6b4a) - Full Screen Left Edge */
        .hero-wrapper::before {
    content: '';
    position: absolute;
    top: 100px;
    left: 0;
    width: 742px;
    height: 742px;
    background: radial-gradient(circle at 0% 0%, #ff6b4a 0%, rgba(255, 107, 74, 0) 28%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    filter: blur(31px);
}
        .hero-wrapper::after {
    content: '';
    position: absolute;
    top: 100px;
    right: 0;
    width: 742px;
    height: 742px;
    background: radial-gradient(circle at 100% 0%, #0ea5e9 0%, rgba(14, 165, 233, 0) 28%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    filter: blur(31px);
}

        /* Hero Section Container */
        .hero-section {
            position: relative;
            min-height: 580px;
            height: calc(100vh - 120px);
            max-height: 720px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem 3rem 1rem;
            z-index: 10;
            max-width: 1400px;
            margin: 0 auto;
        }

.hero-content {
    position: relative;
    z-index: 20;
    max-width: 909px;
    text-align: center;
    pointer-events: auto;
}

        .hero-title {
            font-weight: 800;
            font-size: 60px;
            letter-spacing: -0.035em;
            line-height: 1.12;
            color: var(--color-text-dark);
        }

        .hero-subtitle {
            font-size: 1.05rem;
            color: var(--color-text-muted);
            line-height: 1.6;
            font-weight: 400;
                margin-top: 16px;
            margin-bottom: 2.25rem;
            max-width: 713px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-buttons {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
            position: relative;
            z-index: 30;
        }

        @media (max-width: 767px) {
            .hero-buttons {
                flex-direction: column;
            }
        }

        .btn-hero-demo {
            background-color: #ffffff;
            color: #1f2937;
            border: 1px solid #d1d5db;
            font-weight: 600;
            font-size: 0.95rem;
            padding: 11px 26px;
            border-radius: 100px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .btn-hero-demo:hover {
            background-color: #f9fafb;
            border-color: #9ca3af;
            color: #111827;
        }

        .btn-hero-start {
            background-color: var(--color-btn-dark);
            color: #ffffff;
            border: 1px solid var(--color-btn-dark);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 11px 26px;
            border-radius: 100px;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .btn-hero-start:hover {
            background-color: #000000;
            color: #ffffff;
        }

        /* ---------------------------------------------------- */
        /* Concentric Circular Orbit Animation Section          */
        /* ---------------------------------------------------- */

        .orbit-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            overflow:hidden;
            max-width: 1400px;
            pointer-events: none;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
  /* Floating Lucide badge icon overlay at bottom-right of every avatar */
        .avatar-badge {
            position: absolute;
            bottom: -3px;
            right: -3px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .avatar-badge i,
        .avatar-badge svg {
            width: 20px;
            height: 20px;
            stroke-width: 2.2px;
        }

        /* Vibrant Badge Color Variants */
        .badge-amber { color: #d97706; background: #fffbe6; border: 2px solid #fef3c7; }
        .badge-blue { color: #2563eb; background: #eff6ff; border: 2px solid #dbeafe; }
        .badge-purple { color: #9333ea; background: #faf5ff; border: 2px solid #f3e8ff; }
        .badge-emerald { color: #059669; background: #ecfdf5; border: 2px solid #d1fae5; }
        .badge-rose { color: #e11d48; background: #fff1f2; border: 2px solid #ffe4e6; }
        .badge-orange { color: #ea580c; background: #fff7ed; border: 2px solid #ffedd5; }
        .badge-cyan { color: #0891b2; background: #ecfeff; border: 2px solid #cffafe; }
        .badge-indigo { color: #4f46e5; background: #eef2ff; border: 2px solid #e0e7ff; }
        .badge-pink { color: #db2777; background: #fdf2f8; border: 2px solid #fce7f3; }
        .badge-teal { color: #0d9488; background: #f0fdf4; border: 2px solid #ccfbf1; }
        /* Outer Ring (Orange/Coral dashed circle) - Rotates Clockwise */
        .orbit-ring-outer {
            --r: 660px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: calc(var(--r) * -1);
            margin-left: calc(var(--r) * -1);
            width: 1320px;
            height: 1320px;
            border-radius: 50%;
            border: 2px dashed rgba(249, 115, 22, 0.45);
            animation: spinClockwise 60s linear infinite;
        }

        /* Inner Ring (Blue dashed circle) - Rotates Counter-Clockwise */
        .orbit-ring-inner {
            --r: 510px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: calc(var(--r) * -1);
            margin-left: calc(var(--r) * -1);
            width: 1020px;
            height: 1020px;
            border-radius: 50%;
            border: 2px dashed rgba(59, 130, 246, 0.45);
            animation: spinCounterClockwise 48s linear infinite;
        }

        /* Base styling for Orbit Avatar Nodes */
        .orbit-item {
            position: absolute;
            width: 93px;
            height: 93px;
            margin-top: -46.5px;
            margin-left: -46.5px;
            pointer-events: none;
        }

        /* Outer ring items counter-rotate Counter-Clockwise to stay upright */
        .orbit-item-outer .avatar-card {
            animation: keepUprightCounterClockwise 60s linear infinite;
        }

        /* Inner ring items counter-rotate Clockwise to stay upright */
        .orbit-item-inner .avatar-card {
            animation: keepUprightClockwise 48s linear infinite;
        }

        /* Avatar Card Visual Style - Single Clean Avatar Image with Thrico Badge Overlay */
        .avatar-card {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-img-inner {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
            transition: transform 0.2s ease;
        }


        /* Small floating Thrico badge icon overlay at bottom-right of every avatar */
        .avatar-badge {
            position: absolute;
            bottom: -13px;
            right: -2px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px;
            z-index: 5;
        }

        .badge-thrico-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 12 DYNAMIC NODES ON OUTER RING (30deg intervals) */
        .pos-outer-0 {
            top: calc(50% + var(--r) * sin(0deg));
            left: calc(50% + var(--r) * cos(0deg));
        }

        .pos-outer-30 {
            top: calc(50% + var(--r) * sin(30deg));
            left: calc(50% + var(--r) * cos(30deg));
        }

        .pos-outer-60 {
            top: calc(50% + var(--r) * sin(60deg));
            left: calc(50% + var(--r) * cos(60deg));
        }

        .pos-outer-90 {
            top: calc(50% + var(--r) * sin(90deg));
            left: calc(50% + var(--r) * cos(90deg));
        }

        .pos-outer-120 {
            top: calc(50% + var(--r) * sin(120deg));
            left: calc(50% + var(--r) * cos(120deg));
        }

        .pos-outer-150 {
            top: calc(50% + var(--r) * sin(150deg));
            left: calc(50% + var(--r) * cos(150deg));
        }

        .pos-outer-180 {
            top: calc(50% + var(--r) * sin(180deg));
            left: calc(50% + var(--r) * cos(180deg));
        }

        .pos-outer-210 {
            top: calc(50% + var(--r) * sin(210deg));
            left: calc(50% + var(--r) * cos(210deg));
        }

        .pos-outer-240 {
            top: calc(50% + var(--r) * sin(240deg));
            left: calc(50% + var(--r) * cos(240deg));
        }

        .pos-outer-270 {
            top: calc(50% + var(--r) * sin(270deg));
            left: calc(50% + var(--r) * cos(270deg));
        }

        .pos-outer-300 {
            top: calc(50% + var(--r) * sin(300deg));
            left: calc(50% + var(--r) * cos(300deg));
        }

        .pos-outer-330 {
            top: calc(50% + var(--r) * sin(330deg));
            left: calc(50% + var(--r) * cos(330deg));
        }

        /* 8 DYNAMIC NODES ON INNER RING (45deg intervals) */
        .pos-inner-0 {
            top: calc(50% + var(--r) * sin(0deg));
            left: calc(50% + var(--r) * cos(0deg));
        }

        .pos-inner-45 {
            top: calc(50% + var(--r) * sin(45deg));
            left: calc(50% + var(--r) * cos(45deg));
        }

        .pos-inner-90 {
            top: calc(50% + var(--r) * sin(90deg));
            left: calc(50% + var(--r) * cos(90deg));
        }

        .pos-inner-135 {
            top: calc(50% + var(--r) * sin(135deg));
            left: calc(50% + var(--r) * cos(135deg));
        }

        .pos-inner-180 {
            top: calc(50% + var(--r) * sin(180deg));
            left: calc(50% + var(--r) * cos(180deg));
        }

        .pos-inner-225 {
            top: calc(50% + var(--r) * sin(225deg));
            left: calc(50% + var(--r) * cos(225deg));
        }

        .pos-inner-270 {
            top: calc(50% + var(--r) * sin(270deg));
            left: calc(50% + var(--r) * cos(270deg));
        }

        .pos-inner-315 {
            top: calc(50% + var(--r) * sin(315deg));
            left: calc(50% + var(--r) * cos(315deg));
        }

        /* KEYFRAME ANIMATIONS */
        @keyframes spinClockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes keepUprightCounterClockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }

        @keyframes spinCounterClockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }

        @keyframes keepUprightClockwise {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* SLOWER SPEED */
.orbit-ring-outer {
    animation: spinClockwise 120s linear infinite;
}

.orbit-item-outer .avatar-card {
    animation: keepUprightCounterClockwise 120s linear infinite;
}

.orbit-ring-inner {
    animation: spinCounterClockwise 100s linear infinite;
}

.orbit-item-inner .avatar-card {
    animation: keepUprightClockwise 100s linear infinite;
}

        /* ---------------------------------------------------- */
        /* RESPONSIVE BREAKPOINTS                               */
        /* ---------------------------------------------------- */

        /* Laptop & Medium Desktop (1200px - 1399px) */
        @media (max-width: 1399px) {
            .hero-title {
                font-size: 3.4rem;
            }

            .orbit-ring-outer {
                width: 1120px;
                height: 1120px;
                --r: 560px;
            }

            .orbit-ring-inner {
                width: 860px;
                height: 860px;
                --r: 430px;
            }
        }

        /* Large Tablets / Small Laptops (992px - 1199px) */
        @media (max-width: 1199px) {
            .hero-title {
                font-size: 3.0rem;
            }

            .hero-section {
                min-height: 580px;
            }

            .orbit-ring-outer {
                width: 900px;
                height: 900px;
                --r: 450px;
            }

            .orbit-ring-inner {
                width: 680px;
                height: 680px;
                --r: 340px;
            }
        }

        /* iPad & Medium Tablet Screens (768px - 991px): SHOW BOTH ORBITS AND AVATAR IMAGES */
        @media (max-width: 991px) {
            .navbar-custom {
                border-radius: 20px;
                padding: 10px 16px;
            }

            .hero-title {
                font-size: 30px !important;
                margin-top: 39px;
            }

            .hero-subtitle {
                font-size: 0.88rem;
                max-width: 400px;
                    margin-top: 16px;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 1.5rem;
                line-height: 1.5;
            }

            .hero-section {
                min-height: 580px;
                height: auto;
                padding: 3rem 1rem;
            }

            /* iPad Orbit Dimensions - Inner ring expanded to 560px & subtitle constrained to 400px so text fits inside */
            .orbit-ring-outer {
                width: 700px;
                height: 700px;
                --r: 350px;
            }

            .orbit-ring-inner {
                display: block;
                width: 500px;
                height: 500px;
                --r: 250px;
            }

            .orbit-item {
                display: block;
                width: 52px;
                height: 52px;
                margin-top: -26px;
                margin-left: -26px;
            }

            .avatar-card {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            .avatar-badge {
                width: 32px;
                height: 32px;
                bottom: -8px;
                right: -2px;
            }

            /* Tablet Glow Sizing */
            .hero-wrapper::before {
                width: 400px;
                height: 400px;
                filter: blur(80px);
                opacity: 0.5;
            }

            .hero-wrapper::after {
                width: 400px;
                height: 400px;
                filter: blur(80px);
                opacity: 0.5;
            }
        }

        /* MOBILE PHONE SCREENS (<767px) - HIDE AVATARS, SHOW ONLY LINES */
        @media (max-width: 767px) {
            .hero-section {
                min-height: 580px;
            }

              .orbit-ring-outer {
        width: 518px;
        height: 518px;
        --r: 258px;
    }

             .orbit-ring-inner {
        display: block;
        width: 440px;
        height: 440px;
        --r: 218px;
    }

            .orbit-item {
                display: none !important;
            }

            /* Mobile Glow Sizing - Prevents left & right colors from merging */
            .hero-wrapper::before {
                width: 200px;
                height: 250px;
                filter: blur(45px);
                opacity: 0.5;
            }

            .hero-wrapper::after {
                width: 200px;
                height: 250px;
                filter: blur(45px);
                opacity: 0.5;
            }
           
        }

        /* Compact Mobile Screens (<576px) */
        @media (max-width: 575px) {
            .hero-title {
                font-size: 30px;
            }

            .hero-subtitle {
                font-size: 0.92rem;
            }

            .hero-section {
                min-height: 580px;
            }

            /* Small Mobile Glow Sizing */
            .hero-wrapper::before {
                width: 150px;
                height: 200px;
                filter: blur(35px);
                opacity: 0.45;
            }

            .hero-wrapper::after {
                width: 150px;
                height: 200px;
                filter: blur(35px);
                opacity: 0.45;
            }
           
        }

        /* Extra Small Mobile (<400px) */
        @media (max-width: 399px) {
            .hero-title {
                font-size: 30px;
            }

            .hero-subtitle {
                font-size: 0.86rem;
            }

            .btn-hero-demo,
            .btn-hero-start {
                padding: 9px 20px;
                font-size: 0.88rem;
            }
             
        }

        .video-thumbnail-wrapper {
            position: relative;
            margin: 0 auto;
            border-radius: 24px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .video-thumbnail-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
        }

        .video-thumbnail-wrapper img.cover-img {
    width: 100%;
    height: 400px;
    object-position: top;
    display: block;
}

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            transition: transform 0.3s ease;
            z-index: 2;
        }

        .video-thumbnail-wrapper:hover .play-button {
            transform: translate(-50%, -50%) scale(1.15);
        }

        /* Modal Animation enhancements */
        .modal.fade .modal-dialog {
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            transform: scale(0.95);
        }

        .modal.show .modal-dialog {
            transform: scale(1);
        }

       /* --- TRUSTED BY SECTION --- */
        .trusted-by-section {
            overflow: hidden;
            background-color: transparent;
        }

        .trusted-by-section h2 span {
            color: #8F8F8F;
        }

        .marquee-container {
            display: flex;
            overflow: hidden;
            user-select: none;
            gap: 0;
            padding: 20px 0;
            /* Optional mask for smooth fade at edges */
            mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
            -webkit-mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 10%, hsl(0 0% 0% / 1) 90%, hsl(0 0% 0% / 0));
        }

        .marquee-content {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: flex-start;
            gap: 4rem;
            padding-right: 4rem;
            /* Matches the gap so the duplicate starts at exact interval */
            width: max-content;
            animation: scrollX 40s linear infinite;
            will-change: transform;
        }

        .marquee-container:hover .marquee-content {
            animation-play-state: paused;
        }

        .marquee-content img {
            height: 105px;
            width: 160px;
            object-fit: contain;
            max-width: 200px;
            opacity: 1;
            transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
        }

        .marquee-content img:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        @keyframes scrollX {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }

        @media (max-width: 768px) {
            .marquee-content {
                gap: 2rem;
                padding-right: 2rem;
            }

            .marquee-content img {
                height: 50px;
                width: 90px;
            }

            .trusted-by-section h2 {
                font-size: 28px;
            }
        }


        /* --- DYNAMIC CLAY SECTION --- */
        .clay-features-section {
            background: #ffffff;
            overflow: hidden;
            position: relative;
        }

        .clay-features-section .section-title {
            font-size: 48px;
            font-weight: 800;
            color: #111111;
            letter-spacing: -0.02em;
            margin-bottom: 16px;
            font-family: 'Unbounded', sans-serif;
        }

        .clay-features-section .section-subtitle {
            font-size: 18px;
            color: #555555;
            line-height: 1.5;
            margin-bottom: 50px;
        }

        /* Scrollable Pills container */
        .pill-tabs-wrapper {
            position: relative;
            max-width: 100%;
            margin-bottom: 80px;
        }

        .pill-tabs-container {
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            white-space: nowrap;
            padding-bottom: 15px;
            padding-top: 5px;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }

        .pill-tabs-container::-webkit-scrollbar {
            display: none;
        }

        .pill-tab {
            background: #F4F5F7;
            border: none;
            padding: 12px 24px;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 600;
            color: #666666;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            font-family: 'Montserrat', sans-serif;
        }

        .pill-tab:hover {
            background: #E8EAEF;
            transform: translateY(-2px);
        }

        /* Active Tab Dynamic Colors */
        .pill-tab.active {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .pill-tab.active[data-target="outbound"] {
            background: #fff5cc;
            color: #cca300;
        }

        .pill-tab.active[data-target="crm"] {
            background: #e3ecff;
            color: #0044cc;
        }

        .pill-tab.active[data-target="ads"] {
            background: #e0ffe5;
            color: #009922;
        }

        .pill-tab.active[data-target="productivity"] {
            background: #ffd4f1;
            color: #cc0088;
        }

        .pill-tab.active[data-target="sourcing"] {
            background: #f0e0ff;
            color: #8800cc;
        }

        .pill-tab.active[data-target="inbound"] {
            background: #ffe6d4;
            color: #cc5500;
        }

        .pill-tab.active[data-target="scoring"] {
            background: #e0faff;
            color: #008899;
        }

        /* Mockup Area */
        .mockup-showcase-wrapper {
            position: relative;
            margin: 0 auto;
            max-width: 1000px;
            min-height: 600px;
            perspective: 1200px;
        }

        .clay-color-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 110%;
            height: 110%;
            background: #ff8de4;
            /* Initial Pink */
            border-radius: 40px;
            z-index: 1;
            transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            filter: blur(8px);
        }

        .texture-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 110%;
            height: 110%;
            background-image: url('images/texture-color.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 2;
            border-radius: 40px;
            mix-blend-mode: overlay;
            opacity: 0.8;
            pointer-events: none;
            transition: opacity 0.8s ease;
        }

        /* Wrappers for hover interactions so JS doesn't clash with CSS transforms */
        .img-center-wrapper {
            position: absolute;
            width: 100%;
            max-width: 900px;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .img-center-wrapper:hover {
            transform: translateX(-50%) translateY(-10px);
        }

        .img-left-wrapper {
            position: absolute;
            width: 330px;
            bottom: 40px;
            left: -40px;
            z-index: 5;
            transform: rotate(-1.5deg);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .img-left-wrapper:hover {
            transform: rotate(0deg) translateY(-15px) scale(1.03);
            z-index: 6;
        }

        .img-right-wrapper {
            position: absolute;
            width: 370px;
            top: 40px;
            right: -60px;
            z-index: 4;
            transform: rotate(1.5deg);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .img-right-wrapper:hover {
            transform: rotate(0deg) translateY(-15px) scale(1.03);
            z-index: 6;
        }

        /* Inner images that handle the fade/slide JS animation */
        .ui-img-inner {
            width: 100%;
            height: auto;
            border-radius: 12px;
            /* Clay reference has tighter 12px radius */
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
            /* Clay shadow */
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .mockup-showcase-wrapper {
                transform: scale(0.85);
                margin-top: -50px;
            }
            .thp-pricing-container {
    width: 100%;
}
        }

        @media (max-width: 992px) {
            .mockup-showcase-wrapper {
                transform: scale(0.7);
                margin-top: -80px;
                margin-bottom: -100px;
            }
            .thp-pricing-container {
    width: 100%;
}
        }

        @media (max-width: 768px) {
            .mockup-showcase-wrapper {
                transform: scale(0.5);
                margin-top: -150px;
                margin-bottom: -200px;
            }
.thp-compare-section {
    width:100%;
}
            .clay-features-section .section-title {
                font-size: 36px;
            }
        }

        @media (max-width: 576px) {
            .mockup-showcase-wrapper {
                transform: scale(0.35);
                margin-top: -220px;
                margin-bottom: -350px;
            }
            .thp-pricing-container {
    width: 100%;
}
        }
    @media (max-width: 900px) {
        .thrico-blog-posts { grid-template-columns: repeat(2, 1fr); }
        .thp-pricing-container {
    width: 100%;
}
    }

    @media (max-width: 600px) {
        .thrico-blog-posts { grid-template-columns: 1fr; }
    }

    .thrico-blog-card {
        background: #ffffff;
        border-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .thrico-card-thumb {
        display: block;
        width: 100%;
        height: 190px;
        overflow: hidden;
        background: #f3f4f8;
    }

    .thrico-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .thrico-thumb-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #d9e2ff, #f3e8ff);
    }

    .thrico-card-content {
    padding: 20px 20px 22px;
    background: #f6f5f2;
}
.thrico-category {
    display: inline-block;
    color: #0091ff;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 0px;
}

    .thrico-card-content h3 {
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.35;
    }

   .thrico-card-content h3 a {
    color: #14161f;
    text-decoration: none;
    font-weight: 600;
    line-height: 28px;
	   min-height: calc(1.35em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
}

    .thrico-card-content h3 a:hover {
        color: #2f6bff;
    }

  .thrico-card-content p {
    margin: 0 0 16px;
    color: #5B544B;
    font-size: 14px;
    line-height: 1.5;
}

  .thrico-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #5B544B;
}

    .thrico-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #f3a13f;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .thrico-dot {
        color: #c7cad3;
    }

    .thrico-no-posts {
        grid-column: 1 / -1;
        text-align: center;
        color: #777;
        padding: 40px 0;
    }

    /* Pagination */
    button.thrico-nav-btn.thrico-next {
    display: flex;
    justify-content: flex-end;
}
   /* Pagination */
.thrico-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #e2e6f0;
}

.thrico-page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.thrico-page-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #555;
    font-size: 14px;
    cursor: pointer;
}

.thrico-page-btn.active {
    background: #14161f;
    color: #ffffff;
    font-weight: 600;
}

.thrico-page-ellipsis {
    color: #999;
    font-size: 13px;
    margin-left: 4px;
}

.thrico-page-btn {
    width: 32px;
    height: 47px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thrico-nav-btn:hover:not(:disabled) {
    border-color: #2f6bff;
    color: #2f6bff;
}

.thrico-nav-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .thrico-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .thrico-page-numbers {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
    }

    .thrico-nav-btn {
        flex: 1;
        text-align: center;
        padding: 9px 12px;
    }
}
        /* Nav List */
        .thrico-nav-links {
            display: flex;
            align-items: center;
            gap: clamp(0px, 0.2vw, 2px);
            list-style: none;
			padding:0 !important;
        }

        .thrico-nav-item {
            position: relative;
        }

        .thrico-nav-btn {
            display: flex;
            align-items: center;
            gap: clamp(2px, 0.4vw, 4px);
            padding: clamp(4px, 0.6vw, 8px) clamp(2px, 0.4vw, 6px);
            white-space: nowrap;
            font-family: 'Unbounded';
            font-size: clamp(0.55rem, 0.95vw, 0.85rem);
            font-weight: 500;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: 10px;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        /* Hamburger button hidden on desktop */
        .thrico-hamburger {
            display: none;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--thrico-dark);
            padding: 8px;
        }

        .icon-close {
            display: none;
        }

        .thrico-hamburger.is-active .icon-menu {
            display: none;
        }

        .thrico-hamburger.is-active .icon-close {
            display: block;
        }

        .thrico-nav-btn:hover,
        .thrico-nav-item:hover>.thrico-nav-btn {
            background: var(--thrico-subtle);
            color: var(--thrico-dark);
        }

        .thrico-chevron {
            width: 14px;
            height: 14px;
            transition: transform 0.2s ease;
            color: var(--text-muted);
        }

        .thrico-nav-item:hover .thrico-chevron {
            transform: rotate(180deg);
            color: var(--thrico-dark);
        }

        /* Thrico Dropdown Mega Menu Panels */
        .thrico-dropdown-panel {
            position: absolute;
            top: 100%;
            left: 0;
            background: #FFFFFF;
            border: 1px solid var(--thrico-border);
            border-radius: 20px;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1000;
        }

        .thrico-nav-item:hover .thrico-dropdown-panel {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Thrico Dropdown 1: Built For */
        .panel-built-for {
            width: 820px;
        }

        .dropdown-header-label {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

        .built-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }

        .thrico-built-card {
            display: flex;
            flex-direction: column;
            padding: 16px 14px;
            background: var(--thrico-bg);
            border: 1px solid var(--thrico-border);
            border-radius: 14px;
            text-decoration: none;
            color: var(--thrico-dark);
            transition: all 0.2s ease;
        }

        .thrico-built-card:hover {
            background: #FFFFFF;
            border-color: var(--thrico-dark);
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
        }

        .card-icon-wrapper {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #FFFFFF;
            border: 1px solid var(--thrico-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--thrico-purple);
            margin-bottom: 12px;
            transition: background 0.2s;
        }

        .thrico-built-card:hover .card-icon-wrapper {
            background: var(--thrico-accent-light);
        }

        .thrico-built-card strong {
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .thrico-built-card span {
            font-size: 0.72rem;
            color: var(--text-secondary);
            line-height: 1.3;
        }

        /* Thrico Dropdown 2: Solutions (Mega Layout) */
        .panel-solutions {
            width: 1040px;
            left: -180px;
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 24px;
        }

        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .sol-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sol-title {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--thrico-purple);
            display: flex;
            align-items: center;
            gap: 6px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--thrico-border);
        }

        .sol-links-cloud {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .sol-item-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 8px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.15s;
        }

        .sol-item-link:hover {
            background: var(--thrico-subtle);
            color: var(--thrico-dark);
        }

        /* Thrico Featured Banner Card (Right side of Solutions) */
        .thrico-promo-card {
            background: var(--thrico-dark);
            color: #FFFFFF;
            border-radius: 16px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .thrico-promo-card::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(67, 24, 255, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
            border-radius: 50%;
        }

        .promo-tag {
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #A78BFA;
            margin-bottom: 8px;
            display: block;
        }

        .thrico-promo-card h4 {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .thrico-promo-card p {
            font-size: 0.76rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.45;
            margin-bottom: 20px;
        }

        .thrico-promo-card a {
            font-size: 0.8rem;
            font-weight: 700;
            color: #FFFFFF;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 2px;
            width: max-content;
        }

        .thrico-promo-card a:hover {
            border-color: #FFFFFF;
        }

        /* Thrico Dropdown 3: Resources */
        .panel-resources {
            width: 320px;
            right: 0;
            left: auto;
        }

        .thrico-resource-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--thrico-dark);
            transition: background 0.15s;
        }

        .thrico-resource-row:hover {
            background: var(--thrico-subtle);
        }

        .res-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--thrico-accent-light);
            color: var(--thrico-purple);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .res-text strong {
            font-size: 0.86rem;
            font-weight: 700;
            display: block;
        }

        .res-text span {
            font-size: 0.74rem;
            color: var(--text-muted);
        }

        /* Thrico CTA Buttons */
        .thrico-btn-primary {
            background: var(--thrico-dark);
            color: #FFFFFF;
            padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.5vw, 22px);
            border-radius: 999px;
            font-size: clamp(0.7rem, 1vw, 0.88rem);
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
            transition: all 0.2s ease;
            border: 1px solid var(--thrico-dark);
        }

        .thrico-btn-primary:hover {
            background: #23232A;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        }

        /* Page Preview Body */
        .thrico-hero-body {
            max-width: 960px;
            margin: 90px auto;
            text-align: center;
            padding: 0 24px;
        }

        .thrico-hero-body h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .thrico-hero-body p {
            font-size: 1.15rem;
            color: var(--text-secondary);
            line-height: 1.6;
            max-width: 720px;
            margin: 0 auto 36px;
        }

        @media (max-width: 1024px) {
            .thrico-hamburger {
                display: flex;
                align-items: center;
                justify-content: center;
            }
.thp-pricing-container {
    width: 100%;
}
            .thrico-nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 72px;
                left: 0;
                width: 100%;
                background: #FFFFFF;
                padding: 16px 24px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                overflow-y: auto;
                max-height: calc(100vh - 72px);
                border-top: 1px solid var(--thrico-border);
            }

            .thrico-nav-links.active {
                display: flex;
            }

            .thrico-nav-item {
                width: 100%;
            }

            .thrico-nav-btn {
                width: 100%;
                padding: 12px 0;
                font-size: 1rem;
            }

            .thrico-dropdown-panel {
                display: none;
                position: static;
                width: 100% !important;
                opacity: 1;
                visibility: visible;
                transform: none;
                box-shadow: none;
                padding: 10px 0 20px 0;
                border: none;
            }

            /* Override desktop hover */
            .thrico-nav-item:hover .thrico-dropdown-panel {
                display: none;
            }

            /* Show dropdown when active class is added via JS */
            .thrico-nav-item.active .thrico-dropdown-panel {
                display: block;
            }

            .thrico-nav-item.active .panel-solutions {
                display: grid;
            }

            .thrico-nav-item.active .thrico-chevron {
                transform: rotate(180deg);
                color: var(--thrico-dark);
            }

            .panel-solutions {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .panel-built-for {
                width: 100%;
            }

            .built-grid {
                grid-template-columns: 1fr;
            }

            .solutions-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .panel-resources {
                width: 100%;
            }
        }

        @media (max-width: 600px) {
            .solutions-grid {
                grid-template-columns: 1fr;
            }

            .thrico-btn-primary {
                padding: 8px 16px;
                font-size: 0.8rem;
            }
            .thrico-footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
 .thp-pricing-container {
    width: 100%;
}
        }


        /* Spacing Utilities */
.top-space { padding-top: 100px !important; }
.bottom-space { padding-bottom: 100px !important; }

@media (max-width: 768px) {
    .top-space { padding-top: 50px !important; }
    .bottom-space { padding-bottom: 50px !important; }
      .mission-container, .values-container, .pillars-container {
                margin-bottom: 50px;
      }
     .thrico-engine-graphic-img {
    max-width: 100%;
    max-height: none !important;}
    }

/*about-us*/

        .mission-container {
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
                margin-bottom: 100px;
        }

        /* Left Column */
        .mission-left {
            padding: 48px 44px 40px 44px;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
        }

        .section-tag {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: block;
        }

        .tag-orange {
            color: #f97316;
        }

        .tag-purple {
            color: #a855f7;
        }

        .tag-cyan {
            color: #00a3ff;
        }

        .mission-title {
            font-size: 28px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.25;
            margin-bottom: 24px;
            letter-spacing: -0.01em;
        }

        .mission-text {
            font-size: 15px;
            line-height: 1.65;
            color: #9ca3af;
            font-weight: 400;
        }

        .mission-text p {
            margin-bottom: 20px;
            color:#fff;
        }

        .mission-text p:last-child {
            margin-bottom: 0;
        }

        .mission-footer-tags {
            margin-top: 40px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #f97316;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .dot-separator {
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #f97316;
            border-radius: 50%;
            opacity: 0.8;
        }

        /* Right Column */
        .mission-right {
            display: flex;
            flex-direction: column;
        }

        .mission-top-card {
            padding: 48px 44px 40px 44px;
            flex: 1;
        }

        .mission-bottom-card {
            padding: 36px 44px 44px 44px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            flex: 1;
        }

        .quote-text {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.55;
            color: #ffffff;
            letter-spacing: -0.01em;
        }
/* -------------------------------------------------------------
           2. CORE VALUES SECTION (8-Card Grid)
           ------------------------------------------------------------- */
        .values-container {
             margin-bottom: 100px;
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            overflow: hidden;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .value-card {
            padding: 36px 30px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Remove border-right on 4th column items */
        .value-card:nth-child(4n) {
            border-right: none;
        }

        /* Remove border-bottom on last row items (5, 6, 7, 8) */
        .value-card:nth-child(n+5) {
            border-bottom: none;
        }

        .value-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
        }

        .value-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .value-icon svg {
            width: 24px;
            height: 24px;
        }

        /* Distinct colors for each icon matching the exact screenshot */
        .icon-purple svg {
            stroke: #b088f5;
        }

        .icon-pink svg {
            stroke: #ec4899;
        }

        .icon-amber svg {
            stroke: #f59e0b;
        }

        .icon-blue svg {
            stroke: #60a5fa;
        }

        .icon-rose svg {
            stroke: #f43f5e;
        }

        .icon-yellow svg {
            stroke: #fbbf24;
        }

        .icon-lavender svg {
            stroke: #c084fc;
        }

        .icon-magenta svg {
            stroke: #e879f9;
        }

        .value-number {
            font-size: 13px;
            font-weight: 500;
            color: #4b5563;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .value-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .value-desc {
            font-size: 14px;
            line-height: 1.5;
            color: #9ca3af;
            font-weight: 400;
        }
/* -------------------------------------------------------------
           3. THREE PILLARS SECTION (CONNECT, PARTICIPATE, THRIVE)
           ------------------------------------------------------------- */
        .pillars-container {
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
            margin-bottom: 100px;
        }

        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .pillar-card {
            padding: 44px 36px 44px 36px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }

        .pillar-card:last-child {
            border-right: none;
        }

        .pillar-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 32px;
        }

        .pillar-icon-box svg {
            width: 22px;
            height: 22px;
            stroke: #ffffff;
        }

        .pillar-title {
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .pillar-desc {
            font-size: 13.5px;
            line-height: 1.55;
            color: #9ca3af;
            font-weight: 400;
        }
/* -------------------------------------------------------------
           4. OUR JOURNEY SECTION (Light Background Roadmap)
           ------------------------------------------------------------- */
        .journey-header {
            text-align: center;
            max-width: 650px;
            margin-bottom: 54px;
        }

        .journey-main-title {
            font-size: 44px;
            font-weight: 800;
            color: #111827;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
        }

        .journey-title-highlight {
            color: #9ca3af;
            font-weight: 700;
        }

        .journey-subtitle {
            font-size: 22px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 16px;
            letter-spacing: -0.01em;
        }

        .journey-description {
            font-size: 15px;
            line-height: 1.55;
            color: #4b5563;
            font-weight: 400;
        }

        .journey-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            width: 100%;
        }

        .journey-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px;
            padding: 28px 24px 24px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .journey-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
        }

        .journey-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .journey-num-badge {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #27272a;
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .journey-category-tag {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .tag-origin { color: #a855f7; }
        .tag-foundation { color: #22c55e; }
        .tag-expansion { color: #3b82f6; }
        .tag-vision { color: #ff5733; }

        .journey-card-body {
            margin-bottom: 24px;
        }

        .journey-card-title {
            font-size: 13.5px;
            font-weight: 700;
            color: #111827;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .journey-card-desc {
            font-size: 13px;
            line-height: 1.5;
            color: #6b7280;
            font-weight: 400;
        }

        .journey-card-footer {
            padding-top: 16px;
            border-top: 1px solid #f3f4f6;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            font-weight: 600;
        }

        .journey-card-footer svg {
            width: 15px;
            height: 15px;
        }

        .status-origin { color: #a855f7; }
        .status-foundation { color: #22c55e; }
        .status-expansion { color: #3b82f6; }
        .status-vision { color: #ff5733; }
         /* -------------------------------------------------------------
           RESPONSIVE MEDIA QUERIES
           ------------------------------------------------------------- */
        @media (max-width: 991px) {
            .mission-container {
                grid-template-columns: 1fr;
            }

            .mission-left {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                padding: 36px 28px;
            }

            .mission-top-card {
                padding: 36px 28px;
            }

            .mission-bottom-card {
                padding: 32px 28px;
            }

            .mission-title {
                font-size: 24px;
            }

            .quote-text {
                font-size: 16px;
            }

            .values-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .value-card {
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .value-card:nth-child(2n) {
                border-right: none;
            }

            .value-card:nth-child(n+7) {
                border-bottom: none;
            }

            .pillars-grid {
                grid-template-columns: 1fr;
            }

            .pillar-card {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                padding: 36px 28px;
            }

            .pillar-card:last-child {
                border-bottom: none;
            }

            .journey-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .journey-main-title {
                font-size: 36px;
            }

            .journey-subtitle {
                font-size: 20px;
            }
        }

        @media (max-width: 575px) {
            .values-grid {
                grid-template-columns: 1fr;
            }

            .value-card {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .value-card:last-child {
                border-bottom: none;
            }

            .journey-grid {
                grid-template-columns: 1fr;
            }
        }

        .startups-bg{
            background: linear-gradient(360deg, #FEC267 0%, #FFF5E6 100%), #F5F4F1;
        }
        .enterprise-bg{
        background: linear-gradient(180deg, #D2DFF9 0%, #4B7EE7 100%);
        }
.associations-bg{
        background: linear-gradient(360deg, #17AEE8 0%, #D1EFFA 100%);
}

.academia-bg{
background: linear-gradient(360deg, #DDE51A 0%, #F8FAD1 100%), #F4F3F0;
}
.creators-bg{
background: linear-gradient(360deg, #F00F73 0%, #FCCFE3 100%), #F4F3F0;
}

.ai-solutions-agent-item{
    --border-angle: 0turn;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    border:1.5px solid #E5E7EB;
    border-radius:18px;
    background:#fff;
    transition:.3s ease;
}

/* Hover only */
.ai-solutions-agent-item:hover{
    border:1.5px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        conic-gradient(
            from var(--border-angle),
            transparent 15%,
            #0966ff 35%,
            #ff5733 50%,
            #0966ff 65%,
            transparent 85%
        ) border-box;
    animation:border-spin 3s linear infinite;
}

@property --border-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0turn;
}

@keyframes border-spin{
    to{
        --border-angle:1turn;
    }
}

/* Main Card */
.podcast-card-row{
    position: relative;
    border: 1px solid #0091ff;
    border-radius: 999px;
    background: #fff;
    transition: all .3s ease;
    --border-angle: 0turn;
}

/* Hover Effect */
.podcast-card-row:hover{
    color: #0966ff;
    border: 1.5px dashed transparent;
    box-shadow: inset 0 0 0 1px rgba(0,145,255,.1);
    background:
        linear-gradient(#edf3fc,#edf3fc) padding-box,
        conic-gradient(
            from var(--border-angle),
            transparent 15%,
            #0966ff 35%,
            #ff5733 50%,
            #0966ff 65%,
            transparent 85%
        ) border-box;
    animation: border-spin 3s linear infinite;
}

/* Rotating Border */
@property --border-angle{
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

@keyframes border-spin{
    to{
        --border-angle: 1turn;
    }
}