/* === Problem Section (from Problem.tsx) ===
   Classes: py-24 lg:py-32 bg-brand-navy relative
*/
.problem-section {
    position: relative;
    padding: 6rem 0 6rem;
    background: var(--navy);
}

@media(min-width:1024px) {
    .problem-section {
        padding: 8rem 0 8rem;
    }
}

.problem-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* absolute top-0 right-0 w-[800px] h-[800px] bg-brand-earth/5 rounded-full blur-[120px] */
.problem-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
    height: 800px;
    background: color-mix(in srgb, var(--earth) 5%, transparent);
    border-radius: 50%;
    filter: blur(120px);
}

/* grid lg:grid-cols-12 gap-12 lg:gap-16 items-start */
.problem-grid {
    display: grid;
    gap: 3rem;
}

@media(min-width:1024px) {
    .problem-grid {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
        align-items: start;
    }
}

/* lg:col-span-5 lg:sticky lg:top-32 */
.problem-heading {
    position: relative;
}

@media(min-width:1024px) {
    .problem-heading {
        position: sticky;
        top: 8rem;
    }
}

/* text-4xl lg:text-6xl font-semibold tracking-tight text-white mb-6 leading-[1.1] */
.problem-heading h2 {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

@media(min-width:1024px) {
    .problem-heading h2 {
        font-size: 3.75rem;
    }
}

/* text-xl text-brand-cream/70 leading-relaxed */
.problem-heading p {
    font-size: 1.25rem;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    line-height: 1.625;
}

/* lg:col-span-7 space-y-6 */
.problem-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media(min-width:1024px) {
    .problem-cards {
        margin-top: 3.5rem;
        /* Aligns cards with the h2 instead of the badge */
    }
}

/* Card: bg-white/5 backdrop-blur-lg rounded-3xl p-8 lg:p-10 border border-white/10
   hover:bg-white/[0.07] transition-colors group relative overflow-hidden */
.problem-card {
    background: color-mix(in srgb, var(--white) 5%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
}

@media(min-width:1024px) {
    .problem-card {
        padding: 2.5rem;
    }
}

.problem-card:hover {
    background: color-mix(in srgb, var(--white) 7%, transparent);
}

/* Glow: absolute top-0 right-0 w-32 h-32 bg-brand-earth/10 rounded-full blur-[50px]
   group-hover:bg-brand-earth/20 */
.problem-card-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: color-mix(in srgb, var(--earth) 10%, transparent);
    border-radius: 50%;
    filter: blur(50px);
    transition: background 0.3s;
}

.problem-card:hover .problem-card-glow {
    background: color-mix(in srgb, var(--earth) 20%, transparent);
}

.problem-card-content {
    position: relative;
    z-index: 10;
}

/* Icon: w-14 h-14 rounded-2xl bg-brand-earth/10 border-brand-earth/20 text-brand-earth */
.problem-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--earth) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--earth) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--earth);
    transition: transform 0.5s;
}

.problem-card:hover .problem-card-icon {
    transform: scale(1.1);
}

/* Title: text-2xl font-semibold text-white mb-4 */
.problem-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

/* Desc: text-lg text-brand-cream/60 leading-relaxed */
.problem-card-desc {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
}

/* === Solution / Bento Grid (from Solution.tsx) ===
   Classes: py-24 lg:py-32 bg-brand-sand relative
*/
.solution-section {
    padding: 6rem 0;
    background: var(--sand);
    position: relative;
}

@media(min-width:1024px) {
    .solution-section {
        padding: 8rem 0;
    }
}

/* grid md:grid-cols-3 gap-6 auto-rows-[minmax(280px,auto)] */
.bento-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media(min-width:768px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(280px, auto);
    }
}

/* Card: bg-brand-navy rounded-3xl p-8 border-white/5 hover:border-brand-earth/30 */
.bento-card {
    background: var(--navy);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    border-color: color-mix(in srgb, var(--earth) 30%, transparent);
}

/* Span classes */
@media(min-width:768px) {
    .bento-card-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .bento-card-wide {
        grid-column: span 2;
    }

    .bento-card-tall {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* Hover gradient overlay for large cards */
.bento-card-hover-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--earth) 5%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.bento-card:hover .bento-card-hover-bg {
    opacity: 1;
}

.bento-card-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Icon: w-12 h-12 rounded-xl bg-white/5 text-brand-earth
   group-hover:bg-brand-earth group-hover:text-white */
.bento-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--earth);
    transition: all 0.3s;
}

.bento-card:hover .bento-icon {
    background: var(--earth);
    color: #ffffff;
}

/* Title: font-semibold text-white mb-3 */
.bento-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.bento-title-lg {
    font-size: 1.875rem;
}

/* Desc: text-brand-cream/60 leading-relaxed mb-8 flex-1 */
.bento-desc {
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
    margin-bottom: 2rem;
    flex: 1;
}

/* Link: text-sm font-medium text-white/50 hover:text-brand-earth */
.bento-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    transition: color 0.2s;
    margin-top: auto;
    width: fit-content;
}

.bento-link:hover {
    color: var(--earth);
}

.bento-link svg {
    transition: transform 0.3s;
}

.bento-card:hover .bento-link svg {
    transform: translateX(4px);
}

/* Dashboard mini (inside first card) */
.bento-dashboard {
    margin-bottom: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bento-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media(min-width:640px) {
    .bento-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* bg-white/5 rounded-2xl p-4 border-white/5 */
.bento-stat-card {
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bento-score-ring {
    position: relative;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

.bento-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bento-ring-bg {
    stroke: color-mix(in srgb, var(--white) 10%, transparent);
}

.bento-ring-fill {
    stroke: #22c55e;
}

.bento-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 0.875rem;
}

.bento-stat-label {
    color: var(--white);
    font-weight: 500;
    font-size: 0.875rem;
}

.bento-stat-status {
    font-size: 0.75rem;
}

/* Stats list variant */
.bento-stat-list {
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

.bento-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

.bento-stat-row-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: color-mix(in srgb, var(--white) 70%, transparent);
}

.bento-stat-row-value {
    color: var(--white);
    font-weight: 500;
}

/* Tags: flex flex-wrap gap-2 */
.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bento-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.bento-tag-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
}

.dot-green {
    background: #22c55e;
}

.dot-amber {
    background: #f59e0b;
}

.dot-earth {
    background: var(--earth);
}

/* === How It Works (from HowItWorks.tsx) ===
   Classes: py-24 lg:py-32 bg-brand-navy relative overflow-hidden
*/
.how-it-works-section {
    padding: 6rem 0;
    background: var(--navy);
    position: relative;
    overflow: hidden;
}

@media(min-width:1024px) {
    .how-it-works-section {
        padding: 8rem 0;
    }
}

/* Header: mb-24 md:mb-32 */
.hiw-header {
    margin-bottom: 6rem;
}

@media(min-width:768px) {
    .hiw-header {
        margin-bottom: 8rem;
    }
}

/* text-4xl lg:text-5xl font-semibold tracking-tight text-white max-w-2xl */
.hiw-header h2 {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--white);
    max-width: 42rem;
}

@media(min-width:1024px) {
    .hiw-header h2 {
        font-size: 3rem;
    }
}

/* Steps: space-y-24 md:space-y-32 relative */
.hiw-steps {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    position: relative;
}

@media(min-width:768px) {
    .hiw-steps {
        gap: 8rem;
    }
}

/* Vertical line: hidden md:block absolute left-[39px] top-10 bottom-10
   w-0.5 bg-gradient-to-b from-brand-earth/50 via-brand-earth/20 to-transparent */
.hiw-line {
    display: none;
}

@media(min-width:768px) {
    .hiw-line {
        display: block;
        position: absolute;
        left: 39px;
        top: 2.5rem;
        bottom: 2.5rem;
        width: 2px;
        background: linear-gradient(to bottom,
                color-mix(in srgb, var(--earth) 50%, transparent),
                color-mix(in srgb, var(--earth) 20%, transparent),
                transparent);
    }
}

/* Step: relative flex flex-col md:flex-row gap-8 md:gap-16 items-start group */
.hiw-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}

@media(min-width:768px) {
    .hiw-step {
        flex-direction: row;
        gap: 4rem;
    }
}

/* Oversized number: absolute -top-10 -left-4 md:-left-12
   text-[120px] md:text-[180px] font-bold text-white/[0.02]
   group-hover:text-white/[0.04] */
.hiw-step-number {
    position: absolute;
    top: -2.5rem;
    left: -1rem;
    font-size: 7.5rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--white) 2%, transparent);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    transition: color 0.5s;
}

@media(min-width:768px) {
    .hiw-step-number {
        font-size: 11.25rem;
        left: -3rem;
    }
}

.hiw-step:hover .hiw-step-number {
    color: color-mix(in srgb, var(--white) 4%, transparent);
}

/* Icon box: relative z-10 w-20 h-20 rounded-2xl bg-brand-sand border-white/10
   group-hover:border-brand-earth/50 shadow-xl */
.hiw-step-icon {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background: var(--sand);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    flex-shrink: 0;
    color: var(--earth);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
    transition: border-color 0.5s;
}

.hiw-step:hover .hiw-step-icon {
    border-color: color-mix(in srgb, var(--earth) 50%, transparent);
}

/* Content: relative z-10 pt-2 max-w-2xl */
.hiw-step-content {
    position: relative;
    z-index: 10;
    padding-top: 0.5rem;
    max-width: 42rem;
}

/* Title: text-2xl md:text-3xl font-semibold text-white mb-4 */
.hiw-step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

@media(min-width:768px) {
    .hiw-step-title {
        font-size: 1.875rem;
    }
}

/* Desc: text-lg md:text-xl text-brand-cream/60 leading-relaxed */
.hiw-step-desc {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
}

@media(min-width:768px) {
    .hiw-step-desc {
        font-size: 1.25rem;
    }
}

/* CTA: mt-32 pt-12 border-t border-white/10 flex flex-col sm:flex-row justify-between */
.hiw-cta {
    margin-top: 8rem;
    padding-top: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

@media(min-width:640px) {
    .hiw-cta {
        flex-direction: row;
        justify-content: space-between;
    }
}

.hiw-cta-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.hiw-cta-subtitle {
    color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* === Comparison Section (from Comparison.tsx) ===
   Classes: py-24 lg:py-40 bg-brand-sand relative
*/
.comparison-section {
    padding: 6rem 0;
    background: var(--sand);
    position: relative;
}

@media(min-width:1024px) {
    .comparison-section {
        padding: 6rem 0 10rem;
    }
}

.comparison-table-wrapper {
    position: relative;
}

/* Glow: absolute top-0 bottom-0 left-[33%] w-[17%] bg-brand-earth/5 */
.comparison-glow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33%;
    width: 17%;
    background: color-mix(in srgb, var(--earth) 5%, transparent);
    border-radius: 1rem;
    filter: blur(16px);
    pointer-events: none;
    display: none;
}

@media(min-width:768px) {
    .comparison-glow {
        display: block;
    }
}

/* Table scroll: overflow-x-auto pt-6 pb-8 */
.comparison-scroll {
    overflow-x: auto;
    padding: 1.5rem 0 2rem;
    position: relative;
    z-index: 10;
}

/* w-full text-left border-collapse min-w-[900px] */
.comparison-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    min-width: 900px;
}

/* th Capability: p-6 border-b border-white/10 font-medium text-white/50 w-1/3 text-lg */
.comp-th-cap {
    padding: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-weight: 500;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    width: 33%;
    font-size: 1.125rem;
}

/* th Zensor: p-6 border-b-2 border-brand-earth bg-brand-earth/10 font-semibold text-white
   rounded-t-2xl text-lg relative */
.comp-th-zensor {
    padding: 1.5rem;
    border-bottom: 2px solid var(--earth);
    background: color-mix(in srgb, var(--earth) 10%, transparent);
    font-weight: 600;
    color: var(--white);
    border-radius: 1rem 1rem 0 0;
    font-size: 1.125rem;
    position: relative;
}

/* Badge: absolute -top-3 left-1/2 -translate-x-1/2 bg-brand-earth text-[#ffffff]
   text-[10px] font-bold uppercase tracking-wider py-1 px-3 rounded-full */
.comp-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--earth);
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* th (others): p-6 border-b border-white/10 font-medium text-white/50 text-lg */
.comp-th {
    padding: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-weight: 500;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    font-size: 1.125rem;
}

/* Row hover: group-hover:bg-white/[0.02] */
.comp-row:hover td {
    background: color-mix(in srgb, var(--white) 2%, transparent);
}

/* td name: p-6 text-white/90 font-medium border-b border-white/5 */
.comp-td-name {
    padding: 1.5rem;
    color: color-mix(in srgb, var(--white) 90%, transparent);
    font-weight: 500;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: background 0.2s;
}

/* td zensor: p-6 bg-brand-earth/[0.08] border-b border-brand-earth/20 font-semibold text-white */
.comp-td-zensor {
    padding: 1.5rem;
    background: color-mix(in srgb, var(--earth) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--earth) 20%, transparent);
    font-weight: 600;
    color: var(--white);
}

/* td others: p-6 text-white/50 border-b border-white/5 */
.comp-td {
    padding: 1.5rem;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: background 0.2s;
}

.comp-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Check icon: w-6 h-6 rounded-full bg-brand-earth/20 text-brand-earth */
.comp-check {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--earth) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--earth);
}

/* === Social Proof (from SocialProof.tsx) ===
   Classes: py-24 lg:py-32 bg-brand-sand
*/
.social-proof-section {
    padding: 6rem 0;
    background: var(--sand);
}

@media(min-width:1024px) {
    .social-proof-section {
        padding: 8rem 0;
    }
}

/* Testimonials grid: grid md:grid-cols-2 gap-8 md:gap-12 mb-20 */
.testimonials-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 5rem;
}

@media(min-width:768px) {
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

/* Card: bg-white rounded-2xl p-8 lg:p-10 shadow-sm border */
.testimonial-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

@media(min-width:1024px) {
    .testimonial-card {
        padding: 2.5rem;
    }
}

/* Dark mode: bg-white/5 border-white/10 */
.dark .testimonial-card {
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border-color: color-mix(in srgb, var(--white) 10%, transparent);
}

.testimonial-quote-icon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: color-mix(in srgb, var(--earth) 10%, transparent);
}

.testimonial-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.star-icon {
    color: var(--earth);
}

/* text-lg lg:text-xl text-brand-cream/80 leading-relaxed italic */
.testimonial-text {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
}

@media(min-width:1024px) {
    .testimonial-text {
        font-size: 1.25rem;
    }
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--white);
}

.testimonial-name {
    font-weight: 600;
    color: var(--white);
}

.testimonial-role {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* Stats: grid grid-cols-2 md:grid-cols-4 gap-8 border-t pt-16 */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    padding-top: 4rem;
}

@media(min-width:768px) {
    .stats-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === USE CASE INNER === */
/* Hero Section */
.uci-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 6rem 0;
}

@media(min-width: 1024px) {
    .uci-hero {
        padding: 8rem 0;
    }
}

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

.uci-hero-grid-layout {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media(min-width: 1024px) {
    .uci-hero-grid-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.uci-hero-title {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

@media(min-width: 1024px) {
    .uci-hero-title {
        font-size: 3.75rem;
    }
}

.uci-hero-desc {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    margin-bottom: 2rem;
    line-height: 1.625;
}

.uci-hero-box {
    background: color-mix(in srgb, var(--sand) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.uci-hero-box p {
    color: color-mix(in srgb, var(--cream) 90%, transparent);
    font-size: 0.875rem;
    line-height: 1.625;
    margin: 0;
}

.uci-hero-btn-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

@media(min-width: 640px) {
    .uci-hero-btn-group {
        flex-direction: row;
        align-items: center;
    }
}

.uci-hero-btn,
.uci-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uci-hero-dashboard {
    position: relative;
    width: 100%;
}

@media(min-width: 1024px) {
    .uci-hero-dashboard {
        margin-left: auto;
    }
}

.uci-hero-dashboard-container {
    position: relative;
    background: var(--sand);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.uci-hero-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    padding-bottom: 1rem;
}

.uci-hero-client-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.uci-hero-client-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
}

/* Social Proof Bar */
.uci-social-proof {
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    background: color-mix(in srgb, var(--sand) 50%, transparent);
    position: relative;
    z-index: 10;
}

.uci-social-proof-grid {
    display: flex;
    flex-direction: column;
}

@media(min-width: 768px) {
    .uci-social-proof-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.uci-social-proof-item {
    padding: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
}

@media(min-width: 768px) {
    .uci-social-proof-item {
        padding: 2rem;
        border-bottom: none;
        border-right: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    }

    .uci-social-proof-item:last-child {
        border-right: none;
    }
}

.uci-social-proof-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.uci-social-proof-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.uci-social-proof-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--cream) 90%, transparent);
}

.uci-social-proof-text {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--cream) 50%, transparent);
    margin-top: 0.25rem;
}

/* SECTION TITLE (Shared) */
.uci-section-title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 1.5rem;
}

@media(min-width: 1024px) {
    .uci-section-title {
        font-size: 2.25rem;
    }
}

/* THE CHALLENGE */
.uci-challenge {
    padding: 6rem 0;
    background: var(--sand);
    position: relative;
    z-index: 10;
}

@media(min-width: 1024px) {
    .uci-challenge {
        padding: 8rem 0;
    }
}

.uci-challenge-header {
    margin-bottom: 3rem;
}

.uci-challenge-grid {
    display: grid;
    gap: 3rem;
}

@media(min-width: 1024px) {
    .uci-challenge-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.uci-challenge-text {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    line-height: 1.625;
}

.uci-challenge-text p {
    margin-bottom: 1.5rem;
}

.uci-challenge-box {
    background: var(--navy);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.uci-challenge-box ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uci-challenge-box li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.uci-challenge-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #fbbf24;
    flex-shrink: 0;
}

.uci-challenge-box span {
    color: color-mix(in srgb, var(--cream) 90%, transparent);
    line-height: 1.625;
}

/* HOW ZENSOR SOLVES IT */
.uci-solution {
    padding: 6rem 0;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    position: relative;
    z-index: 10;
}

.uci-solution-content {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
}

.uci-solution-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1.5rem;
}

@media(min-width: 1024px) {
    .uci-solution-title {
        font-size: 1.875rem;
    }
}

.uci-solution-desc {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    line-height: 1.625;
}

/* FEATURES (Section 5) */
.uci-features {
    padding: 6rem 0;
    position: relative;
    z-index: 10;
}

@media(min-width: 1024px) {
    .uci-features {
        padding: 8rem 0;
    }
}

.uci-features-header {
    margin-bottom: 4rem;
}

.uci-features-desc {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    max-width: 48rem;
}

.uci-features-grid {
    display: grid;
    gap: 2rem;
}

@media(min-width: 768px) {
    .uci-features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.uci-features-card {
    background: var(--sand);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.3s;
}

.uci-features-card:hover {
    border-color: color-mix(in srgb, var(--white) 10%, transparent);
}

.uci-features-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

.uci-features-card p {
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    line-height: 1.625;
    margin-bottom: 1.5rem;
}

.uci-features-card ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 0;
    list-style: none;
}

.uci-features-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.uci-features-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--earth);
    flex-shrink: 0;
}

.uci-features-card span {
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    font-size: 0.875rem;
    line-height: 1.625;
}

.uci-features-card-link {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    display: inline-flex;
    align-items: center;
    color: var(--earth);
    font-weight: 500;
    transition: color 0.3s;
    text-decoration: none;
}

/* WORKFLOW (Section 6) */
.uci-workflow {
    padding: 6rem 0;
    background: var(--sand);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    position: relative;
    z-index: 10;
}

.uci-workflow-header {
    text-align: center;
    margin-bottom: 4rem;
}

.uci-workflow-grid {
    display: grid;
    gap: 1.5rem;
}

@media(min-width: 768px) {
    .uci-workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .uci-workflow-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.uci-workflow-card {
    background: var(--navy);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
}

.uci-workflow-step {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--earth);
    /* theme orange */
    color: var(--white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.uci-workflow-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.uci-workflow-card p {
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
    font-size: 0.875rem;
}

/* BEFORE & AFTER (Section 7) */
.uci-before-after {
    padding: 6rem 0;
    position: relative;
    z-index: 10;
}

.uci-before-after-header {
    text-align: center;
    margin-bottom: 4rem;
}

.uci-table-wrapper {
    overflow-x: auto;
}

.uci-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.uci-table th {
    padding: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-weight: 600;
    color: var(--white);
}

.uci-table th.uci-th-task {
    width: 25%;
}

.uci-table th.uci-th-before {
    width: 37.5%;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border-top-left-radius: 0.75rem;
}

.uci-table th.uci-th-after {
    width: 37.5%;
    background: rgba(251, 146, 60, 0.05);
    /* orange-400/5 */
    border-bottom-color: rgba(251, 146, 60, 0.5);
    /* orange-400/50 */
    color: var(--earth);
    /* brand orange */
    border-top-right-radius: 0.75rem;
}

.uci-table td {
    padding: 1.5rem;
}

.uci-table tr {
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: background-color 0.3s;
}

.uci-table tr:hover {
    background-color: color-mix(in srgb, var(--white) 5%, transparent);
}

.uci-table td.uci-td-task {
    color: var(--white);
    font-weight: 500;
}

.uci-table td.uci-td-before {
    color: color-mix(in srgb, var(--cream) 50%, transparent);
    background: color-mix(in srgb, var(--white) 5%, transparent);
}

.uci-table td.uci-td-after {
    color: color-mix(in srgb, var(--cream) 90%, transparent);
    background: rgba(251, 146, 60, 0.05);
}

.uci-td-after-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.uci-ba-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--earth);
    /* brand orange */
    flex-shrink: 0;
}

/* TESTIMONIALS (Section 8) */
.uci-testimonials {
    padding: 6rem 0;
    background: var(--sand);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    position: relative;
    z-index: 10;
}

.uci-testimonials-header {
    text-align: center;
    margin-bottom: 4rem;
}

.uci-testimonials-grid {
    display: grid;
    gap: 2rem;
}

@media(min-width: 1024px) {
    .uci-testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.uci-testimonial-card {
    background: var(--navy);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uci-testimonial-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    background: var(--earth);
    /* theme orange */
}

.uci-testimonial-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(251, 146, 60, 0.2); /* theme orange tint */
    margin-bottom: 1.5rem;
}

.uci-testimonial-quote {
    color: color-mix(in srgb, var(--cream) 90%, transparent);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.625;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.uci-testimonial-author {
    margin-top: auto;
}

.uci-testimonial-name {
    font-weight: 600;
    color: var(--white);
    font-size: 1.125rem;
}

.uci-testimonial-role {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    margin-bottom: 1rem;
}

.uci-testimonial-outcome {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.uci-testimonial-outcome span:first-child {
    font-size: 0.75rem;
    color: var(--earth);
    /* theme orange */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.uci-testimonial-outcome span:last-child {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
}

/* EXPLORE (Section 9) */
.uci-explore {
    padding: 6rem 0;
    position: relative;
    z-index: 10;
}

.uci-explore-header {
    margin-bottom: 3rem;
}

.uci-explore-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

@media(min-width: 1024px) {
    .uci-explore-header h2 {
        font-size: 1.875rem;
    }
}

.uci-explore-header p {
    color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.uci-explore-grid {
    display: grid;
    gap: 1rem;
}

@media(min-width: 640px) {
    .uci-explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .uci-explore-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.uci-explore-card {
    background: var(--sand);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.uci-explore-card:hover {
    border-color: color-mix(in srgb, var(--white) 20%, transparent);
    background: color-mix(in srgb, var(--white) 5%, transparent);
}

.uci-explore-icon {
    width: 2rem;
    height: 2rem;
    color: var(--earth);
    margin-bottom: 1rem;
}

.uci-explore-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.uci-explore-card:hover h3 {
    color: var(--earth);
}

.uci-explore-card p {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    margin-bottom: 1rem;
}

.uci-explore-link {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--earth);
}

/* FAQ (Section 10) */
.uci-faq {
    padding: 6rem 0;
    background: var(--sand);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    position: relative;
    z-index: 10;
}

@media(min-width: 1024px) {
    .uci-faq {
        padding: 8rem 0;
    }
}

.uci-faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.uci-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto;
}

.uci-faq-item {
    background: var(--navy);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-radius: 1rem;
    overflow: hidden;
}

.uci-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.uci-faq-trigger span {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--white);
    padding-right: 2rem;
}

.uci-faq-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.uci-faq-content-inner {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
}


/* === Use Cases Hub (page-use-cases-hub.php) ===
   Classes extracted from usecase.js React template
*/
.uchub-page {
    background: var(--navy);
    color: var(--white);
    min-height: 100vh;
}

/* SECTION 1: HERO */
.uchub-hero {
    position: relative;
    width: 100%;
    padding: 8rem 0 5rem;
    overflow: hidden;
}

@media(min-width: 1024px) {
    .uchub-hero {
        padding: 10rem 0 5rem;
    }
}

.uchub-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.uchub-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}

.uchub-hero-glow-1 {
    position: absolute;
    top: -20%;
    left: 20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--earth) 10%, transparent);
    filter: blur(120px);
}

.uchub-hero-glow-2 {
    position: absolute;
    bottom: -20%;
    right: 10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    /* blue-500/10 */
    filter: blur(120px);
}

.uchub-title {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

@media(min-width: 1024px) {
    .uchub-title {
        font-size: 3.75rem;
    }
}

.uchub-subtitle {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    margin-bottom: 2.5rem;
    line-height: 1.625;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 1024px) {
    .uchub-subtitle {
        font-size: 1.25rem;
    }
}

.uchub-hero-btn {
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--earth) 20%, transparent);
}

/* SECTION 2: AEO */
.uchub-aeo {
    padding: 4rem 0;
    background: var(--sand);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
}

.uchub-aeo-card {
    background: color-mix(in srgb, var(--navy) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media(min-width: 1024px) {
    .uchub-aeo-card {
        padding: 2.5rem;
    }
}

/* SECTION 3: CARDS */
.uchub-cards-section {
    padding: 6rem 0;
}

@media(min-width: 1024px) {
    .uchub-cards-section {
        padding: 8rem 0;
    }
}

.uchub-cards-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media(min-width: 1024px) {
    .uchub-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.uchub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sand);
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    padding: 2rem;
    transition: all 0.3s;
}

.uchub-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.hover-border-earth:hover {
    border-color: color-mix(in srgb, var(--earth) 50%, transparent);
}

.hover-border-blue:hover {
    border-color: rgba(96, 165, 250, 0.5);
}

.hover-border-purple:hover {
    border-color: rgba(192, 132, 252, 0.5);
}

.uchub-card-icon-wrap {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: transform 0.3s;
}

.bg-brand-earth-10 {
    background: color-mix(in srgb, var(--earth) 10%, transparent);
}

.bg-blue-400-10 {
    background: rgba(96, 165, 250, 0.1);
}

.bg-purple-400-10 {
    background: rgba(192, 132, 252, 0.1);
}

.uchub-card:hover .group-hover-scale {
    transform: scale(1.1) rotate(-3deg);
}

.uchub-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
    transition: color 0.3s;
}

.hover-border-earth:hover .group-hover-text-earth {
    color: var(--earth);
}

.uchub-card-quote {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--white) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    font-style: italic;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    font-size: 0.875rem;
}

.uchub-card-desc {
    color: color-mix(in srgb, var(--cream) 60%, transparent);
    line-height: 1.625;
    margin-bottom: 2rem;
}

.uchub-card-bullets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.uchub-bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.uchub-bullet-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.text-blue-400 {
    color: #60a5fa;
}

.text-purple-400 {
    color: #c084fc;
}

.uchub-bullet-label {
    display: block;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--cream) 50%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.uchub-bullet-text {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
}

.uchub-card-footer {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--white) 50%, transparent);
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: color 0.3s;
}

.uchub-card:hover .uchub-card-footer {
    color: var(--white);
}

.uchub-card:hover .group-hover-translate-x {
    transform: translateX(4px);
    transition: transform 0.3s;
}

/* SECTION 4: WORKFLOW */
.uchub-workflow-section {
    padding: 6rem 0;
    background: var(--sand);
    border-top: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
}

.uchub-workflow-header h2 {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 4rem;
}

@media(min-width: 1024px) {
    .uchub-workflow-header h2 {
        font-size: 2.25rem;
    }
}

.uchub-table-wrap {
    overflow-x: auto;
}

.uchub-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    min-width: 800px;
}

.uchub-th {
    padding: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    font-weight: 600;
    color: var(--white);
}

.w-1-4 {
    width: 25%;
}

.w-3-8 {
    width: 37.5%;
}

.uchub-th-red {
    background: rgba(239, 68, 68, 0.05);
    /* red-500/5 */
}

.uchub-th-earth {
    background: color-mix(in srgb, var(--earth) 5%, transparent);
    color: var(--earth);
    border-bottom-color: color-mix(in srgb, var(--earth) 50%, transparent);
}

.rounded-tl {
    border-top-left-radius: 0.75rem;
}

.rounded-tr {
    border-top-right-radius: 0.75rem;
}

.uchub-tr {
    border-bottom: 1px solid color-mix(in srgb, var(--white) 5%, transparent);
    transition: background 0.2s;
}

.uchub-tr:hover {
    background: color-mix(in srgb, var(--white) 5%, transparent);
}

.uchub-td {
    padding: 1.5rem;
}

.bg-red-50 {
    background: rgba(239, 68, 68, 0.05);
    color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.bg-earth-5 {
    background: color-mix(in srgb, var(--earth) 5%, transparent);
    color: color-mix(in srgb, var(--cream) 90%, transparent);
}

.uchub-x-icon {
    color: rgba(248, 113, 113, 0.5);
    /* red-400/50 */
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.uchub-check-icon {
    color: var(--earth);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* CTA */
.uchub-cta {
    padding: 6rem 0;
}

.uchub-cta-card {
    background: var(--sand);
    border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
    border-radius: 1.5rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

@media(min-width: 1024px) {
    .uchub-cta-card {
        padding: 4rem;
    }
}

.uchub-cta-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}

.uchub-cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: color-mix(in srgb, var(--earth) 20%, transparent);
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.uchub-cta-title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 1.5rem;
}

@media(min-width: 1024px) {
    .uchub-cta-title {
        font-size: 3rem;
    }
}

.uchub-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media(min-width: 640px) {
    .uchub-cta-actions {
        flex-direction: row;
    }
}

.uchub-cta-btn {
    width: 100%;
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--earth) 20%, transparent);
}

@media(min-width: 640px) {
    .uchub-cta-btn {
        width: auto;
    }
}

.uchub-cta-link {
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, var(--cream) 80%, transparent);
    font-weight: 500;
    transition: color 0.3s;
}

.uchub-cta-link:hover {
    color: var(--white);
}

/* ==========================================================================
   USE CASE INNER PAGE (.uci-*)
   ========================================================================== */

.uci-page {
    background-color: var(--navy);
    color: var(--white);
    min-height: 100vh;
}

.uci-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}

.uci-hero-glow-earth {
    position: absolute;
    top: -20%;
    left: 20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--earth) 10%, transparent);
    filter: blur(120px);
}

.uci-hero-glow-blue {
    position: absolute;
    bottom: -20%;
    right: 10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    filter: blur(120px);
}

.uci-hero-card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: linear-gradient(to right, var(--earth), #3b82f6, var(--earth));
}

.uci-hero-dashboard {
    max-width: 600px;
}

.uci-solution-container {
    max-width: 760px;
}

.uci-table {
    min-width: 800px;
}

.uci-testimonial-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    background-color: var(--earth); /* theme orange */
}