:root {
    --bg-primary: #0a0a0f;
    --primary: #13131f;
    --secondaryBG: #0a0a14;
    --tertiary: #12121e;
    --accent1: #2576e3;
    --border-light: rgba(255, 255, 255, 0.06);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --card-bg: rgba(12, 12, 20, 1);
    --card-bg-hover: rgba(18, 18, 30, 1);
    --success: #48c671;
    --secondary: #4f46e5;
    --blue-accent: #3b82f6;
    --purple-accent: #8b5cf6;
    --green-accent: #48c671;
    --red-accent: #de4b4b;
    --border: #424242;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* section {
    padding: 100px 0;
    position: relative;
} */

.btn-secondary {
    background: var(--tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-primary {
    background: var(--accent1);
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #2f83f7;
}



.accent-text {
    color: var(--accent1);
}


/* Section Headers */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    padding-top: 80px;
}

@media only screen and (max-width:1024px) {
    .section-header {
        padding-top: 40px;
    }

    body.home .action-buttons-home {
        flex-direction: column !important;
        margin-top: 10px;
        align-items: center;
    }
}

.section-title {
    font-family: 'gotham_htfbold';
    font-size: 3.7rem;
    font-weight: normal;
    margin-bottom: 16px;
}

@media only screen and (max-width:1024px) {
    .success-stories .section-title {
        font-size: 3rem;
    }
}

@media only screen and (max-width:767px) {
    .success-stories .section-title {
        font-size: 2.5rem;
    }
}

.section-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

@media only screen and (max-width:1024px) {
    .success-stories .section-subtitle {
        font-size: 1.2rem;
        line-height: 1.5;
        max-width: 80%;
    }
}



/* Success Stories Section */
.success-stories {
    padding-top: 40px;
    padding-bottom: 40px;
    background: var(--secondaryBG);
    position: relative;
}

@media only screen and (max-width:1024px) {
    .success-stories {
        padding-top: 80px;
    }
}

.success-stories .container-xl {
    position: relative;
    z-index: 1;
}

.success-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

@media only screen and (max-width:767px) {
    body.home .action-buttons-home {
        flex-direction: column !important;
        margin-top: 10px;
        align-items: center;
    }

    .container {
        padding: 0 15px !important;
    }

    .sabudh-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .sabudh-stats .stat-item {
        padding: 1rem;
    }


}

.success-card {
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 460px;
    perspective: 1000px;
}

.success-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 118, 227, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.success-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.card-front {
    background: var(--card-bg);
    padding-bottom: 20px;
}

.card-back {
    background: var(--card-bg-hover);
    transform: rotateY(180deg);
    padding: 15px 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.success-card {
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    height: 460px;
    perspective: 1000px;
    /* MUST stay here */
}

/* REMOVE transform from here */
.success-card:hover {
    border-color: rgba(37, 118, 227, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

/* Move hover effects here */
.success-card:hover .card-inner {
    -webkit-transform: rotateY(180deg) translateY(-5px) !important;
    transform: rotateY(180deg) translateY(-5px) !important;
}

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

.card-front {
    background: var(--card-bg);
    padding-bottom: 20px;
}

.card-back {
    background: var(--card-bg-hover);
    transform: rotateY(180deg);
    padding: 15px 6px 10px;
    justify-content: space-between;
}

.card-back .solution-list+p {
    margin: 0;
}

.case-img {
    height: 60px;
    position: relative;
    /* background-color: var(--tertiary); */
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    overflow: hidden;
}

.case-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%);
}

/*
.case-img.aiml {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
}

.case-img.gai {
    background: linear-gradient(135deg, #1a1a2e 0%, #3a0ca3 100%);
}

.case-img.idm {
    background: linear-gradient(135deg, #1a1a2e 0%, #10002b 100%);
}

.case-img.forec {
    background: linear-gradient(135deg, #1a1a2e 0%, #240046 100%);
}
    */

.case-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(18, 18, 30, 0.8);
    color: var(--text-primary);
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    z-index: 1;
    backdrop-filter: blur(5px);
}

.case-content {
    padding: 16px 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-title {
    font-size: 1.2rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    margin-bottom: 16px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.case-phase {
    margin-bottom: 16px;
}

.phase-label {
    font-size: 0.8rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.phase-label i {
    color: var(--accent1);
    font-size: 0.7rem;
}

.phase-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.case-stat {
    margin-top: auto;
    background: rgba(37, 118, 227, 0.1);
    padding: 12px 16px;
    border-radius: 4px;
    display: grid;
    /* switch to grid */
    grid-template-columns: auto 1fr;
    /* icon fixed, text flexible */
    align-items: center;
    /* vertical alignment */
    gap: 12px;
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.case-content p:empty {
    display: none !important;
}

.stat-text {
    font-size: 0.9rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    color: var(--text-primary);
    display: -webkit-box;
    /* enables flexbox-like layout */
    -webkit-line-clamp: 2;
    /* limits to 2 lines */
    -webkit-box-orient: vertical;
    /* sets vertical orientation */
    overflow: hidden;
    /* hides extra text */
    text-overflow: ellipsis;
}

.back-title {
    font-size: 1.4rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    margin-bottom: 8px;
    color: var(--accent1);
    padding: 10px 12px;
}

.back-subtitle {
    font-size: 0.8rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    padding: 10px 12px 0;
}

.solution-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    padding: 0 12px;
}

.solution-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.solution-item i {
    color: var(--accent1);
    margin-top: 3px;
}

.solution-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.back-btn {
    padding: 12px 20px;
    background: var(--accent1);
    color: var(--text-primary);
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
}

.back-btn br,
.phase-label br {
    display: none;
}

.back-btn:hover {
    background: #2f83f7;
    color: #ffffff;
}

.card-back .back-btn {
    margin-left: 12px;
    margin-bottom: 12px;
}


.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.tech-tag {
    padding: 5px 10px;
    background: var(--tertiary);
    color: var(--text-tertiary);
    font-size: 0.8rem;
    border-radius: 4px;
}

/* CTA Section */
.cta-section {
    padding: 100px 0;
    background: var(--tertiary);
    text-align: center;
}

.cta-banner {
    margin-top: 5rem;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(0, 168, 255, 0.1) 100%);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 24px;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media only screen and (max-width:767px) {
    .cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }
}


.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content>h3,
.cta-title,
.cta-section>h2 {
    font-family: 'gotham_htfbold';
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cta-section .cta-title,
.cta-section>h2 {
    font-family: 'gotham_htfbold';
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cta-content>p,
.cta-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.cta-banner .cta-buttons,
.cta-banner a.cta-button,
.cta-banner .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

@media only screen and (max-width:767px) {
    .cta-banner .cta-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}


.success-grid p:empty {
    display: none !important;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.tab-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin: 0;
}

.tab-links li {
    margin: 0;
    padding: 0;
}

.tab-links li a {
    display: block;
    text-decoration: none;
    padding: 6px 0;
    color: #ffffff;
    opacity: 0.88;
    text-transform: uppercase;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    font-size: 12px;
    margin: 0 13px;
}

.tab-links li.active a {
    color: #eba1a1;
}

.vp-project-item {
    margin-bottom: 20px;
}

.tab-links li a[href$='24'] {
    display: none !important;
}

a.btnScreenOn {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
}

/* Responsive Styles */

@media (max-width: 992px) {

    .success-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .modal-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .hero-cta {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
        justify-content: center;
    }

    .logo {
        font-size: 1.3rem;
    }

    .tagline {
        display: none;
    }

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

    .success-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/* Single Portfolio */

.section-header.singlepost {
    max-width: 1000px;
}

.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 1.8rem;
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
    border-left: 3px solid var(--accent1);
    backdrop-filter: blur(10px);
}

.summary-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
}

.summary-card>h2,
.section-content>h2 {
    background: linear-gradient(135deg, #1a1a2e 0%, #3a0ca3 100%);
    border-radius: 12px 12px 0 0;
    padding: 12px;
    color: #ffffff;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    font-size: 24px;
    text-align: center;
    margin: 0;
}

.section-content h3,
.section-content h4 {
    font-family: 'gotham_htfbold';
    font-weight: normal;
    font-size: 1.1rem;
}

.summary-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 0 0 0.5rem;
    overflow: hidden;
    background-color: rgba(19, 19, 31, 1);
    border-radius: 0 0 12px 12px;
}

.summary-tile {
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.tile-header {
    color: var(--light-text);
    font-weight: normal;
    font-family: 'gotham_htfbold';
    font-size: 1.2rem;
    padding: 1rem;
    text-align: center;
    padding-top: 2rem;
}

.tile-content {
    padding: 0 1.2rem 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tile-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--accent1);
    font-size: 2rem;
}

.tile-content p {
    color: var(--gray-text);
    text-align: center;
    margin-bottom: 0;
}


.summary-tile:nth-child(1) .tile-icon {
    color: #e74c3c;
}

.summary-tile:nth-child(2) .tile-icon {
    color: #6e42e5;
}

.summary-tile:nth-child(3) .tile-icon {
    color: #2ecc71;
}


/* Tech stack styling - Version 1 from the provided HTML */
.tech-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 1.5rem 0;
    width: 100%;
}

.tech-group {
    display: inline-flex;
    align-items: center;
    background-color: rgba(19, 19, 31, 0.8);
    border-radius: 6px;
    padding: 6px 12px;
    margin: 2px;
}

.tech-label {
    color: var(--accent1);
    font-family: 'gotham_htfbold';
    font-weight: normal;
    font-size: 14px;
    margin-right: 6px;
}

.tech-items {
    color: var(--gray-text);
    font-size: 14px;
}

/* Tech stack styling - Version 3 from the provided HTML */
.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 1.5rem;
    background-color: rgba(19, 19, 31, 1);
    border-radius: 0 0 12px 12px;
}

.tech-pill {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: white;
    white-space: nowrap;
}

.ai-model {
    background-color: var(--accent1);
}

.ml {
    background-color: var(--secondary);
}

.data {
    background-color: var(--blue-accent);
}

.dev {
    background-color: var(--purple-accent);
}

.viz {
    background-color: var(--red-accent);
}

.secu {
    background-color: var(--green-accent);
}

.challenge-section,
.solution-section,
.outcomes-section {
    background-color: var(--bg-card);
    border-radius: 0 0 12px 12px;
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}

.challenge-section:before,
.solution-section:before,
.outcomes-section:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(110, 66, 229, 0.08), transparent);
    top: -75px;
    right: -75px;
    border-radius: 50%;
    z-index: 0;
}

.section-content {
    position: relative;
    z-index: 1;
    padding: 0;
    background-color: rgba(19, 19, 31, 1);
    border-radius: 12px;
}

.secPad {
    padding: 1.5rem;
}

.pain-points {
    margin: 1.5rem 0;
}

.pain-points ul {
    list-style-type: none;
}

.pain-points li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    color: var(--gray-text);
}

.pain-points li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    font-weight: bold;
    width: 6px;
    height: 6px;
    background-color: var(--accent1);
    border-radius: 50rem;
}

.quote {
    font-style: italic;
    border-left: 4px solid var(--accent1);
    padding: 1.2rem 1.5rem;
    margin: 1.8rem 0;
    color: var(--gray-text);
    background-color: rgba(110, 66, 229, 0.1);
    border-radius: 0 8px 8px 0;
}

.quote-author {
    display: block;
    text-align: right;
    font-style: normal;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    margin-top: 0.8rem;
    color: var(--light-text);
}

.phase {
    background-color: rgba(110, 66, 229, 0.02);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--accent1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.phase:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.phase-title {
    font-size: 1.2rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    color: var(--light-text);
}

.phase-duration {
    background-color: rgba(110, 66, 229, 0.15);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--primary-light);
}


/* Call to action */
.cta-section {
    background: linear-gradient(135deg, #6e42e5, #4834d4);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    margin: 3rem 0;
    box-shadow: var(--card-shadow);
}

.cta-section h2 {
    color: white;
    margin-bottom: 1rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.cta-button {
    background-color: white;
    color: var(--accent1);
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* React Component Specific Styles */
.viz-header {
    background-color: #0a0a14;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.viz-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, #8a5cf6, #6c5ce7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.viz-subtitle {
    color: #a0a0b8;
}

.viz-tabs {
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.viz-tab {
    padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.viz-tab-before {
    background-color: #6e42e5;
    color: white;
}

.viz-tab-after {
    background-color: rgba(30, 30, 46, 0.6);
    color: #a0a0b8;
}

.viz-content {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.viz-panel {
    background-color: #0a0a14;
    padding: 1.2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.viz-panel-title {
    font-size: 1.1rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    margin-bottom: 1rem;
    color: white;
}

.workflow-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: #13131f;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.workflow-icon {
    background-color: #6e42e5;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-title {
    flex-grow: 1;
    font-weight: 500;
    color: white;
}

.workflow-time {
    display: flex;
    align-items: center;
    color: #a0a0b8;
    font-size: 0.85rem;
}

.workflow-time-icon {
    margin-right: 0.25rem;
}

.workflow-summary {
    margin-top: 1rem;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.75rem;
    border-radius: 0.5rem;
    color: #61dafb;
    font-size: 0.9rem;
}

.interaction-panel {
    margin: 1.5rem;
    background-color: #0a0a14;
    padding: 1.2rem;
    border-radius: 0.75rem;
}

.dialog-line {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.dialog-user {
    color: #a78bfa;
}

.dialog-system {
    color: #34d399;
}

.feature-comparison {
    margin: 1.5rem;
    background-color: #0a0a14;
    padding: 1.2rem;
    border-radius: 0.75rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.5rem;
}

.feature-header {
    font-weight: 500;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-cell {
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.feature-name {
    color: #a0a0b8;
}

.feature-center {
    justify-content: center;
}

.viz-cta {
    margin: 1.5rem;
    background: linear-gradient(135deg, #6e42e5, #4834d4);
    padding: 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
}

.viz-cta-title {
    color: white;
    font-size: 1.2rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    margin-bottom: 0.5rem;
}

.viz-cta-text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.viz-cta-button {
    background-color: white;
    color: #6e42e5;
    border: none;
    padding: 0.5rem 1rem;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* === Tabs === */
.viz-content {
    display: none !important;
}

.viz-content.active {
    display: grid !important;
}

.viz-tab {
    padding: 0.3rem 1.2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #ffffff;
    color: #101010;
    font-size: 14px;
    user-select: none;
}

.viz-tab.active {
    background-color: #6e42e5;
    color: white;
}

@media (max-width: 768px) {
    .viz-content {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        font-size: 0.85rem;
    }

    .section-subtitle {
        font-size: 1rem;
        max-width: 100%;
    }
}

@media all and (min-width: 1200px) {
    .section-header.singlepost h2.section-title {
        font-size: 3rem;
    }
}


.h250 {
    height: 250px;
}

.mb15 {
    margin-bottom: 15px;
}

.flxhBarT {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.flxhBarT .txt {
    color: rgb(160, 160, 184);
    font-size: 0.9rem;
}

.flxhBarT .txtR {
    color: rgb(255, 255, 255);
    font-weight: 600;
}

.flxhBar {
    height: 12px;
    background-color: rgb(19, 19, 31);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.hBarW {
    height: 100%;
    background-color: rgb(104, 109, 224);
    border-radius: 6px;
    transition: width 0.5s;
}

.success-stories .breadcrumb-item.active {
    font-weight: 600;
    color: #91aac1;
}

.cs2-tabs {
    flex-wrap: wrap;
}

.wraperTable {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #6c63ff #e0e0e0;
}

@media only screen and (max-width:767px) {
    .wraperTable table {
        width: 1100px;
    }
}


.wraperTable::-webkit-scrollbar {
    width: 6px;
}

.wraperTable::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 20px;
}

.wraperTable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6c63ff, #4b47c5);
    border-radius: 20px;
}



.card-foot {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 12px;
}

.av-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'gotham_htfbold';
    font-weight: normal;
    font-size: 0.6875rem;
    color: #fff;
    flex-shrink: 0;
}

.foot-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.foot-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.foot-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}


.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  background: #14141c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: #3b82f6;
  background: #140c18;
  transform: translateY(-4px);
}

body .feature-card h4 {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 600;
  margin-bottom: 0.75rem;
  /* color: #567ae8; */
  color: #ffffff;
}
body .feature-card:hover h4 {
    color: #567ae8;
}
.feature-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-card a {
    text-decoration: none;
    color: #c2c2c2;
}

.feature-card .tile-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    margin-bottom: 1rem;
    width: fit-content;
    background: #3b82f614;
    color: #3b82f6;
}

#myblogs-posts .feature-card {
    min-height: 336px;
}


/* === Single Insight page === */

/* ── OUTER GRID ── */
    .outer {
      max-width:1200px;
      margin:0 auto;
      padding:5rem 2rem 8rem;
      display:grid;
      grid-template-columns: 1fr 252px;
      gap:5rem;
      align-items:start;
    }

    /* ── SECTION DIVIDER ── */
    .section-divider {
      height:1px;
      background:linear-gradient(90deg, transparent, var(--border), transparent);
      margin: 3rem 0;
    }

    /* ── ARTICLE HEADER ── */
    .art-header { margin-bottom:2.5rem; }

    .meta-top {
      display:flex; align-items:center; gap:0.5rem;
      margin-bottom:1.25rem; flex-wrap:wrap;
    }

    .badge {
      display:inline-flex; align-items:center; gap:0.3rem;
      padding:0.3rem 0.75rem; border-radius:50px;
      font-size:0.8125rem; font-weight:500;
    }

    /* Blog type badge, uses accent (IDP blue) */
    .badge.blog {
      background:var(--accent-soft);
      color:var(--accent);
      border:1px solid var(--accent-border);
    }

    /* Topic/tag badges, use problem-red per spec */
    .badge.tag {
      background:var(--problem-red-soft);
      color:var(--problem-red);
      border:1px solid var(--problem-red-border);
    }

    /* spec: hero h1 clamp(3rem, 8vw, 5.5rem) / 700 / -0.03em / 1.05 */
    .art-title {
      font-size: clamp(3rem, 8vw, 5.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--text-primary);
      margin-bottom: 1rem;
    }

    /* spec: hero subtitle 1.25rem / 400 / 1.6 */
    .art-deck {
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 640px;
      margin-bottom: 2rem;
    }

    /* byline */
    .byline {
      display:flex; align-items:center; gap:1rem;
      padding:1.25rem 0;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      flex-wrap:wrap;
    }

    .av {
      width:44px; height:44px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family: 'gotham_htfbold';
    font-weight: normal; font-size:0.875rem;
      color:#fff; flex-shrink:0;
      background:linear-gradient(135deg,#3b82f6,#6366f1);
    }

    .bl-name { font-size:0.9375rem; font-weight:600; color:var(--text-primary); }
    .bl-role { font-size:0.8125rem; color:var(--text-muted); margin-top:0.15rem; }

    .bl-stats {
      display:flex; align-items:center; gap:1.25rem;
      margin-left:auto;
      font-size:0.8125rem; color:var(--text-muted);
    }

    .bl-stat { display:flex; align-items:center; gap:0.35rem; }

    /* share */
    .share-strip {
      display:flex; align-items:center; gap:0.5rem;
      margin-top:1.25rem;
    }

    .share-lbl {
      font-size:0.75rem; font-weight:500;
      text-transform:uppercase; letter-spacing:0.1em;
      color:var(--text-muted); margin-right:0.25rem;
    }

    .share-btn {
      width:32px; height:32px; border-radius:6px;
      border:1px solid var(--border);
      background:none;
      display:flex; align-items:center; justify-content:center;
      color:var(--text-secondary); cursor:pointer;
      transition:all 0.3s ease;
    }

    .share-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

    /* ── HERO VISUAL ── */
    .hero-vis {
      width:100%; border-radius:16px; overflow:hidden;
      background:linear-gradient(145deg,#080810 0%,#0e0e38 55%,#060c1a 100%);
      min-height:260px; display:flex; align-items:center;
      position:relative; margin-bottom:3rem;
    }

    .vis-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(0, 168, 255, 0.1) 100%);
      background-size:44px 44px;
      border: 1px solid rgba(168, 85, 247, 0.2);
    }

    .vis-stats {
      position:relative; z-index:1;
      display:flex; align-items:stretch; width:100%;
    }

    .vis-stat {
      flex:1; padding:2.5rem 2rem; text-align:center;
    }

    .vis-stat + .vis-stat { border-left:1px solid rgba(255,255,255,0.05); }

    .vis-num {
      font-family: 'gotham_htfbold';
    font-weight: normal;
      font-size:clamp(2.5rem,5vw,3.5rem);
      letter-spacing:-0.03em; line-height:1;
      background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 50%,#93c5fd 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      margin-bottom:0.5rem;
    }

    .vis-label {
      font-size:0.875rem; color:var(--text-muted); line-height:1.4;
    }

    /* ── ARTICLE BODY ── */
    .body-text {
      font-size:1rem;
      line-height:1.6;
      color:var(--text-primary);
    }

    .body-text p {
      font-size:1rem; color:var(--text-secondary); line-height:1.6;
      margin-bottom:1.5rem;
    }

    /* spec: section h2 clamp(1.75rem, 4vw, 2.5rem) / 700 / -0.02em */
    .body-text h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight:700; letter-spacing:-0.02em; line-height:1.1;
      color:var(--text-primary);
      margin:3rem 0 1rem;
      scroll-margin-top:2rem;
    }

    /* spec: card h3 1.125rem / 600 */
    .body-text h3 {
      font-size:1.125rem; font-weight:600; line-height:1.1;
      color:var(--text-primary);
      margin:2rem 0 0.75rem;
      scroll-margin-top:2rem;
    }

    .body-text ul, .body-text ol {
      margin:1rem 0 1.5rem 1.5rem;
    }

    .body-text li {
      font-size:0.9375rem; color:var(--text-secondary);
      line-height:1.6; margin-bottom:0.5rem;
    }

    .body-text li strong { color:var(--text-primary); font-weight:600; }

    /* blockquote */
    .body-text blockquote {
      margin:2rem 0;
      padding:1.25rem 1.5rem;
      border-left:2px solid;
      background:rgba(255,255,255,0.1);
      border-radius:0 8px 8px 0;
    }

    .body-text blockquote p {
      color:var(--text-secondary); font-style:italic;
      font-size:0.9375rem; margin-bottom:0;
    }

    .body-text blockquote cite {
      display:block; font-size:0.75rem; font-weight:500;
      color:var(--text-muted); font-style:normal; margin-top:0.625rem;
      letter-spacing:0.01em;
    }

    /* pull quote */
    .pull {
      margin:2.5rem 0; padding:2rem 0;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      text-align:center;
    }

    .pull-text {
      font-family: 'gotham_htfbold';
    font-weight: normal;
      font-size:clamp(1.25rem,2.5vw,1.5rem);
      letter-spacing:-0.02em; line-height:1.35;
      background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 50%,#93c5fd 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
      max-width:520px; margin:0 auto;
    }

    /* callouts */
    .callout {
      display:flex; gap:1rem;
      margin:2rem 0; padding:1.25rem 1.5rem;
      border-radius:12px; font-size:0.9375rem; line-height:1.6;
    }

    .callout svg { flex-shrink:0; margin-top:0.1rem; }

    .callout.info {
      background:var(--accent-soft);
      border:1px solid var(--accent-border);
      color:var(--text-secondary);
    }

    .callout.info svg { color:var(--accent); }

    .callout.warn {
      background:rgba(245,158,11,0.08);
      border:1px solid rgba(245,158,11,0.2);
      color:var(--text-secondary);
    }

    .callout.warn svg { color:#f59e0b; }

    /* hr */
    .body-text hr { border:none; border-top:1px solid var(--border); margin:2.5rem 0; }

    /* table */
    .tbl-wrap {
      overflow-x:auto; margin:2rem 0;
      border:1px solid var(--border);
    }

    table { width:100%; border-collapse:collapse; }

    th {
      font-family: 'gotham_htfbold';
    font-weight: normal;
      font-size:0.75rem;
      text-transform:uppercase; letter-spacing:0.1em;
      color:var(--text-muted);
      padding:0.875rem 1.25rem;
      background:var(--bg-secondary);
      border-bottom:1px solid var(--border); text-align:left;
    }

    td {
      padding:0.875rem 1.25rem;
      font-size:0.875rem; color:var(--text-secondary);
      border-bottom:1px solid var(--border);
      vertical-align:top; line-height:1.6;
    }

    /* tr:last-child td { border-bottom:none; } */
    tr:hover td { background:var(--bg-secondary); }
    /* td:first-child { font-weight:600; color:var(--text-primary); } */

    /* ── ARTICLE FOOTER ── */
    .art-footer { margin-top:4rem; }

    /* tags */
    .tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2.5rem; }

    .tag-chip {
      padding:0.375rem 0.875rem; border-radius:6px;
      border:1px solid var(--border);
      background:var(--bg-card);
      font-size:0.8125rem; font-weight:500;
      color:var(--text-secondary); text-decoration:none;
      transition:all 0.3s ease; cursor:pointer;
    }

    .tag-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

    /* author bio */
    .bio-card {
      display:flex; gap:1.5rem;
      padding:2rem;
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:16px; margin-bottom:2.5rem; align-items:flex-start;
      transition:all 0.3s ease;
    }

    .bio-card:hover { border-color:var(--accent-border); }

    .bio-av {
      width:64px; height:64px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-family: 'gotham_htfbold';
    font-weight: normal; font-size:1.125rem;
      color:#fff; flex-shrink:0;
      background:linear-gradient(135deg,#3b82f6,#6366f1);
    }

    .bio-name { font-family: 'gotham_htfbold';
    font-weight: normal; font-size:1rem; color:var(--text-primary); margin-bottom:0.125rem; }
    .bio-role { font-size:0.875rem; color:var(--accent); font-weight:500; margin-bottom:0.875rem; }
    .bio-text { font-size:0.9375rem; color:var(--text-secondary); line-height:1.6; margin-bottom:1rem; }
    .bio-links { display:flex; gap:0.5rem; }

    .bio-link {
      padding:0.375rem 0.875rem; border-radius:6px;
      border:1px solid var(--border); background:none;
      font-size:0.8125rem; font-weight:500; color:var(--text-secondary);
      text-decoration:none; transition:all 0.3s ease;
    }

    .bio-link:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

    /* up next */
    .up-next-lbl {
      font-size:0.75rem; font-weight:500;
      text-transform:uppercase; letter-spacing:0.1em;
      color:var(--text-muted); margin-bottom:1rem;
    }

    .up-next {
      display:flex; gap:1.25rem;
      padding:1.5rem;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:16px; text-decoration:none; color:inherit;
      margin-bottom:3rem; transition:all 0.3s ease;
      align-items:center;
    }

    .up-next:hover {
      border-color:var(--accent-border);
      background:var(--bg-card-hover);
      transform:translateY(-4px);
      box-shadow:0 20px 50px rgba(0,0,0,0.3);
    }

    .un-thumb {
      width:72px; height:72px; border-radius:12px;
      background:linear-gradient(145deg,#080c18,#101a34);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }

    .un-type { font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:0.375rem; }
    .un-title { font-family: 'gotham_htfbold';
    font-weight: normal; font-size:1rem; color:var(--text-primary); line-height:1.1; }

    /* CTA */
    /* spec: CTA section padding 8rem 0 */
    .cta {
      position:relative; overflow:hidden;
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:16px; padding:8rem 2rem;
      text-align:center;
    }

    /* spec: CTA glow 600x600 radial */
    .cta::after {
      content:'';
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:600px; height:600px;
      background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
      pointer-events:none;
    }

    .cta-grid {
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
      background-size:44px 44px;
    }

    .cta-inner { position:relative; z-index:1; }

    /* spec: section h2 clamp(1.75rem, 4vw, 2.5rem) */
    .cta-title {
      font-size:clamp(1.75rem, 4vw, 2.5rem);
      font-weight:700; letter-spacing:-0.02em;
      color:var(--text-primary); margin-bottom:0.75rem;
    }

    .cta-sub {
      font-size:1.25rem; font-weight:400;
      color:var(--text-secondary); line-height:1.6;
      max-width:460px; margin:0 auto 2.5rem;
    }

    /* spec: btn-primary: gradient-cta, DM Sans, 0.875rem/600, 50px radius, 1rem 2rem, gap 0.5rem */
    .btn-cta {
      display:inline-flex; align-items:center; gap:0.5rem;
      padding:1rem 2rem;
      background:var(--gradient-cta); color:#fff;
      font-family: 'gotham_htfbold';
    font-weight: normal; font-size:0.875rem;
      border:none; border-radius:50px; cursor:pointer;
      text-decoration:none; transition:all 0.3s ease;
    }

    .btn-cta:hover {
      background:var(--gradient-cta-hover);
      transform:translateY(-2px);
      box-shadow:0 8px 30px rgba(99,102,241,0.4);
    }

    /* ── SIDEBAR ── */
    .sidebar {
      position:sticky; top:2rem;
      display:flex; flex-direction:column; gap:1.5rem;
    }

    .sb-block {
      background:var(--bg-secondary);
      border:1px solid var(--border);
      border-radius:16px; padding:1.5rem;
    }

    .sb-title {
      font-size:0.75rem; font-weight:500;
      text-transform:uppercase; letter-spacing:0.1em;
      color:var(--text-muted); margin-bottom:1rem;
    }

    /* TOC */
    .toc { list-style:none; }
    .toc li { margin-bottom:0.125rem; }

    .toc a {
      display:block; padding:0.375rem 0.75rem;
      font-size:0.8125rem; color:var(--text-muted);
      text-decoration:none; border-radius:6px;
      border-left:2px solid transparent;
      line-height:1.4; transition:all 0.3s ease;
    }

    .toc a:hover { color:var(--text-secondary); background:rgba(255,255,255,0.03); }

    .toc a.active {
      color:var(--accent); border-left-color:var(--accent);
      background:var(--accent-soft); font-weight:500;
    }

    .toc a.sub { padding-left:1.375rem; font-size:0.75rem; }

    /* share sb */
    .sb-share { display:flex; gap:0.375rem; }

    .sb-share-btn {
      flex:1; padding:0.5rem 0.25rem;
      border-radius:6px; border:1px solid var(--border);
      background:none; color:var(--text-secondary);
      font-family: 'gotham_htfbold';
    font-weight: normal; font-size:0.75rem; 
      cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:0.3rem;
      transition:all 0.3s ease;
    }

    .sb-share-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

    /* related */
    .rel-list { list-style:none; }

    .rel-item {
      display:flex; gap:0.625rem; align-items:flex-start;
      padding:0.625rem 0.375rem; border-radius:8px;
      text-decoration:none; color:inherit;
      transition:background 0.3s ease;
    }

    .rel-item:hover { background:rgba(255,255,255,0.03); }

    .rel-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; margin-top:0.45rem; }
    .rel-title { font-size:0.8125rem; font-weight:500; line-height:1.45; color:var(--text-secondary); }
    .rel-meta  { font-size:0.75rem; color:var(--text-muted); margin-top:0.15rem; }

    /* ── RESPONSIVE ── */
    @media (max-width:1024px) {
      .outer { grid-template-columns:1fr; gap:0; }
      .sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:3rem; order:-1; }
    }

    @media (max-width:768px) {
      .outer { padding:3rem 2rem 5rem; }
      .sidebar { grid-template-columns:1fr; }
      .vis-stats { flex-direction:column; }
      .vis-stat + .vis-stat { border-left:none; border-top:1px solid rgba(255,255,255,0.05); }
      .byline { gap:0.625rem; }
      .bl-stats { margin-left:0; width:100%; gap:0.75rem; }
      .bio-card { flex-direction:column; }
      .cta { padding:2.5rem 1.5rem; }
    }

    @media (max-width:640px) {
      .outer { padding:2.5rem 1.5rem 4rem; }
    }

    /* spec: pulse animation for badge indicator */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(1.2); }
    }

    /* spec: fadeInUp animation */
    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .a0 { animation:fadeInUp 0.8s ease forwards; }
    .a1 { animation:fadeInUp 0.8s ease 0.1s forwards; opacity:0; }
    .a2 { animation:fadeInUp 0.8s ease 0.2s forwards; opacity:0; }

    /* spec: section-label, red with flanking rules */
    .section-label {
      display:inline-flex; align-items:center; gap:0.5rem;
      font-size:0.75rem; font-weight:500;
      text-transform:uppercase; letter-spacing:0.1em;
      color:var(--problem-red); margin-bottom:1rem;
    }

    .section-label::before,
    .section-label::after {
      content:''; width:20px; height:1px;
      background:var(--problem-red);
    }

    section table {
        margin-bottom: 0;
    }