/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 560px) {
    .rm18n-kpi {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .invest-funding-table-wrap {
        overflow-x: visible;
        padding: 12px;
    }

    .invest-funding-table {
        min-width: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .invest-funding-table colgroup {
        display: none;
    }

    .invest-funding-table thead {
        display: none;
    }

    .invest-funding-table,
    .invest-funding-table tbody,
    .invest-funding-table tfoot,
    .invest-funding-table tr,
    .invest-funding-table td {
        display: block;
        width: 100%;
    }

    .invest-funding-table tr {
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.14);
        overflow: hidden;
        margin-bottom: 14px;
    }

    .invest-funding-table tr:last-child {
        margin-bottom: 0;
    }

    .invest-funding-total-row {
        border-color: rgba(102, 126, 234, 0.26);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.16), rgba(255, 119, 198, 0.08));
    }

    .invest-funding-table td {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 12px;
        padding: 11px 12px;
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.95rem;
    }

    .invest-funding-table td:last-child {
        border-bottom: 0;
    }

    .invest-funding-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 950;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.56);
    }

    .invest-funding-total-row td {
        background: transparent;
    }
}

@media (max-width: 420px) {
    .invest-funding-table td {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 560px) {
    .mantra-section {
        padding: 84px 18px;
    }

    .rm18n-card {
        padding: 14px;
        gap: 10px;
    }

    .rm18n-card-top {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .rm18n-window {
        width: 100%;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Hero Section - Dark Background */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0a 50%, #000000 100%);
    overflow: hidden;
}


.logo {
    height: 50px;
}

.hero-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(119, 198, 255, 0.1) 0%, transparent 50%);
    animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Minimal Professional Navigation Bar - Shortened & Centered */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1000;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
    will-change: transform, opacity;
}

.navbar.is-hidden {
    transform: translate(-50%, -140%);
    opacity: 0;
    pointer-events: none;
}

.nav-container {
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-container:hover {
    background: rgba(17, 17, 17, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Brand/Logo - Minimal Style */
.nav-brand {
    display: flex;
    align-items: center;
}

.brand-text {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #ffffff;
    transition: opacity 0.3s ease;
}

.nav-brand:hover .brand-text {
    opacity: 0.8;
}

/* Navigation Links - Minimal Professional */
.nav-links {
    display: flex;
    list-style: none;
    gap: 5px;
    margin: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 2px;
    background: #ffffff;
    transition: transform 0.3s ease;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
    color: #ffffff;
}

.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}


/* Mobile Menu Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-toggle:hover .hamburger-line {
    background: #ffffff;
}

.mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}



/* Hero Content - Premium Healthcare Style */
.hero-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Gradient Orbs Background Effects */
.hero-bg-effects {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: floatOrb 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    bottom: -150px;
    right: -150px;
    animation-delay: 7s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes floatOrb {

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

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

/* Hero Text Wrapper */
.hero-text-wrapper {
    position: relative;
    z-index: 5;
    text-align: center;
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* Removed badge styles - no longer needed */

.hero-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    margin: 0 0 30px 0;
    color: #ffffff;
    letter-spacing: -3px;
    line-height: 1;
    position: relative;
    display: inline-block;
}

.title-line {
    display: block;
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
}


.hero-tagline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.hero-description {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
    max-width: 600px;
    margin: 0 auto 40px;
    font-weight: 300;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

/* Scroll Down Button - Explore More */
.scroll-down-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.scroll-down-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50px;
    z-index: -1;
}

.scroll-down-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.scroll-down-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px) scale(1.05) rotateX(5deg);
    box-shadow:
        0 15px 40px rgba(120, 119, 198, 0.3),
        0 5px 15px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.scroll-down-btn:hover::before {
    opacity: 1;
}

.scroll-down-btn:hover::after {
    width: 300px;
    height: 300px;
}

.scroll-down-btn:active {
    transform: translateY(-4px) scale(1.02);
    transition: all 0.1s ease;
}

.scroll-text {
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.scroll-down-btn:hover .scroll-text {
    transform: translateY(-2px);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.scroll-arrow {
    font-size: 1.2rem;
    animation: bounceArrow 2s ease-in-out infinite;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.scroll-down-btn:hover .scroll-arrow {
    animation: peekArrow 0.6s ease-out forwards;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

@keyframes bounceArrow {

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

    50% {
        transform: translateY(5px);
    }
}

@keyframes peekArrow {
    0% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-8px) scale(1.2);
    }

    50% {
        transform: translateY(10px) scale(0.9);
    }

    70% {
        transform: translateY(-4px) scale(1.1);
    }

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

/* Peeking GIF Animation */
.peek-gif {
    position: absolute;
    bottom: -20px;
    /* Start slightly below the button */
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    /* Initially hidden */
    width: 120px;
    /* Adjust size as needed */
    height: auto;
    z-index: 0;
    /* Behind the text and arrow */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

.scroll-down-btn:hover .peek-gif {
    transform: translateX(-50%) translateY(0);
    /* Peek up */
    opacity: 1;
}

.btn-primary,
.btn-secondary {
    padding: 14px 32px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    color: #0a0a0a;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

/* Floating Elements */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.float-element {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent);
    animation: float 20s infinite ease-in-out;
}

.element-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

.element-2 {
    width: 200px;
    height: 200px;
    bottom: 10%;
    right: -5%;
    animation-delay: 7s;
}

.element-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 10%;
    animation-delay: 14s;
}

@keyframes float {

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

    50% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.5;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Problem Section - Google-Inspired Modern Design */
.problem-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: clamp(56px, 7.5vh, 88px) 20px;
    overflow: hidden;
}

.problem-section-old {
    position: relative;
    padding: clamp(56px, 7.5vh, 88px) 20px;
    overflow: hidden;
    background: transparent;
}

.bm-section.problem-section {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(40px, 6vh, 72px) 20px;
}

.bm-section .problem-header {
    margin-bottom: 24px;
}

.bm-section .pb-grid {
    gap: 12px;
}

.bm-section .pb-body {
    padding: 10px 14px;
}

.bm-section .pb-sub--card {
    padding: 10px 10px;
}

.bm-section.bm-hd {
    min-height: auto;
    padding: clamp(44px, 6vh, 74px) 20px;
    background:
        radial-gradient(circle at 18% 22%, rgba(79, 172, 254, 0.10), transparent 60%),
        radial-gradient(circle at 82% 32%, rgba(255, 119, 198, 0.08), transparent 62%),
        linear-gradient(180deg, #0a0a0a 0%, #0f0f12 50%, #0a0a0a 100%);
}

.bm-hd-subtitle {
    margin: 10px auto 0;
    max-width: 860px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.02rem;
    line-height: 1.6;
}

.bm-hd-cards {
    margin-top: clamp(18px, 3vh, 28px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 16px);
    align-items: stretch;
}

.bm-hd-card {
    --bm-accent: rgba(79, 172, 254, 0.95);
    --bm-accent-soft: rgba(79, 172, 254, 0.16);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s ease,
        border-color 0.55s ease;
}

.bm-hd-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 18%, var(--bm-accent-soft), transparent 55%),
        radial-gradient(circle at 84% 26%, rgba(130, 243, 255, 0.08), transparent 62%);
    opacity: 1;
    pointer-events: none;
}

.bm-hd-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 30px 95px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bm-hd-card--b2c {
    --bm-accent: rgba(120, 119, 198, 0.95);
    --bm-accent-soft: rgba(120, 119, 198, 0.18);
}

.bm-hd-card--b2b {
    --bm-accent: rgba(79, 172, 254, 0.95);
    --bm-accent-soft: rgba(79, 172, 254, 0.18);
}

.bm-hd-card--b2g {
    --bm-accent: rgba(0, 242, 254, 0.95);
    --bm-accent-soft: rgba(0, 242, 254, 0.18);
}

.bm-hd-card-head {
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.50);
    position: relative;
    z-index: 1;
}

.bm-hd-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.018);
    color: rgba(255, 255, 255, 0.78);
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-size: 0.78rem;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.18);
}

.bm-hd-icon {
    width: 42px;
    height: 42px;
    margin-top: 14px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.90);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}

.bm-hd-icon svg,
.bm-hd-icon i {
    width: 20px;
    height: 20px;
}

.bm-hd-card:hover .bm-hd-icon {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.22);
}

.bm-hd-title {
    margin: 12px 0 6px;
    font-family: 'Syne', sans-serif;
    font-weight: 850;
    letter-spacing: -0.6px;
    font-size: 1.32rem;
    color: rgba(255, 255, 255, 0.95);
}

.bm-hd-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.98rem;
    line-height: 1.5;
}

.bm-hd-metrics {
    padding: 14px 18px 18px;
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.bm-hd-metric {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 12px;
    display: grid;
    gap: 4px;
}

.bm-hd-metric .k {
    font-size: 0.76rem;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.50);
}

.bm-hd-metric .v {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.bm-hd-flow {
    margin-top: clamp(14px, 2.5vh, 22px);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

.bm-hd-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(130, 243, 255, 0.10), transparent 60%),
        radial-gradient(circle at 84% 26%, rgba(255, 119, 198, 0.08), transparent 62%);
    opacity: 0.9;
    pointer-events: none;
}

.bm-hd-flow-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.bm-hd-step {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.35);
    padding: 12px 12px;
    display: grid;
    gap: 6px;
}

.bm-hd-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bm-hd-step-title {
    font-weight: 900;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.90);
}

.bm-hd-step-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.86);
}

.bm-hd-step-icon svg,
.bm-hd-step-icon i {
    width: 18px;
    height: 18px;
}

.bm-hd-step-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.92rem;
    line-height: 1.45;
}

.bm-hd-flow[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bm-hd-flow.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.bm-hd-card[data-reveal],
.bm-section.bm-hd .problem-header[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bm-hd-card.is-revealed,
.bm-section.bm-hd .problem-header.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    .bm-hd-cards {
        grid-template-columns: 1fr;
    }

    .bm-hd-flow-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .bm-hd-flow-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-hd-card,
    .bm-hd-icon,
    .bm-hd-flow[data-reveal],
    .bm-hd-card[data-reveal] {
        transition: none;
    }

    .bm-hd-card:hover {
        transform: none;
    }
}


.problem-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section Header */
.problem-header {
    text-align: center;
    margin-bottom: 34px;
    animation: fadeInUp 0.8s ease-out;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
}

.problem-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0;
}

.problem-subtitle {
    margin: 12px auto 0;
    max-width: 760px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.58);
}

.problem-section-old .problem-header {
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .problem-subtitle {
        font-size: 0.98rem;
    }
}

/* Problem (Deep-Dive) Compact Dashboard (pb-*) */
.pb-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.pb-board {
    --pb-ink: rgba(255, 255, 255, 0.92);
    --pb-muted: rgba(255, 255, 255, 0.62);
    --pb-line: rgba(255, 255, 255, 0.12);
    --pb-accent: rgba(130, 243, 255, 0.90);
    --pb-accent2: rgba(255, 119, 198, 0.70);
    --pb-warn: rgba(234, 179, 8, 0.92);
    width: 100%;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.35);
    box-shadow:
        0 30px 110px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: clamp(10px, 1.6vw, 16px);
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 14px;
}

.pb-board.pb-pills {
    grid-template-columns: 1fr;
}

.pb-board.pb-pills .pb-tabs {
    position: relative;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.pb-board.pb-pills .pb-tab {
    width: auto;
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 0.92rem;
}

.pb-board.pb-pills .pb-tab-ico {
    width: 32px;
    height: 32px;
    border-radius: 12px;
}

.pb-board.pb-pills .pb-tab-meta {
    display: none;
}

.pb-board.pb-pills .pb-shell {
    margin-top: 6px;
}

.pb-board.pb-pills .pb-panel.pb-card {
    border-radius: 22px;
}

.pb-board.pb-pills .pb-head {
    padding: 12px 14px 10px;
}

.pb-board.pb-pills .pb-title {
    font-size: 1.18rem;
}

.pb-board.pb-pills .pb-stamp {
    padding: 6px 10px;
    font-size: 0.68rem;
    letter-spacing: 1.3px;
}

.pb-board.pb-pills .pb-case {
    padding: 10px 14px 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.pb-board.pb-pills .pb-copy {
    gap: 10px;
}

.pb-board.pb-pills .pb-block {
    padding: 10px 10px;
}

.pb-board.pb-pills .pb-signal {
    padding: 12px 12px;
}

.pb-board.pb-pills .pb-points {
    gap: 6px;
    font-size: 0.92rem;
    line-height: 1.45;
}

@media (min-width: 980px) {
    .pb-board.pb-pills .pb-points {
        columns: 2;
        column-gap: 18px;
    }

    .pb-board.pb-pills .pb-points li {
        break-inside: avoid;
    }
}

.pb-board.pb-pills .pb-evidence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pb-board.pb-pills .pb-evidence-card {
    border-radius: 18px;
    display: flex;
    flex-direction: column;
}

.pb-board.pb-pills .pb-evidence-top {
    padding: 8px 12px 10px;
    order: 2;
    background: transparent;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: flex-start;
    gap: 8px;
}

.pb-board.pb-pills .pb-evidence-media {
    order: 1;
    aspect-ratio: 3 / 2;
}

.pb-board.pb-pills .pb-evidence-tag {
    display: none;
}

.pb-board.pb-pills .pb-evidence-label {
    font-size: 0.84rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.74);
}

.pb-board.pb-pills .pb-evidence-media img {
    transform: none;
    object-position: 50% 35%;
}

@media (max-width: 560px) {
    .pb-board.pb-pills .pb-evidence-media {
        aspect-ratio: 16 / 10;
    }
}

.pb-board.pb-pills .pb-evidence-card:hover .pb-evidence-media img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .pb-board.pb-pills {
        padding: 12px;
        border-radius: 24px;
    }

    .pb-board.pb-pills .pb-head {
        padding: 12px 12px 10px;
        gap: 10px;
    }

    .pb-board.pb-pills .pb-title {
        font-size: 1.12rem;
    }

    .pb-board.pb-pills .pb-case {
        padding: 10px 12px 12px;
        gap: 10px;
    }

    .pb-board.pb-pills .pb-block-title {
        margin: 0 0 8px;
        font-size: 0.9rem;
    }

    .pb-board.pb-pills .pb-points {
        font-size: 0.9rem;
    }

    .pb-board.pb-pills .pb-signal-v {
        font-size: 0.92rem;
    }

    .pb-board.pb-pills .pb-evidence-label {
        font-size: 0.88rem;
    }
}

@media (max-width: 980px) {
    .pb-board.pb-pills .pb-case {
        grid-template-columns: 1fr;
    }

    .pb-board.pb-pills .pb-evidence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pb-board.pb-pills .pb-tab {
        padding: 8px 11px;
        font-size: 0.9rem;
    }

    .pb-board.pb-pills .pb-tab-ico {
        width: 30px;
        height: 30px;
    }

    .pb-board.pb-pills .pb-evidence {
        grid-template-columns: 1fr;
    }
}

.pb-board .pb-tabs {
    margin: 0;
    display: grid;
    gap: 10px;
    align-content: start;
    justify-content: stretch;
    position: sticky;
    top: 110px;
    padding: 8px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pb-board .pb-tab {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.55s ease,
        border-color 0.55s ease,
        color 0.55s ease,
        box-shadow 0.55s ease;
}

.pb-tab-ico {
    width: 38px;
    height: 38px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.90);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pb-tab-ico svg,
.pb-tab-ico i {
    width: 18px;
    height: 18px;
}

.pb-tab-main {
    display: grid;
    gap: 3px;
    text-align: left;
}

.pb-tab-title {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
}

.pb-tab-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 750;
    letter-spacing: -0.1px;
}

.pb-board .pb-tab::after {
    display: none;
}

.pb-board .pb-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.90);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.pb-board .pb-tab.is-active {
    border-color: rgba(130, 243, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.95);
}

.pb-board .pb-shell {
    position: relative;
}

.pb-board .pb-panel.pb-card {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.35);
    box-shadow:
        0 26px 90px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    grid-template-areas:
        'head'
        'case';
    gap: 0;
    animation: pbCaseIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pbCaseIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pb-board .pb-head {
    padding: 18px 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.pb-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.70);
    font-weight: 850;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pb-stamp-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(130, 243, 255, 0.95);
    box-shadow: 0 0 14px rgba(130, 243, 255, 0.22);
}

.pb-board .pb-title {
    margin: 0;
    font-size: 1.42rem;
}

.pb-board .pb-kicker {
    margin: 0;
}

.pb-case {
    padding: 14px 16px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 14px;
}

.pb-copy {
    display: grid;
    gap: 10px;
}

.pb-block {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 12px;
}

.pb-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.pb-block-title svg,
.pb-block-title i {
    width: 18px;
    height: 18px;
}

.pb-points {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.5;
}

.pb-board .pb-points li::marker {
    color: var(--pb-accent);
}

.pb-signal {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    padding: 14px 14px;
    display: grid;
    gap: 10px;
}

.pb-signal-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.pb-signal-k {
    font-size: 0.76rem;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.55);
}

.pb-signal-v {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 750;
    line-height: 1.4;
}

.pb-evidence {
    display: grid;
    gap: 12px;
    align-content: start;
}

.pb-evidence-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.46);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 16px 60px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.55s ease, box-shadow 0.55s ease;
}

.pb-evidence-card::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 14px;
    width: 54px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(-8deg);
}

.pb-evidence-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.pb-evidence-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.pb-evidence-label {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 850;
    letter-spacing: -0.2px;
    font-size: 0.92rem;
}

.pb-evidence-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.pb-evidence-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.pb-evidence-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.48);
}

.pb-evidence-card:hover .pb-evidence-media img {
    transform: scale(1.08);
    filter: saturate(1.08) contrast(1.05);
}

@media (max-width: 980px) {
    .pb-board {
        grid-template-columns: 1fr;
    }

    .pb-board .pb-tabs {
        position: relative;
        top: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 18px;
    }

    .pb-case {
        grid-template-columns: 1fr;
    }

    .pb-evidence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pb-board .pb-tabs {
        grid-template-columns: 1fr;
    }

    .pb-evidence {
        grid-template-columns: 1fr;
    }
}


@media (prefers-reduced-motion: reduce) {
    .pb-board .pb-tab,
    .pb-evidence-card,
    .pb-evidence-media img {
        transition: none;
    }

    .pb-evidence-card:hover {
        transform: none;
    }

    .pb-board .pb-tab:hover {
        transform: none;
    }
}


.pb-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pb-tab {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    padding: 10px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.pb-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: rgba(130, 243, 255, 0.85);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pb-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.86);
}

.pb-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(130, 243, 255, 0.22);
}

.pb-tab.is-active {
    border-color: rgba(130, 243, 255, 0.30);
    background: rgba(79, 172, 254, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.pb-tab.is-active::after {
    opacity: 1;
    transform: translateY(0);
}

.pb-shell {
    position: relative;
}

.pb-panel {
    display: none;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
        'head'
        'body'
        'media';
    gap: 10px;
    padding: 0;
    animation: pbPanelIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pb-panel.is-active {
    display: grid;
}

@keyframes pbPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 14px;
    align-items: stretch;
}

.pb-card {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.32s ease;
    transform: translateY(12px);
    opacity: 0;
}

/* Tabs: panels are also cards, but must render as a grid (not flex) */
.pb-panel.pb-card {
    display: none;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
        'head'
        'body'
        'media';
    gap: 10px;
    padding: 0;
    animation: pbPanelIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pb-panel.pb-card.is-active {
    display: grid;
}

.pb-card.is-revealed {
    transform: translateY(0);
    opacity: 1;
}

.pb-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

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

.pb-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.55);
    grid-area: head;
}

.pb-kicker {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.pb-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.pb-body {
    padding: 10px 16px;
    display: grid;
    gap: 10px;
    flex: 1 1 auto;
    grid-area: body;
}

.pb-body--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pb-body--stack {
    padding-bottom: 10px;
    gap: 10px;
}

.pb-sub--card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 12px;
}

.pb-subtitle {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: rgba(130, 243, 255, 0.92);
    letter-spacing: -0.2px;
}

.pb-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.93rem;
    line-height: 1.45;
}

.pb-card:first-child .pb-list {
    columns: 2;
    column-gap: 18px;
}

.pb-card:first-child .pb-list li {
    break-inside: avoid;
}

.pb-list li::marker {
    color: rgba(130, 243, 255, 0.95);
}

.pb-list--tight {
    gap: 7px;
    font-size: 0.92rem;
}

.pb-paragraph {
    margin: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.93rem;
    line-height: 1.5;
}

#pb-panel-validation .pb-head {
    padding: 12px 14px 10px;
}

#pb-panel-validation .pb-body {
    padding: 8px 14px;
    gap: 8px;
}

#pb-panel-validation .pb-sub--card {
    padding: 10px 10px;
}

#pb-panel-validation .pb-subtitle {
    margin: 0 0 6px;
    font-size: 0.93rem;
}

#pb-panel-validation .pb-list--tight {
    gap: 6px;
    font-size: 0.90rem;
}

#pb-panel-validation .pb-paragraph {
    font-size: 0.90rem;
    line-height: 1.45;
}

.pb-media {
    padding: 0 16px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: 0;
    grid-area: media;
}

.pb-media-item {
    margin: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.52);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease;
}

.pb-media-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 18%, rgba(79, 172, 254, 0.12), transparent 55%),
        radial-gradient(circle at 80% 25%, rgba(255, 119, 198, 0.10), transparent 60%);
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
}

.pb-media-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.pb-media-item[data-size="tall"] {
    aspect-ratio: 16 / 10;
}

.pb-media-item[data-size="wide"] {
    aspect-ratio: 16 / 10;
}

.pb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 0.40s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
}

.pb-img--contain {
    inset: 10px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.22);
}

.pb-media-item:hover .pb-img {
    transform: scale(1.06);
}

.pb-visual {
    margin: 0 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.46);
    display: grid;
    place-items: center;
    padding: 12px;
    color: rgba(130, 243, 255, 0.92);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.pb-illu {
    width: 100%;
    height: auto;
    max-width: 520px;
    shape-rendering: geometricPrecision;
}

.pb-card.is-revealed .pb-draw {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: pbDraw 1.05s ease forwards;
}

@keyframes pbDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1200px) {
    .pb-tabs {
        justify-content: flex-start;
    }
}

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

@media (max-height: 800px) {
    .problem-header {
        margin-bottom: 26px;
    }

    .pb-tab {
        padding: 9px 12px;
    }

    .pb-head {
        padding: 12px 14px 10px;
    }

    .pb-body {
        padding: 8px 14px;
        gap: 9px;
    }

    .pb-media {
        padding: 0 14px 12px;
        gap: 10px;
    }

    .pb-media-item[data-size="tall"],
    .pb-media-item[data-size="wide"] {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .pb-body--split {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-card,
    .pb-media-item,
    .pb-img {
        transition: none;
    }

    .pb-panel {
        animation: none;
    }

    .pb-card {
        transform: none;
        opacity: 1;
    }

    .pb-card:hover,
    .pb-media-item:hover,
    .pb-media-item:hover .pb-img {
        transform: none;
    }

    .pb-card.is-revealed .pb-draw {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

.pr-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.pr-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.pr-card {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease;
    transform: translateY(14px);
    opacity: 0;
}

.pr-card.is-revealed {
    transform: translateY(0);
    opacity: 1;
}

.pr-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 26px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pr-card--ground {
    grid-column: 1;
    grid-row: 1;
}

.pr-card--interviews {
    grid-column: 1;
    grid-row: 2;
}

.pr-card--validation {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.pr-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.55);
}

.pr-kicker {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.pr-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.9px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.pr-content {
    padding: 16px 18px 18px;
    display: grid;
    gap: 14px;
}

.pr-split {
    padding: 16px 18px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pr-validation {
    padding: 16px 18px 18px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    min-height: 100%;
}

.pr-sub {
    border-radius: 18px;
}

.pr-sub--card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 14px;
}

.pr-subtitle {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: rgba(130, 243, 255, 0.92);
    letter-spacing: -0.2px;
}

.pr-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.6;
}

.pr-list li::marker {
    color: rgba(130, 243, 255, 0.95);
}

.pr-list--tight {
    gap: 8px;
    font-size: 1rem;
}

.pr-list--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 10px;
}

.pr-paragraph {
    margin: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.02rem;
    line-height: 1.65;
}

.pr-media-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pr-media {
    margin: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.50);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.pr-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 18%, rgba(79, 172, 254, 0.12), transparent 55%),
        radial-gradient(circle at 80% 25%, rgba(255, 119, 198, 0.10), transparent 60%);
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
}

.pr-media:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.pr-media--tall {
    aspect-ratio: 4 / 5;
}

.pr-media--wide {
    aspect-ratio: 16 / 9;
    margin-top: 12px;
}

.pr-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
}

.pr-img--contain {
    inset: 14px 14px 48px 14px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.22);
}

.pr-media:hover .pr-img {
    transform: scale(1.07);
}

.pr-caption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.38);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: -0.2px;
}

.pr-visual {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.46);
    display: grid;
    place-items: center;
    padding: 14px;
    color: rgba(130, 243, 255, 0.92);
    overflow: hidden;
}

.pr-illu {
    width: 100%;
    height: auto;
    max-width: 520px;
    shape-rendering: geometricPrecision;
}

.pr-card.is-revealed .pr-draw {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: prDraw 1.2s ease forwards;
}

@keyframes prDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1100px) {
    .pr-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .pr-card--ground,
    .pr-card--interviews,
    .pr-card--validation {
        grid-column: 1;
        grid-row: auto;
    }

    .pr-validation {
        grid-template-rows: auto auto auto;
    }
}

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

    .pr-list--two {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pr-card,
    .pr-media,
    .pr-img {
        transition: none;
    }

    .pr-card {
        transform: none;
        opacity: 1;
    }

    .pr-card:hover,
    .pr-media:hover,
    .pr-media:hover .pr-img {
        transform: none;
    }

    .pr-card.is-revealed .pr-draw {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

.problem-deepdive {
    max-width: 1100px;
    margin: 0 auto;
}

.pd-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 18px;
}

.pd-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    padding: 12px 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
    position: relative;
}

.pd-tab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(79, 172, 254, 0.0), rgba(130, 243, 255, 0.8), rgba(255, 119, 198, 0.0));
    opacity: 0;
    transform: scaleX(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pd-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.pd-tab.is-active {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.16), rgba(255, 119, 198, 0.12));
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(120, 119, 198, 0.18);
}

.pd-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.pd-tab:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(130, 243, 255, 0.22),
        0 12px 30px rgba(120, 119, 198, 0.18);
}

.pd-shell {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.pd-panels {
    position: relative;
    padding: 0;
}

.pd-panel {
    display: none;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 18px;
    padding: 20px;
    animation: pdPanelIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pd-panel.is-active {
    display: grid;
}

@keyframes pdPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-copy {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.52);
    padding: 16px 16px;
    overflow: hidden;
}

.pd-media {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 10, 0.42);
    padding: 16px;
    overflow: hidden;
}

.pd-panel-title {
    margin: 0 0 14px;
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: rgba(255, 255, 255, 0.95);
}

.pd-groups {
    display: grid;
    gap: 14px;
}

.pd-panel[data-pd-panel="interviews"] .pd-groups,
.pd-panel[data-pd-panel="validation"] .pd-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.pd-group {
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.25s ease,
        background 0.25s ease;
}

.pd-group:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.045);
}

.pd-group-title {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: rgba(130, 243, 255, 0.9);
}

.pd-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.6;
}

.pd-list--tight {
    gap: 8px;
    font-size: 1rem;
}

.pd-list--two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 10px;
}

.pd-list li::marker {
    color: rgba(130, 243, 255, 0.92);
}

.pd-paragraph {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.65;
}

.pd-media-grid {
    display: grid;
    gap: 12px;
    height: 100%;
    align-items: stretch;
}

.pd-media-grid[data-layout="mosaic"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.pd-media-grid[data-layout="mosaic"] .pd-media-box[data-size="wide"] {
    grid-column: 1 / -1;
}

.pd-media-grid[data-layout="duo"] {
    grid-template-columns: 1.8fr 1fr;
}

.pd-media-grid[data-layout="trio"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-media-box {
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.25s ease,
        background 0.25s ease;
}

.pd-media-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(79, 172, 254, 0.10), transparent 55%),
        linear-gradient(225deg, rgba(255, 119, 198, 0.06), transparent 60%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 55%);
    opacity: 0.85;
    z-index: 1;
}

.pd-media-box:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.03);
}

.pd-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.35s ease;
    filter: saturate(1.02) contrast(1.02);
    z-index: 0;
}

.pd-media-box:hover .pd-img {
    transform: scale(1.06);
}

.pd-img--contain {
    inset: 14px 14px 48px 14px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.25);
    filter: saturate(1) contrast(1);
}

.pd-media-box[data-size="tall"] .pd-img {
    object-position: center 15%;
}

.pd-media-icon {
    position: absolute;
    inset: 12px 12px 40px 12px;
    display: grid;
    place-items: center;
    color: rgba(130, 243, 255, 0.92);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
    z-index: 2;
}

.pd-media-visual {
    position: absolute;
    inset: 12px 12px 40px 12px;
    display: grid;
    place-items: center;
    color: rgba(130, 243, 255, 0.92);
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
    z-index: 2;
}

.pd-illu {
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.pd-media-box:hover .pd-media-visual {
    filter:
        drop-shadow(0 16px 28px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 18px rgba(130, 243, 255, 0.12));
}

.pd-panel.is-active .pd-illu {
    animation: pdFloat 6.5s ease-in-out infinite;
}

@keyframes pdFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.pd-panel.is-active .pd-anim-draw {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: pdDraw 1.1s ease forwards;
}

@keyframes pdDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.pd-media-caption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    z-index: 3;
}

.pd-media-box[data-size="square"] {
    aspect-ratio: 1 / 1;
}

.pd-media-box[data-size="tall"] {
    aspect-ratio: 4 / 5;
}

.pd-media-box[data-size="wide"] {
    aspect-ratio: 16 / 9;
}

.pd-media-box[data-size="landscape"] {
    aspect-ratio: 16 / 10;
}

@media (max-width: 1024px) {
    .pd-panel {
        grid-template-columns: 1fr;
    }

    .pd-panel[data-pd-panel="interviews"] .pd-groups,
    .pd-panel[data-pd-panel="validation"] .pd-groups {
        grid-template-columns: 1fr;
    }

    .pd-list--two-col {
        grid-template-columns: 1fr;
    }

    .pd-media-grid[data-layout="trio"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .pd-tab {
        width: 100%;
        max-width: 520px;
        justify-content: center;
    }

    .pd-panels {
        min-height: unset;
    }

    .pd-panel {
        padding: 18px;
    }

    .pd-media-grid[data-layout="duo"] {
        grid-template-columns: 1fr;
    }

    .pd-media-caption {
        font-size: 0.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-tab,
    .pd-panel,
    .pd-group,
    .pd-media-box,
    .pd-img {
        transition: none;
    }

    .pd-panel {
        animation: none;
    }

    .pd-panel.is-active .pd-illu {
        animation: none;
    }

    .pd-panel.is-active .pd-anim-draw {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .pd-tab:hover,
    .pd-group:hover,
    .pd-media-box:hover {
        transform: none;
    }

    .pd-media-box:hover .pd-img {
        transform: none;
    }
}

/* Problem (Deep-Dive) Layout */
.deepdive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.deepdive-column {
    position: relative;
    padding: 34px 28px;
    min-height: 620px;
    background: rgba(8, 8, 10, 0.55);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.deepdive-column::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 0%, rgba(79, 172, 254, 0.14), transparent 55%),
        radial-gradient(circle at 85% 25%, rgba(255, 119, 198, 0.10), transparent 60%),
        radial-gradient(circle at 50% 120%, rgba(120, 119, 198, 0.12), transparent 60%);
}

.deepdive-column + .deepdive-column {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.deepdive-column:hover {
    transform: translateY(-8px);
    background: rgba(14, 14, 18, 0.35);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.deepdive-column:hover::before {
    opacity: 1;
}

.deepdive-column:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(130, 243, 255, 0.24),
        0 24px 80px rgba(0, 0, 0, 0.55);
}

.deepdive-head {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0;
}

.deepdive-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.7px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
}

.deepdive-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 74%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

.deepdive-subtitle {
    margin: 10px 0 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.deepdive-block {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s ease,
        background 0.25s ease;
}

.deepdive-block:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.045);
}

.deepdive-block-title {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: rgba(130, 243, 255, 0.92);
    letter-spacing: -0.2px;
}

.deepdive-list {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.65;
}

.deepdive-list li::marker {
    color: rgba(130, 243, 255, 0.95);
}

.deepdive-list--top {
    margin-top: 0;
}

.deepdive-list--bottom {
    margin-top: 0;
}

.deepdive-note {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
    line-height: 1.7;
}

.deepdive-media {
    position: relative;
    z-index: 2;
    margin-top: 0;
    display: grid;
    gap: 12px;
    align-items: stretch;
}

.deepdive-media--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deepdive-column[data-col="1"] .deepdive-media--triple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deepdive-column[data-col="3"] .deepdive-media--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deepdive-media--split {
    grid-template-columns: 1.8fr 1fr;
    align-items: stretch;
}

.media-box {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s ease,
        background 0.35s ease;
}

.media-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(79, 172, 254, 0.10), transparent 55%),
        linear-gradient(225deg, rgba(255, 119, 198, 0.06), transparent 60%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 55%);
    opacity: 0.85;
}

.media-box:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.03);
}

.media-box[data-size="square"] {
    aspect-ratio: 1 / 1;
}

.media-box[data-size="portrait"] {
    aspect-ratio: 4 / 5;
}

.media-box[data-size="landscape"] {
    aspect-ratio: 16 / 10;
}

.media-box[data-size="wide"] {
    aspect-ratio: 16 / 6;
}

.deepdive-column[data-col="1"] .media-box[data-size="landscape"] {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .deepdive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deepdive-column:nth-child(3) {
        grid-column: 1 / -1;
    }

    .deepdive-column:nth-child(3) {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .deepdive-column:nth-child(3) {
        border-left: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .deepdive-column,
    .deepdive-block,
    .media-box {
        transition: none;
    }

    .deepdive-column:hover,
    .deepdive-block:hover,
    .media-box:hover {
        transform: none;
    }
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 100px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(120, 119, 198, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.stat-circle {
    position: relative;
    width: 180px;
    height: 180px;
}

.circular-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: url(#gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: calc(283 - (283 * var(--percent)) / 100);
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card[data-stat="1"] .circle-progress {
    stroke: #ff6b6b;
}

.stat-card[data-stat="2"] .circle-progress {
    stroke: #4ecdc4;
}

.stat-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.number-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.number-symbol {
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

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

.stat-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.stat-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* Cycle Section */
.cycle-section {
    margin-bottom: 80px;
}

.cycle-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.cycle-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 119, 198, 0.05), transparent 70%);
    pointer-events: none;
}

.cycle-text {
    position: relative;
    z-index: 2;
}

.cycle-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.cycle-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cycle-description strong {
    color: #ffffff;
    font-weight: 600;
}

.cycle-visual {
    position: relative;
    z-index: 2;
}

.cycle-diagram {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.cycle-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: cycleFloat 3s ease-in-out infinite;
}

.cycle-item[data-cycle="1"] {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.cycle-item[data-cycle="2"] {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 0.75s;
}

.cycle-item[data-cycle="3"] {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1.5s;
}

.cycle-item[data-cycle="4"] {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 2.25s;
}

.cycle-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cycle-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
    color: #fff;
}

.cycle-item:hover .cycle-icon {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.cycle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    white-space: nowrap;
}

.cycle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cycle-center-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.2));
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s ease-in-out infinite;
    backdrop-filter: blur(20px);
}

.cycle-center-icon svg {
    width: 50px;
    height: 50px;
    stroke-width: 1.5;
    color: #fff;
}

.cycle-center-icon svg {
    width: 50px;
    height: 50px;
    stroke-width: 1.5;
    color: #fff;
}

@keyframes cycleFloat {

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

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

/* Stakeholder Section */
.stakeholder-section {
    margin-bottom: 30px;
    /* Reduced from 80px */
}

.stakeholder-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.stakeholder-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0 0 50px 0;
    line-height: 1.6;
}

/* Tab Navigation */
.stakeholder-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.1), rgba(255, 119, 198, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.tab-btn:hover::before {
    opacity: 1;
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.15), rgba(255, 119, 198, 0.15));
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(120, 119, 198, 0.3);
}

.tab-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.tab-label {
    position: relative;
    z-index: 1;
}

/* Tab Content */
.tab-content-wrapper {
    position: relative;
    min-height: 400px;
}

.tab-content {
    display: none;
    animation: fadeInUp 0.5s ease-out;
}

.tab-content.active {
    display: block;
}

/* Problems Grid */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.stakeholder-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 26px;
    align-items: stretch;
}

.stakeholder-media {
    margin: 0;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    position: relative;
    min-height: 260px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stakeholder-media-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.05);
}

.stakeholder-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.10), rgba(10, 10, 10, 0.62)),
        radial-gradient(circle at 18% 20%, rgba(130, 243, 255, 0.10), transparent 60%),
        radial-gradient(circle at 82% 28%, rgba(255, 119, 198, 0.08), transparent 62%);
    pointer-events: none;
}

.mantra-section {
    position: relative;
    min-height: 100svh;
    padding: clamp(70px, 10vh, 120px) 20px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.mantra-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    opacity: 0;
    pointer-events: none;
}

.mantra-section::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(980px, 92vw);
    height: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.55;
    pointer-events: none;
}

.mantra-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
}

.mantra-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 18% 18%, rgba(102, 126, 234, 0.18), transparent 56%),
        radial-gradient(circle at 82% 24%, rgba(130, 243, 255, 0.10), transparent 60%);
    opacity: 0;
    transition: none;
    pointer-events: none;
}

.mantra-section:hover .mantra-inner {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.mantra-section:hover .mantra-inner::before {
    opacity: 0;
}

.mantra-title {
    margin: 14px 0 10px;
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.1rem, 4.6vw, 3.8rem);
    letter-spacing: -1.6px;
    line-height: 1.08;
    color: rgba(255, 255, 255, 0.96);
}

.mantra-title-line {
    display: block;
    color: rgba(255, 255, 255, 0.86);
}

.mantra-title-glow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(102, 126, 234, 0.30);
    background: rgba(102, 126, 234, 0.10);
    box-shadow:
        0 0 0 1px rgba(102, 126, 234, 0.10),
        0 24px 80px rgba(0, 0, 0, 0.46);
    animation: mantraGlow 3.8s ease-in-out infinite;
}

@keyframes mantraGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(102, 126, 234, 0.10),
            0 18px 70px rgba(0, 0, 0, 0.44);
        transform: translateY(0);
    }

    50% {
        box-shadow:
            0 0 22px rgba(102, 126, 234, 0.22),
            0 26px 95px rgba(0, 0, 0, 0.52);
        transform: translateY(-1px);
    }
}

.mantra-subtitle {
    margin: 0 auto;
    max-width: 70ch;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.05rem;
    line-height: 1.6;
}

@media (max-width: 920px) {
    .stakeholder-panel {
        grid-template-columns: 1fr;
    }

    .stakeholder-media {
        min-height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mantra-title-glow {
        animation: none;
    }

    .mantra-inner,
    .mantra-inner::before {
        transition: none;
    }

    .mantra-section:hover .mantra-inner {
        transform: none;
    }
}

.problem-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.problem-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255, 119, 198, 0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.problem-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.problem-item:hover::before {
    opacity: 1;
}

.problem-icon {
    margin-bottom: 20px;
    color: rgba(120, 119, 198, 1);
    background: rgba(120, 119, 198, 0.1);
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 119, 198, 0.2);
    position: relative;
    z-index: 1;
}

.problem-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.problem-item-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.problem-item-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Problem CTA */
.problem-cta {
    text-align: center;
    padding-top: 20px;
    /* Reduced from 40px */
}

.cta-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.cta-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

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

    50% {
        transform: translateY(10px);
    }
}

/* Solution Section - Google-Inspired Modern Design */
.solution-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: clamp(72px, 10vh, 110px) 20px;
    overflow: hidden;
}

.solution-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Solution Header */
.solution-header {
    text-align: center;
    margin-bottom: 60px;
}

.solution-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.solution-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Solution Toggle */
.solution-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 auto 80px;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 6px;
    position: relative;
}

.toggle-slider {
    position: absolute;
    width: calc(50% - 6px);
    height: calc(100% - 12px);
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    left: 6px;
    z-index: 0;
    box-shadow: 0 4px 20px rgba(120, 119, 198, 0.3);
}

.solution-toggle:has(.toggle-btn[data-solution="hardware"].active) .toggle-slider {
    transform: translateX(calc(100% + 6px));
}

.toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.toggle-btn.active {
    color: #ffffff;
}

.toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

/* Solution Content */
.solution-content {
    display: none;
    animation: fadeInScale 0.6s ease-out;
}

.solution-content.active {
    display: block;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.solution-intro {
    text-align: center;
    margin-bottom: 60px;
}

.solution-category-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.solution-category-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

/* Features Showcase - Software */
.features-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(120, 119, 198, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    z-index: 0;
}

.feature-icon-wrapper {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(120, 119, 198, 0.1);
    border-radius: 16px;
    border: 1px solid rgba(120, 119, 198, 0.2);
    color: rgba(120, 119, 198, 1);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.feature-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.feature-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
}

.feature-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.hw-solution {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at 22% 18%, rgba(120, 119, 198, 0.16), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(79, 172, 254, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 26px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hw-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
}

.hw-copy {
    padding: 32px 32px 26px;
}

.hw-head {
    margin-bottom: 22px;
}

.hw-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.9px;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 10px;
}

.hw-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 62ch;
}

.hw-block {
    margin-top: 16px;
}

.hw-block-title {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}

.hw-caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hw-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.26s ease,
        border-color 0.26s ease;
}

.hw-cap-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.28), rgba(79, 172, 254, 0.22));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    flex: 0 0 auto;
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hw-cap-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.hw-cap-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.25;
}

.hw-cap:hover {
    transform: translateY(-2px);
    border-color: rgba(120, 119, 198, 0.22);
    box-shadow: 0 14px 46px rgba(0, 0, 0, 0.55);
}

.hw-cap:hover .hw-cap-icon {
    transform: scale(1.06);
}

.hw-locs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hw-loc {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(120, 119, 198, 0.12);
    border: 1px solid rgba(120, 119, 198, 0.22);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
}

.hw-loc:nth-child(2) {
    background: rgba(79, 172, 254, 0.12);
    border-color: rgba(79, 172, 254, 0.22);
}

.hw-loc:nth-child(3) {
    background: rgba(255, 119, 198, 0.12);
    border-color: rgba(255, 119, 198, 0.20);
}

.hw-loc:nth-child(4) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.hw-visual {
    isolation: isolate;
}

.hw-figure {
    position: relative;
    z-index: 1;
}

.hw-figure::before {
    content: none;
}

.hw-visual {
    padding: 26px 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-left: 0;
    position: relative;
    overflow: hidden;
}

.hw-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(120, 119, 198, 0.28), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(79, 172, 254, 0.22), transparent 58%);
    filter: blur(42px);
    opacity: 0.65;
}

.hw-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.10) 0,
            rgba(255, 255, 255, 0.10) 2px,
            transparent 2px,
            transparent 26px),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.10) 0,
            rgba(255, 255, 255, 0.10) 2px,
            transparent 2px,
            transparent 26px);
    background-size: 26px 26px;
    background-position: center;
    opacity: 0.10;
    mask-image:
        radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 78%);
}


 

.hw-image {
    width: 100%;
    height: auto;
    max-height: clamp(460px, 58vh, 760px);
    object-fit: contain;
    filter:
        drop-shadow(0 34px 70px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 28px rgba(120, 119, 198, 0.10))
        contrast(1.08)
        saturate(1.06);
    animation: none;
    transition: none;
}

.hw-caption {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.85rem;
    line-height: 1.45;
    padding-bottom: 2px;
    text-align: center;
}

@keyframes hwFloat {

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

    50% {
        transform: translateY(-8px);
    }
}

.hw-solution[data-reveal],
.hw-head[data-reveal],
.hw-block[data-reveal],
.hw-visual[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hw-solution.is-revealed,
.hw-head.is-revealed,
.hw-block.is-revealed,
.hw-visual.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .hw-grid {
        grid-template-columns: 1fr;
    }

    .hw-copy {
        padding: 26px 20px 18px;
    }

    .hw-visual {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.10);
        padding: 20px 18px 18px;
    }
}

@media (max-width: 640px) {
    .hw-caps {
        grid-template-columns: 1fr;
    }

    .hw-copy {
        padding: 28px 18px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-image {
        animation: none;
    }

    .hw-cap,
    .hw-cap-icon,
    .hw-solution[data-reveal],
    .hw-head[data-reveal],
    .hw-block[data-reveal],
    .hw-visual[data-reveal] {
        transition: none;
    }

    .hw-visual::before,
    .hw-visual::after,
    .hw-figure {
        transition: none;
    }
}

/* Hardware Showcase */
.hardware-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.hardware-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hardware-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

.hardware-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    z-index: 2;
    backdrop-filter: blur(10px);
}

/* 3D Model Viewer */
.hardware-3d-wrapper {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.8), rgba(30, 30, 30, 0.8));
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.hardware-3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

.hardware-3d-canvas:active {
    cursor: grabbing;
}

/* Loading State */
.model-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.95), rgba(30, 30, 30, 0.95));
    z-index: 10;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.model-loading.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(120, 119, 198, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Model Controls */
.model-controls {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.control-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    pointer-events: auto;
}

.hint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hint-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.hint-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.reset-view-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.reset-view-btn:hover {
    background: rgba(120, 119, 198, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    transform: rotate(180deg);
}

.reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Legacy image support (fallback) */
.hardware-image-wrapper {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.5), rgba(30, 30, 30, 0.5));
    position: relative;
    overflow: hidden;
}

.hardware-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hardware-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hardware-card:hover .hardware-image {
    transform: scale(1.05);
}

.image-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: rgba(255, 255, 255, 0.3);
}

.fallback-icon {
    font-size: 4rem;
}

.hardware-content {
    padding: 35px;
}

.hardware-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.hardware-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin: 0 0 25px 0;
}

.hardware-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.spec-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.spec-icon {
    font-size: 1.3rem;
}

.spec-icon {
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
}

/* Hardware Features Grid */
.hardware-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.hw-feature-icon {
    margin-bottom: 15px;
    color: rgba(120, 119, 198, 1);
    background: rgba(120, 119, 198, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 119, 198, 0.2);
}

.hw-feature-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.hw-feature-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.hw-feature-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin: 0;
}

/* Competition Section - Google-Inspired Comparison Table */
.competition-section {
    position: relative;
    min-height: auto;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: clamp(80px, 9vh, 120px) 20px;
    overflow: hidden;
}

.competition-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Competition Header */
.competition-header {
    text-align: center;
    margin-bottom: 80px;
}

.competition-section.comp-landscape .competition-header {
    margin-bottom: clamp(26px, 4vh, 44px);
}

.competition-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.competition-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.competition-section.comp-landscape {
    min-height: auto;
    padding: clamp(54px, 6.8vh, 78px) 20px;
    background: inherit;
}

.comp-landscape {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.comp-panel {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    box-shadow:
        0 18px 64px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease,
        box-shadow 0.55s ease;
}

.comp-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.028);
    box-shadow:
        0 26px 92px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.comp-panel-head {
    padding: 18px 18px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.012);
}

.comp-panel-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.6px;
    color: rgba(255, 255, 255, 0.92);
}

.comp-panel-sub {
    margin: 8px 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
}

.comp-table-wrap {
    padding: 14px;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.00);
    table-layout: fixed;
}

.comp-table thead th {
    text-align: left;
    padding: 14px 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}

.comp-table tbody th,
.comp-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.98rem;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comp-table tbody th {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.90);
    letter-spacing: -0.2px;
}

.comp-table tbody tr {
    transition: background 0.45s ease;
}

.comp-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.comp-co {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.comp-table td[data-label="Examples"],
.comp-table td[data-label="Examples"] .comp-co {
    flex-wrap: wrap;
}

.comp-co-mark {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 28% 22%, rgba(79, 172, 254, 0.22), transparent 62%),
        radial-gradient(circle at 78% 24%, rgba(255, 119, 198, 0.18), transparent 62%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
}

.comp-co-mark svg {
    width: 16px;
    height: 16px;
}

.comp-sep {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.42);
}

.comp-matrix thead th,
.comp-matrix tbody th {
    vertical-align: middle;
}

.comp-matrix tbody td {
    vertical-align: middle;
    text-align: center;
}

.comp-table thead th.is-san,
.comp-table tbody td.is-san {
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.08), rgba(255, 119, 198, 0.07));
}

.comp-stat {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

.comp-stat svg {
    width: 18px;
    height: 18px;
}

.comp-stat.is-yes {
    border-color: rgba(34, 197, 94, 0.30);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(34, 197, 94, 0.95);
}

.comp-stat.is-no {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.10);
    color: rgba(239, 68, 68, 0.95);
}

.comp-stat.is-partial {
    border-color: rgba(234, 179, 8, 0.30);
    background: rgba(234, 179, 8, 0.12);
    color: rgba(234, 179, 8, 0.95);
}

@media (max-width: 1024px) {
    .comp-landscape {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .comp-table-wrap {
        padding: 12px;
    }

    .comp-table {
        display: block;
    }

    .comp-table thead {
        display: none;
    }

    .comp-table tbody {
        display: grid;
        gap: 12px;
    }

    .comp-table tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.02);
    }

    .comp-table tbody th,
    .comp-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .comp-table tbody tr > :last-child {
        border-bottom: none;
    }

    .comp-table [data-label]::before {
        content: attr(data-label);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        flex: 0 0 auto;
    }

    .comp-table tbody th {
        justify-content: space-between;
    }

    .comp-table tbody td {
        text-align: right;
        vertical-align: middle;
    }

    .comp-matrix tbody td {
        justify-content: flex-end;
    }

    .comp-table thead th.is-san,
    .comp-table tbody td.is-san {
        background: rgba(255, 255, 255, 0.02);
    }
}

.competition-section.comp-landscape .competition-title {
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    margin: 0 0 10px 0;
    letter-spacing: -1.6px;
}

.competition-section.comp-landscape .competition-subtitle {
    font-size: 1.02rem;
    max-width: 760px;
}

.competition-section.comp-landscape .cl-title-row {
    gap: 10px;
    margin: 6px 0 0 0;
}

.cl-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 0 0;
}

.cl-brandmark {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
    background:
        radial-gradient(circle at 30% 25%, rgba(130, 243, 255, 0.65), transparent 55%),
        radial-gradient(circle at 74% 20%, rgba(255, 119, 198, 0.55), transparent 55%),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.competition-section.comp-landscape .cl-brandmark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 1.18rem;
}

.cl-board {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.competition-section.comp-landscape .cl-board {
    max-width: 1240px;
    gap: 14px;
}

.cl-card {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at 18% 20%, rgba(79, 172, 254, 0.12), transparent 55%),
        radial-gradient(circle at 82% 26%, rgba(255, 119, 198, 0.10), transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.040) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.030) 1px, transparent 1px),
        rgba(8, 8, 10, 0.38);
    background-size: auto, auto, 32px 32px, 32px 32px, auto;
    background-position: center, center, -1px -1px, -1px -1px, center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 28px 110px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        box-shadow 0.55s ease;
}

.cl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 34px 130px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cl-card-head {
    padding: 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}

.competition-section.comp-landscape .cl-card-head {
    padding: 12px 12px;
}

.cl-card-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.2px;
}

.cl-card-sub {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 700;
    font-size: 0.95rem;
}

.cl-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
}

.cl-card-chip svg {
    width: 16px;
    height: 16px;
}

.cl-table-wrap {
    padding: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.cl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 560px;
}

.cl-table thead th {
    text-align: left;
    padding: 14px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

.cl-table tbody th,
.cl-table tbody td {
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    vertical-align: middle;
}

.cl-table tbody th {
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.2px;
}

.cl-table tbody tr {
    transition: background 0.45s ease;
}

.cl-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cl-co {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cl-co-logo {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(130, 243, 255, 0.18), transparent 60%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
}

.cl-co-logo svg {
    width: 16px;
    height: 16px;
}

.cl-co-name {
    font-weight: 850;
    color: rgba(255, 255, 255, 0.82);
}

.cl-dot {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.40);
}

.cl-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cl-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.72);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 850;
}

.cl-legend-dot {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.cl-legend-dot svg {
    width: 14px;
    height: 14px;
}

.cl-legend-dot.cl-ok {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: rgba(34, 197, 94, 0.95);
}

.cl-legend-dot.cl-part {
    background: rgba(234, 179, 8, 0.14);
    border: 1px solid rgba(234, 179, 8, 0.30);
    color: rgba(234, 179, 8, 0.95);
}

.cl-legend-dot.cl-no {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: rgba(239, 68, 68, 0.95);
}

.cl-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.cl-pill svg {
    width: 16px;
    height: 16px;
}

.cl-pill.cl-ok {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.30);
    color: rgba(34, 197, 94, 0.95);
}

.cl-pill.cl-part {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.30);
    color: rgba(234, 179, 8, 0.95);
}

.cl-pill.cl-no {
    background: rgba(239, 68, 68, 0.11);
    border-color: rgba(239, 68, 68, 0.28);
    color: rgba(239, 68, 68, 0.95);
}

.cl-table.cl-matrix {
    min-width: 520px;
}

.cl-table .cl-san {
    position: relative;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.08), rgba(255, 119, 198, 0.07));
}

.cl-table thead .cl-san {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

.cl-table tbody td.cl-san {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cl-grid {
    padding: 14px;
    display: grid;
    gap: 10px;
}

.competition-section.comp-landscape .cl-grid {
    padding: 10px;
    gap: 7px;
}

.cl-grid-head {
    display: grid;
    gap: 10px;
    padding: 0 4px;
    color: rgba(255, 255, 255, 0.62);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.competition-section.comp-landscape .cl-grid-head {
    gap: 7px;
}

.cl-grid--players .cl-grid-head,
.cl-grid--players .cl-grid-row {
    grid-template-columns: minmax(160px, 1.05fr) minmax(170px, 1.15fr) minmax(220px, 1.6fr);
}

.cl-grid--matrix .cl-grid-head,
.cl-grid--matrix .cl-grid-row {
    grid-template-columns: minmax(200px, 1.35fr) minmax(130px, 0.8fr) minmax(150px, 0.9fr);
}

.cl-gh {
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.cl-grid-row {
    display: grid;
    gap: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(8, 8, 10, 0.26);
    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease,
        box-shadow 0.55s ease;
}

.cl-grid-row:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(8, 8, 10, 0.32);
    box-shadow:
        0 18px 58px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cl-cell {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    min-width: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.96rem;
    line-height: 1.4;
}

.competition-section.comp-landscape .cl-cell {
    padding: 9px 9px;
    font-size: 0.92rem;
}

.competition-section.comp-landscape .cl-pill {
    padding: 7px 10px;
    font-size: 0.86rem;
}

.competition-section.comp-landscape .cl-legend-item {
    padding: 5px 9px;
    font-size: 0.8rem;
}

.cl-cell:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.cl-cell-strong {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.2px;
}

.cl-grid--matrix .cl-cell:nth-child(2),
.cl-grid--matrix .cl-cell:nth-child(3) {
    justify-content: center;
}

.cl-grid--matrix .cl-cell.cl-san,
.cl-grid--matrix .cl-gh.cl-san {
    background:
        radial-gradient(circle at 22% 20%, rgba(130, 243, 255, 0.12), transparent 62%),
        radial-gradient(circle at 86% 26%, rgba(255, 119, 198, 0.10), transparent 62%),
        rgba(255, 255, 255, 0.02);
}

.cl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: -0.2px;
}

.cl-badge-ico {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(79, 172, 254, 0.20), transparent 62%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 950;
}

.cl-badge-ico svg {
    width: 16px;
    height: 16px;
}

/* Comparison Table */
.comparison-wrapper {
    overflow-x: auto;
    margin-bottom: 60px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.01);
    padding: 20px;
}

.comparison-table {
    min-width: 900px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
}

/* Table Header */
.table-header {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    padding: 25px 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

.header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-cell.feature-col {
    justify-content: flex-start;
}

.header-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.competitor-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.competitor-badge.winner {
    flex-direction: row;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.15), rgba(255, 119, 198, 0.15));
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(120, 119, 198, 0.2);
    padding: 14px 20px;
}

.badge-icon {
    font-size: 1.8rem;
}

.badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.badge-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

/* Table Body */
.table-body {
    padding: 10px;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 2px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInRow 0.6s ease-out forwards;
}

.table-row[data-row="1"] {
    animation-delay: 0.1s;
}

.table-row[data-row="2"] {
    animation-delay: 0.2s;
}

.table-row[data-row="3"] {
    animation-delay: 0.3s;
}

.table-row[data-row="4"] {
    animation-delay: 0.4s;
}

.table-row[data-row="5"] {
    animation-delay: 0.5s;
}

.table-row[data-row="6"] {
    animation-delay: 0.6s;
}

@keyframes fadeInRow {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.table-row:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: scale(1.01);
}

.row-cell {
    padding: 20px;
    display: flex;
    align-items: center;
}

.feature-cell {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.feature-info {
    flex: 1;
}

.feature-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.feature-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.4;
}

.status-cell {
    justify-content: center;
    position: relative;
}

.status-cell.sanrakhsya-cell {
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.05), rgba(255, 119, 198, 0.05));
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.status-indicator.available {
    background: rgba(46, 213, 115, 0.1);
    border: 1px solid rgba(46, 213, 115, 0.2);
}

.status-indicator.available:hover {
    background: rgba(46, 213, 115, 0.15);
    transform: scale(1.05);
}

.status-indicator.unavailable {
    background: rgba(255, 71, 87, 0.08);
    border: 1px solid rgba(255, 71, 87, 0.15);
}

.status-indicator.partial {
    background: rgba(255, 184, 0, 0.1);
    border: 1px solid rgba(255, 184, 0, 0.2);
}

.status-icon {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.status-indicator.available .status-icon {
    color: #2ed573;
}

.status-indicator.unavailable .status-icon {
    color: #ff4757;
}

.status-indicator.partial .status-icon {
    color: #ffb800;
}

.status-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* Competition CTA */
.competition-cta {
    text-align: center;
    padding: 50px 30px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.1), rgba(255, 119, 198, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.competition-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
    pointer-events: none;
}

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

.cta-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.cta-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Market Cap Section - Modern Minimal Design */
.market-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: 120px 20px;
    overflow: hidden;
}

.market-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Market Header */
.market-header {
    text-align: center;
    margin-bottom: 80px;
}

.market-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.market-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Market Overview Cards */
.market-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.market-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(120, 119, 198, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.market-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.market-card:hover::before {
    opacity: 1;
}

.market-card-header {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.market-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -1px;
}

.market-card-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.market-value-wrapper {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.market-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.market-unit {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.market-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.market-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.detail-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: rgba(120, 119, 198, 1);
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.detail-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

/* SOM Card Estimates */
.market-estimates {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.estimate-item {
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.estimate-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.estimate-item.conservative {
    border-left: 3px solid rgba(100, 181, 246, 0.6);
}

.estimate-item.aggressive {
    border-left: 3px solid rgba(255, 138, 101, 0.6);
}

.estimate-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.estimate-value {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}

/* Market Tables */
.market-tables {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.who-fs {
    position: relative;
    margin-top: 80px;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(28px, 4vh, 56px) 0;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.who-fs::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    z-index: 0;
}

.who-fs-inner {
    width: 100%;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(16px, 2.4vh, 30px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.who-fs-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.who-fs-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.who-fs-title {
    margin: 14px 0 10px;
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
    font-size: clamp(2.15rem, 3.8vw, 3.3rem);
    color: rgba(255, 255, 255, 0.96);
}

.who-fs-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.05rem;
    line-height: 1.6;
}

.who-fs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
    align-items: stretch;
    min-height: 0;
}

.who-fs-card {
    --who-accent: #0ea5e9;
    --who-accent-soft: rgba(14, 165, 233, 0.16);
    position: relative;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    display: grid;
    grid-template-rows: clamp(140px, 22vh, 220px) auto 1fr;
    min-height: 0;
    will-change: transform;
    transform: translateZ(0);
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s ease,
        border-color 0.55s ease,
        background 0.55s ease;
}

.who-fs-card--b2c {
    --who-accent: #7877c6;
    --who-accent-soft: rgba(120, 119, 198, 0.18);
}

.who-fs-card--b2b {
    --who-accent: #4facfe;
    --who-accent-soft: rgba(79, 172, 254, 0.18);
}

.who-fs-card--b2g {
    --who-accent: #00f2fe;
    --who-accent-soft: rgba(0, 242, 254, 0.18);
}

.who-fs-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 20%, var(--who-accent-soft), transparent 58%),
        radial-gradient(circle at 84% 26%, rgba(130, 243, 255, 0.10), transparent 62%);
    opacity: 0.86;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.who-fs-card:hover,
.who-fs-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.028);
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.who-fs-card:hover::before,
.who-fs-card:focus-within::before {
    opacity: 1;
}

.who-fs-card:hover .who-fs-media-overlay,
.who-fs-card:focus-within .who-fs-media-overlay {
    opacity: 1;
}

.who-fs-card:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.35);
    outline-offset: 5px;
}

.who-fs-media {
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.who-fs-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.03);
    will-change: transform;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.who-fs-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.72) 70%, rgba(10, 10, 10, 0.88) 100%),
        radial-gradient(circle at 18% 30%, var(--who-accent-soft), transparent 62%);
    opacity: 0.92;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.who-fs-card:hover .who-fs-media-img,
.who-fs-card:focus-within .who-fs-media-img {
    transform: scale(1.10);
    filter: saturate(1.10) contrast(1.05);
}

.who-fs-top {
    padding: 18px 20px 0;
    position: relative;
    z-index: 1;
}

.who-fs-model {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-size: 0.78rem;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.who-fs-audience {
    margin: 12px 0 6px;
    font-family: 'Syne', sans-serif;
    font-weight: 850;
    letter-spacing: -0.5px;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.92);
}

.who-fs-icons {
    display: flex;
    gap: 8px;
    margin: 6px 0 4px;
}

.who-fs-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}

.who-fs-icon i,
.who-fs-icon svg {
    width: 18px;
    height: 18px;
}

.who-fs-card:hover .who-fs-icon,
.who-fs-card:focus-within .who-fs-icon {
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.26);
}

.who-fs-tone {
    color: rgba(255, 255, 255, 0.60);
    font-weight: 650;
    font-size: 0.95rem;
}

.who-fs-usecase {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 750;
    font-size: 0.95rem;
    line-height: 1.4;
}

.who-fs-usecase span {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 900;
    margin-right: 6px;
}

.who-fs-bullets {
    padding: 12px 20px 0 38px;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-weight: 650;
    font-size: 0.96rem;
    line-height: 1.45;
    position: relative;
    z-index: 1;
    padding-bottom: 22px;
}

.who-fs-offer {
    display: grid;
    gap: 14px;
    padding: 18px 20px 22px;
    position: relative;
    z-index: 1;
}

.who-fs-offer-item {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, background 0.35s ease;
}

.who-fs-offer-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 22%, rgba(130, 243, 255, 0.08), transparent 58%),
        radial-gradient(circle at 82% 30%, rgba(234, 179, 8, 0.06), transparent 62%);
    opacity: 0.8;
    pointer-events: none;
}

.who-fs-offer-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--who-accent);
    opacity: 0.75;
}

.who-fs-offer-item--app::before {
    background: rgba(130, 243, 255, 0.75);
}

.who-fs-offer-item--device::before {
    background: var(--who-accent);
}

.who-fs-card:hover .who-fs-offer-item,
.who-fs-card:focus-within .who-fs-offer-item {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.who-fs-card:hover .who-fs-offer-item:nth-child(1),
.who-fs-card:focus-within .who-fs-offer-item:nth-child(1) {
    transform: translateY(-2px);
}

.who-fs-card:hover .who-fs-offer-item:nth-child(2),
.who-fs-card:focus-within .who-fs-offer-item:nth-child(2) {
    transform: translateY(-1px);
}

.who-fs-offer-label {
    font-size: 0.82rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 850;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.who-fs-offer-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -0.3px;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.who-fs-bullets li {
    margin: 7px 0;
}

.who-fs-stack {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 18px;
    position: relative;
    z-index: 1;
}

.who-fs-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: rgba(11, 18, 32, 0.84);
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.10);
}

.who-fs-chip svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.who-fs-chip-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(2, 6, 23, 0.22));
}

.who-fs-bridge {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.20), var(--who-accent), rgba(15, 23, 42, 0.20));
    position: relative;
    overflow: hidden;
}

.who-fs-bridge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), var(--who-accent));
    transform: translate(-50%, -50%);
    opacity: 0;
}

.who-fs-card:hover .who-fs-bridge::after,
.who-fs-card:focus-within .who-fs-bridge::after {
    opacity: 1;
    animation: whoFsDot 1.6s ease-in-out infinite;
}

@keyframes whoFsDot {
    0% {
        left: 0;
        filter: blur(0px);
    }

    50% {
        left: 50%;
        filter: blur(0.2px);
    }

    100% {
        left: 100%;
        filter: blur(0px);
    }
}

.who-fs-head[data-reveal],
.who-fs-card[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.who-fs-head.is-revealed,
.who-fs-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.who-fs-card.is-revealed {
    transition-delay: var(--who-delay, 0s);
}

@media (max-width: 980px) {
    .who-fs {
        padding: 30px 0;
    }

    .who-fs-inner {
        gap: 18px;
    }

    .who-fs-grid {
        grid-template-columns: repeat(3, minmax(260px, 78%));
        grid-auto-flow: column;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .who-fs-grid::-webkit-scrollbar {
        height: 8px;
    }

    .who-fs-grid::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.16);
        border-radius: 999px;
    }

    .who-fs-card {
        scroll-snap-align: start;
        grid-template-rows: clamp(86px, 14vh, 120px) auto 1fr auto;
    }

    .who-fs-bullets {
        font-size: 0.9rem;
    }

    .who-fs-bullets {
        padding-left: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .who-fs-card,
    .who-fs-media-img,
    .who-fs-head[data-reveal],
    .who-fs-card[data-reveal] {
        transition: none;
    }

    .who-fs-card:hover,
    .who-fs-card:focus-within {
        transform: none;
    }

    .who-fs-card:hover .who-fs-media-img,
    .who-fs-card:focus-within .who-fs-media-img {
        transform: none;
    }

    .who-fs-bridge::after {
        animation: none;
        opacity: 1;
        left: 50%;
    }
}

.who-section {
    margin-top: 90px;
}

.who-header {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 44px;
}

.who-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    font-weight: 650;
    color: rgba(255, 255, 255, 0.96);
    margin: 12px 0 16px;
    letter-spacing: -1px;
}

.who-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.60);
    font-size: 1.08rem;
    line-height: 1.7;
}

.who-header[data-reveal],
.who-diagram[data-reveal],
.who-closing[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.who-header.is-revealed,
.who-diagram.is-revealed,
.who-closing.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.who-diagram {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    min-height: 560px;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 18% 22%, rgba(130, 243, 255, 0.10), transparent 56%),
        radial-gradient(circle at 84% 26%, rgba(234, 179, 8, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.who-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.who-line {
    fill: none;
    stroke: rgba(130, 243, 255, 0.16);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
    transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 0.45s ease;
}

.who-flow {
    fill: none;
    stroke: rgba(234, 179, 8, 0.20);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 5 10;
    opacity: 0;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}

.who-diagram.is-revealed .who-flow {
    opacity: 1;
    animation: whoFlow 1.9s linear infinite;
}

.who-diagram.is-revealed .who-flow--b2c {
    animation-delay: 0.10s;
}

.who-diagram.is-revealed .who-flow--b2b {
    animation-delay: 0.25s;
}

.who-diagram.is-revealed .who-flow--b2g {
    animation-delay: 0.40s;
}

@keyframes whoFlow {
    to {
        stroke-dashoffset: -60;
    }
}

.who-diagram.is-revealed .who-line--b2c {
    stroke-dashoffset: 0;
    transition-delay: 0.10s;
}

.who-diagram.is-revealed .who-line--b2b {
    stroke-dashoffset: 0;
    transition-delay: 0.30s;
}

.who-diagram.is-revealed .who-line--b2g {
    stroke-dashoffset: 0;
    transition-delay: 0.50s;
}

.who-node {
    position: absolute;
    z-index: 2;
    width: min(360px, 32vw);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 18px 18px 16px;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(6px);
    opacity: 0.92;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.who-node::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 25% 18%, rgba(130, 243, 255, 0.10), transparent 55%),
        radial-gradient(circle at 82% 28%, rgba(234, 179, 8, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.who-node:focus-visible {
    outline: 3px solid rgba(130, 243, 255, 0.35);
    outline-offset: 3px;
}

.who-diagram.is-revealed .who-node {
    opacity: 1;
    transform: translateY(0);
}

.who-node--center {
    width: 160px;
    height: 160px;
    border-radius: 34px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    display: grid;
    place-items: center;
    padding: 0;
    background:
        radial-gradient(circle at 30% 28%, rgba(130, 243, 255, 0.14), transparent 60%),
        radial-gradient(circle at 75% 35%, rgba(234, 179, 8, 0.10), transparent 62%),
        rgba(0, 0, 0, 0.22);
}

.who-node--center::before {
    opacity: 1;
    background:
        radial-gradient(circle at 25% 20%, rgba(130, 243, 255, 0.14), transparent 56%),
        radial-gradient(circle at 82% 30%, rgba(234, 179, 8, 0.12), transparent 62%);
    filter: blur(0px);
}

.who-diagram.is-revealed .who-node--center {
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.12s;
}

.who-node--b2c {
    left: 6.5%;
    top: 50%;
    transform: translateY(6px) translateY(-50%);
}

.who-diagram.is-revealed .who-node--b2c {
    transition-delay: 0.22s;
}

.who-node--b2b {
    right: 6.5%;
    top: 20%;
}

.who-diagram.is-revealed .who-node--b2b {
    transition-delay: 0.34s;
}

.who-node--b2g {
    right: 6.5%;
    bottom: 14%;
}

.who-diagram.is-revealed .who-node--b2g {
    transition-delay: 0.46s;
}

.who-node:hover {
    transform: translateY(-4px);
    border-color: rgba(130, 243, 255, 0.18);
    box-shadow:
        0 30px 95px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.who-node:hover::before {
    opacity: 1;
}

.who-node--b2c:hover {
    transform: translateY(-4px) translateY(-50%) scale(1.02);
}

.who-node-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.who-node-icon {
    width: 44px;
    height: 44px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.20), rgba(234, 179, 8, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(130, 243, 255, 0.95);
    flex: 0 0 auto;
}

.who-node-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.who-node-kicker {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}

.who-node-title {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: rgba(255, 255, 255, 0.92);
}

.who-node-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.who-mini {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.80);
    transform: translateY(2px);
    opacity: 0.88;
}

.who-mini svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.who-node:hover .who-mini {
    animation: whoMiniPop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.who-node:hover .who-mini:nth-child(2) {
    animation-delay: 0.06s;
}

.who-node:hover .who-mini:nth-child(3) {
    animation-delay: 0.12s;
}

.who-node:hover .who-mini:nth-child(4) {
    animation-delay: 0.18s;
}

@keyframes whoMiniPop {
    0% {
        transform: translateY(2px) scale(0.95);
        opacity: 0.88;
    }

    60% {
        transform: translateY(-3px) scale(1.06);
        opacity: 1;
    }

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

.who-node--b2b::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px solid rgba(130, 243, 255, 0.14);
    opacity: 0;
    pointer-events: none;
}

.who-node--b2b:hover::after {
    opacity: 1;
    animation: whoPulse 1.8s ease-in-out infinite;
}

@keyframes whoPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(130, 243, 255, 0.12);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(130, 243, 255, 0.0);
    }
}

.who-node--b2g {
    background:
        radial-gradient(circle at 25% 22%, rgba(20, 184, 166, 0.10), transparent 55%),
        radial-gradient(circle at 78% 28%, rgba(234, 179, 8, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.03);
}

.who-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.who-pill {
    position: relative;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
    font-weight: 650;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease;
}

.who-pill:hover,
.who-pill:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(130, 243, 255, 0.18);
    outline: none;
}

.who-pill::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: max-content;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(8, 8, 10, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    line-height: 1.45;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 5;
}

.who-pill:hover::after,
.who-pill:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.who-center-icon {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(234, 179, 8, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(130, 243, 255, 0.95);
}

.who-center-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    transform: translateY(2px);
    filter: drop-shadow(0 22px 55px rgba(0, 0, 0, 0.65)) saturate(1.05) contrast(1.06);
}

.who-diagram.is-revealed .who-center-img {
    animation: whoDevicePop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes whoDevicePop {
    0% {
        transform: translateY(10px) scale(0.92);
        opacity: 0.2;
    }

    100% {
        transform: translateY(2px) scale(1);
        opacity: 1;
    }
}

.who-thumb {
    height: 92px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.who-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.52)),
        radial-gradient(circle at 20% 20%, rgba(130, 243, 255, 0.16), transparent 55%),
        radial-gradient(circle at 82% 25%, rgba(234, 179, 8, 0.12), transparent 60%);
    opacity: 0.75;
    pointer-events: none;
}

.who-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s ease;
    filter: saturate(1.1) contrast(1.02);
}

.who-node:hover .who-thumb-img {
    transform: scale(1.12);
    filter: saturate(1.18) contrast(1.06);
}

.who-center-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.who-center-label {
    margin-top: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
}

.who-closing {
    max-width: 1180px;
    margin: 44px auto 0;
}

.who-impact {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 26px;
    align-items: center;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 22% 25%, rgba(130, 243, 255, 0.08), transparent 55%),
        radial-gradient(circle at 82% 30%, rgba(234, 179, 8, 0.07), transparent 60%),
        rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
    padding: 26px 26px;
}

.who-impact-center {
    width: 200px;
    height: 200px;
    border-radius: 40px;
    position: relative;
    margin: 0 auto;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.who-impact-device {
    width: 74px;
    height: 74px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(234, 179, 8, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(130, 243, 255, 0.95);
    z-index: 2;
}

.who-impact-device svg {
    width: 34px;
    height: 34px;
    stroke-width: 2;
}

.who-impact-orbit {
    position: absolute;
    inset: 0;
    animation: whoOrbit 10s linear infinite;
}

.who-orbit-icon {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.82);
}

.who-orbit-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.who-orbit-icon[data-i="1"] {
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.who-orbit-icon[data-i="2"] {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.who-orbit-icon[data-i="3"] {
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.who-orbit-icon[data-i="4"] {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes whoOrbit {
    to {
        transform: rotate(360deg);
    }
}

.who-impact-line {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 750;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.6px;
}

.who-impact-subline {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .who-diagram {
        min-height: auto;
        padding: 22px;
        display: grid;
        gap: 16px;
    }

    .who-lines {
        display: none;
    }

    .who-node {
        position: static;
        width: 100%;
        transform: none;
    }

    .who-node--center {
        width: 100%;
        height: auto;
        padding: 18px;
        display: flex;
        justify-content: center;
        gap: 14px;
    }

    .who-center-label {
        margin: 0;
        align-self: center;
    }

    .who-impact {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .who-line {
        transition: none;
        stroke-dashoffset: 0;
    }

    .who-flow {
        animation: none;
        opacity: 0;
    }

    .who-mini {
        animation: none;
    }

    .who-impact-orbit {
        animation: none;
    }
}

.market-table-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.market-table-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(120, 119, 198, 0.05), transparent 60%);
    pointer-events: none;
}

.table-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.table-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
}

.table-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.total-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.total-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -1px;
}

/* Market Table */
.market-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.table-row {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 0.8fr 0.8fr;
    gap: 15px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.table-row:not(.table-header-row):not(.table-total-row):hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.table-header-row {
    background: rgba(120, 119, 198, 0.15);
    font-weight: 600;
}

.table-total-row {
    background: rgba(120, 119, 198, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.table-cell {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.table-header-row .table-cell {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-cell.highlight {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1rem;
}

/* Budget Section - Modern Minimal Design */
.budget-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: 120px 20px;
    overflow: hidden;
}

.budget-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Budget Header */
.budget-header {
    text-align: center;
    margin-bottom: 60px;
}

.budget-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.budget-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Budget Toggle */
.budget-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 auto 80px;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    padding: 8px;
    position: relative;
}

.budget-toggle-slider {
    position: absolute;
    width: calc(50% - 8px);
    height: calc(100% - 16px);
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    left: 8px;
    z-index: 0;
    box-shadow: 0 4px 20px rgba(120, 119, 198, 0.3);
}

.budget-toggle:has(.budget-toggle-btn[data-budget="full"].active) .budget-toggle-slider {
    transform: translateX(calc(100% + 8px));
}

.budget-toggle-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 32px;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.budget-toggle-btn.active {
    color: #ffffff;
}

.toggle-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.toggle-label {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Budget Content */
.budget-content {
    display: none;
    animation: fadeInScale 0.6s ease-out;
}

.budget-content.active {
    display: block;
}

/* Budget Card */
.budget-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 32px;
    padding: 50px;
    position: relative;
    overflow: hidden;
}

.budget-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(120, 119, 198, 0.05), transparent 60%);
    pointer-events: none;
}

.budget-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.budget-card-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -1px;
}

.budget-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.total-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.total-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Budget Table */
.budget-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.budget-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.budget-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(120, 119, 198, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.budget-row:hover {
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.budget-row:hover::before {
    opacity: 1;
}

.budget-category {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.category-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.category-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: rgba(120, 119, 198, 1);
}

.budget-row:hover .category-icon {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.category-info {
    flex: 1;
}

.category-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.category-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.4;
}

.budget-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.budget-bar {
    grid-column: 1 / -1;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    width: var(--percentage);
    background: linear-gradient(90deg, rgba(120, 119, 198, 0.8), rgba(255, 119, 198, 0.8));
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

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

/* Budget Note */
.budget-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    position: relative;
    z-index: 1;
}

.note-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: rgba(120, 119, 198, 1);
}

.note-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    font-style: italic;
}

/* App Showcase Section - Split Screen Interactive Demo */
.app-showcase-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: 120px 20px;
    overflow: hidden;
}

.showcase-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Showcase Header */
.showcase-header {
    text-align: center;
    margin-bottom: 80px;
}

.showcase-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.showcase-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Split Demo Wrapper */
.split-demo-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 80px;
}

/* Demo Side */
.demo-side {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.demo-header {
    text-align: center;
}

.header-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 119, 198, 0.15);
    border: 2px solid rgba(120, 119, 198, 0.3);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.header-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 2;
    color: rgba(120, 119, 198, 1);
}

.demo-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.demo-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Device Mockup */
.device-mockup {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.device-frame {
    position: relative;
    width: 320px;
    height: 650px;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 0 0 2px #2a2a2a,
        0 0 0 4px #1a1a1a,
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 2px rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-frame:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 0 0 2px #2a2a2a,
        0 0 0 4px #1a1a1a,
        0 30px 80px rgba(120, 119, 198, 0.3),
        inset 0 0 2px rgba(255, 255, 255, 0.1);
}

.device-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #1a1a1a;
    border-radius: 0 0 20px 20px;
    z-index: 10;
}

.device-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    border-radius: 32px;
    overflow: hidden;
}

.screen-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.screen-image.active {
    opacity: 1;
    pointer-events: auto;
}

/* Feature Navigation */
.feature-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.1), rgba(255, 119, 198, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    color: rgba(255, 255, 255, 0.9);
}

.feature-btn:hover::before {
    opacity: 1;
}

.feature-btn.active {
    background: rgba(120, 119, 198, 0.2);
    border-color: rgba(120, 119, 198, 0.4);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(120, 119, 198, 0.3);
}

.feature-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    position: relative;
    z-index: 1;
}

.feature-btn span {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.2;
}

/* Demo Divider */
.demo-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.divider-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(120, 119, 198, 0.3) 20%,
            rgba(120, 119, 198, 0.5) 50%,
            rgba(120, 119, 198, 0.3) 80%,
            transparent);
    position: relative;
}

.divider-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 119, 198, 0.2);
    border: 2px solid rgba(120, 119, 198, 0.4);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    animation: pulse 3s ease-in-out infinite;
}

.divider-badge svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: rgba(120, 119, 198, 1);
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(120, 119, 198, 0.4);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(120, 119, 198, 0);
    }
}

/* Showcase CTA */
.showcase-cta {
    text-align: center;
    padding: 60px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

.showcase-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(120, 119, 198, 0.1), transparent 70%);
    pointer-events: none;
}

.cta-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 30px 0;
    position: relative;
    z-index: 1;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
    border: 2px solid rgba(120, 119, 198, 0.5);
    border-radius: 50px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(120, 119, 198, 0.4);
    border-color: rgba(120, 119, 198, 0.7);
}

.cta-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.cta-button:hover svg {
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .split-demo-wrapper {
        gap: 40px;
    }

    .device-frame {
        width: 280px;
        height: 570px;
    }

    .feature-nav {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 968px) {
    .split-demo-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .demo-divider {
        display: none;
    }

    .device-frame {
        width: 320px;
        height: 650px;
    }
}

@media (max-width: 480px) {
    .app-showcase-section {
        padding: 80px 20px;
    }

    .showcase-header {
        margin-bottom: 60px;
    }

    .device-frame {
        width: 280px;
        height: 570px;
    }

    .feature-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-btn {
        padding: 14px 10px;
        font-size: 0.8rem;
    }

    .feature-btn svg {
        width: 20px;
        height: 20px;
    }

    .showcase-cta {
        padding: 40px 20px;
    }

    .cta-text {
        font-size: 1.2rem;
    }

    .cta-button {
        padding: 16px 32px;
        font-size: 1rem;
    }
}

/* Contact Section - Unique Interactive Design */
.contact-section {
    position: relative;
    min-height: auto;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    padding: 80px 20px;
    overflow: hidden;
}

.contact-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Contact Header */
.contact-header {
    text-align: center;
    margin-bottom: 80px;
}

.contact-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Contact Methods Grid */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 100px;
}

.contact-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(120, 119, 198, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.contact-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.contact-card:hover::before {
    opacity: 1;
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(120, 119, 198, 0.15), transparent 50%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.contact-card:hover .card-glow {
    opacity: 1;
    animation: rotateGlow 8s linear infinite;
}

@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.card-icon-wrapper {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatIcon 3s ease-in-out infinite;
}

.card-icon svg {
    width: 56px;
    height: 56px;
    stroke-width: 1.5;
    color: rgba(120, 119, 198, 1);
}

@keyframes floatIcon {

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

    50% {
        transform: translateY(-10px);
    }
}

.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    position: relative;
    z-index: 1;
}

.card-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0 0 25px 0;
    position: relative;
    z-index: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.card-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.link-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.card-link:hover .link-arrow {
    transform: translateX(5px);
}

.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

/* Contact Form Section */
.contact-form-section {
    position: relative;
    margin-bottom: 80px;
}

.form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    padding: 50px;
    position: relative;
    z-index: 2;
}

.form-header {
    text-align: center;
    margin-bottom: 50px;
}

.form-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.form-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

.contact-form {
    position: relative;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.form-group {
    position: relative;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: rgba(255, 255, 255, 0.5);
}

.input-icon.textarea-icon {
    top: 20px;
    transform: none;
}

.form-input {
    width: 100%;
    padding: 16px 20px 16px 55px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #ffffff;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    position: relative;
    z-index: 0;
}

.form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(120, 119, 198, 0.4);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-textarea {
    resize: vertical;
    min-height: 140px;
    padding-top: 16px;
}

.input-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(120, 119, 198, 0.8), rgba(255, 119, 198, 0.8));
    transition: width 0.4s ease;
    border-radius: 0 0 14px 14px;
}

.form-input:focus+.input-border {
    width: 100%;
}

.form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.submit-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 50px;
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.submit-button:hover::before {
    left: 100%;
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(120, 119, 198, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.button-text {
    position: relative;
    z-index: 1;
}

.button-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.submit-button:hover .button-icon {
    transform: translateX(5px) rotate(-15deg);
}

.button-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.6s ease;
}

.submit-button:hover .button-glow {
    width: 300px;
    height: 300px;
    opacity: 1;
}

.form-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Form Decoration */
.form-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 119, 198, 0.1), transparent 70%);
    filter: blur(60px);
    animation: floatDecoration 20s ease-in-out infinite;
}

.circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.circle-2 {
    width: 250px;
    height: 250px;
    bottom: -80px;
    left: -80px;
    animation-delay: 7s;
}

.circle-3 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: -50px;
    animation-delay: 14s;
}

@keyframes floatDecoration {

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

    50% {
        transform: translate(30px, -30px);
    }
}

/* Social Section */
.social-section {
    text-align: center;
    padding: 60px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
}

.social-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 40px 0;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 120px;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
    color: rgba(120, 119, 198, 1);
}

.social-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Footer */
.site-footer {
    background: #000000;
    padding: 60px 20px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-brand {
    flex: 1;
}

.footer-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.footer-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.footer-copyright {
    text-align: right;
}

.footer-copyright p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        width: 90%;
    }

    .nav-container {
        padding: 8px 15px;
        justify-content: space-between;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(17, 17, 17, 0.98);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        margin-top: 10px;
        padding: 20px;
        flex-direction: column;
        gap: 5px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        padding: 15px 20px;
        border-radius: 10px;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.05);
    }


    .mobile-toggle {
        display: flex;
    }

    .hero-content {
        padding: 100px 20px 60px;
    }

    .hero-title {
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .hero-tagline {
        font-size: 1.2rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px;
    }

    .baby-container {
        width: 60px;
        height: 75px;
    }

    /* Problem Section Responsive */
    .problem-section {
        padding: 80px 20px;
    }

    .problem-header {
        margin-bottom: 60px;
    }

    .deepdive-grid {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .deepdive-column {
        min-height: unset;
        padding: 30px 20px;
    }

    .deepdive-column + .deepdive-column {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .deepdive-media {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deepdive-media--split {
        grid-template-columns: 1fr;
    }

    .deepdive-media--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deepdive-column[data-col="3"] .deepdive-media--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-box[data-size="wide"],
    .media-box[data-size="landscape"] {
        grid-column: 1 / -1;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 60px;
    }

    .stat-card {
        padding: 30px;
    }

    .stat-circle {
        width: 150px;
        height: 150px;
    }

    .number-value {
        font-size: 2.5rem;
    }

    .number-symbol {
        font-size: 1.5rem;
    }

    .cycle-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 30px;
    }

    .cycle-diagram {
        max-width: 300px;
    }

    .cycle-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .cycle-center-icon {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .cycle-label {
        font-size: 0.8rem;
    }

    /* Stakeholder Section Responsive */
    .stakeholder-tabs {
        gap: 10px;
    }

    .tab-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .tab-icon {
        font-size: 1.3rem;
    }

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

    .problem-item {
        padding: 25px;
    }

    /* Solution Section Responsive */
    .solution-section {
        padding: 80px 20px;
    }

    .solution-toggle {
        max-width: 350px;
    }

    .toggle-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .features-showcase {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .feature-card {
        padding: 30px;
    }

    .hardware-showcase {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hardware-specs {
        grid-template-columns: 1fr;
    }

    .hardware-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Competition Section Responsive */
    .competition-section {
        padding: 80px 20px;
    }

    .competition-header {
        margin-bottom: 60px;
    }

    .cl-board {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cl-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cl-legend {
        justify-content: flex-start;
    }

    .cl-grid--players .cl-grid-head,
    .cl-grid--players .cl-grid-row,
    .cl-grid--matrix .cl-grid-head,
    .cl-grid--matrix .cl-grid-row {
        grid-template-columns: 1fr;
    }

    .cl-grid-head {
        display: none;
    }

    .cl-grid-row {
        gap: 0;
    }

    .cl-cell {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 12px 12px;
        display: grid;
        gap: 6px;
        justify-content: stretch;
    }

    .cl-cell:first-child {
        border-top: none;
    }

    .cl-cell::before {
        content: attr(data-k);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
    }

    .cl-grid--matrix .cl-cell:nth-child(2),
    .cl-grid--matrix .cl-cell:nth-child(3) {
        justify-content: stretch;
    }

    .cl-pill {
        justify-content: flex-start;
        width: fit-content;
    }

    .comparison-wrapper {
        padding: 10px;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

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

    .table-header {
        padding: 20px 15px;
    }

    .competitor-badge {
        padding: 10px 12px;
    }

    .badge-title {
        font-size: 0.85rem;
    }

    .badge-subtitle {
        font-size: 0.7rem;
    }

    .row-cell {
        padding: 15px;
    }

    .feature-icon {
        font-size: 1.5rem;
    }

    .feature-name {
        font-size: 0.95rem;
    }

    .feature-desc {
        font-size: 0.8rem;
    }

    .status-indicator {
        padding: 8px 12px;
    }

    .status-text {
        font-size: 0.8rem;
    }

    .competition-cta {
        padding: 40px 25px;
    }

    /* Contact Section Responsive */
    .contact-section {
        padding: 80px 20px;
    }

    .contact-header {
        margin-bottom: 60px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 60px;
    }

    .contact-card {
        padding: 35px 25px;
    }

    .form-wrapper {
        padding: 35px 25px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .social-section {
        padding: 40px 20px;
    }

    .social-links {
        gap: 15px;
    }

    .social-link {
        padding: 20px 25px;
        min-width: 100px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .brand-text {
        font-size: 0.85rem;
    }

    .nav-container {
        padding: 8px 15px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero-tagline {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    /* Problem Section Mobile */
    .problem-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .stat-card {
        padding: 25px;
    }

    .stat-circle {
        width: 120px;
        height: 120px;
    }

    .number-value {
        font-size: 2rem;
    }

    .cycle-content {
        padding: 30px 20px;
    }

    .cycle-title {
        font-size: 1.5rem;
    }

    .cycle-description {
        font-size: 1rem;
    }

    .cycle-diagram {
        max-width: 250px;
    }

    .cycle-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .cycle-center-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .cta-text {
        font-size: 1.2rem;
    }

    /* Stakeholder Section Mobile */
    .stakeholder-title {
        font-size: 1.8rem;
    }

    .stakeholder-subtitle {
        font-size: 1rem;
    }

    .tab-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
        gap: 8px;
    }

    .tab-icon {
        font-size: 1.2rem;
    }

    .problem-item {
        padding: 20px;
    }

    .problem-icon {
        font-size: 2rem;
    }

    .problem-item-title {
        font-size: 1rem;
    }

    .problem-item-desc {
        font-size: 0.9rem;
    }

    /* Solution Section Mobile */
    .solution-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .solution-subtitle {
        font-size: 1rem;
    }

    .solution-toggle {
        max-width: 320px;
    }

    .toggle-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
        gap: 8px;
    }

    .toggle-icon {
        font-size: 1.1rem;
    }

    .solution-category-title {
        font-size: 1.8rem;
    }

    .solution-category-desc {
        font-size: 1rem;
    }

    .feature-card {
        padding: 25px;
    }

    .feature-number {
        font-size: 2.5rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }

    .feature-title {
        font-size: 1.2rem;
    }

    .feature-description {
        font-size: 0.95rem;
    }

    .hardware-content {
        padding: 25px;
    }

    .hardware-title {
        font-size: 1.5rem;
    }

    .hardware-description {
        font-size: 0.95rem;
    }

    .hardware-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hw-feature {
        padding: 25px 15px;
    }

    .hw-feature-icon {
        font-size: 2rem;
    }

    /* Hide control hint on mobile to prevent blocking the 3D model */
    .control-hint {
        display: none;
    }

    /* Make reset button more prominent on mobile */
    .reset-view-btn {
        width: 50px;
        height: 50px;
        background: rgba(120, 119, 198, 0.3);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .reset-icon {
        font-size: 1.5rem;
    }

    /* Adjust model viewer for mobile */
    .model-viewer {
        height: 350px;
    }

    .model-canvas {
        border-radius: 16px;
    }

    /* Competition Section Mobile - Unique Vertical Card Layout */
    .competition-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .competition-subtitle {
        font-size: 1rem;
    }

    /* Hide the table on mobile and show card layout instead */
    .comparison-wrapper {
        display: none;
    }

    /* Create mobile-specific card layout */
    .competition-section::after {
        content: '';
        display: block;
    }

    /* Mobile Feature Cards */
    .comparison-table {
        display: none;
    }

    /* Show features as vertical cards on mobile */
    @media (max-width: 768px) {
        .comparison-wrapper {
            display: block;
            padding: 0;
            overflow: visible;
        }

        .comparison-table {
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-width: auto;
        }

        .table-header {
            display: none;
        }

        .table-row {
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 25px;
            gap: 20px;
        }

        .table-row:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .row-cell {
            padding: 0;
            border: none;
        }

        .feature-cell {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.15);
            margin-bottom: 15px;
        }

        .feature-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .feature-info {
            flex: 1;
        }

        .feature-name {
            font-size: 1.1rem;
            margin-bottom: 5px;
            font-weight: 600;
        }

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

        /* Status cells in grid with competitor names */
        .status-cell {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 10px;
        }

        .status-cell::before {
            font-size: 0.8rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 0.5px;
        }

        .status-cell.sanrakhsya-cell {
            background: rgba(120, 119, 198, 0.15);
            border-color: rgba(120, 119, 198, 0.3);
        }

        .status-cell.sanrakhsya-cell::before {
            content: '✨ Sanrakhsya';
            color: rgba(120, 119, 198, 1);
            font-weight: 700;
        }

        .status-cell:nth-child(3)::before {
            content: '🏛️ Poshan Tracker (Govt)';
        }

        .status-cell:nth-child(4)::before {
            content: '👶 Parent Apps (BabyChakra, Healofy)';
        }

        .status-cell:nth-child(5)::before {
            content: '🏥 Telehealth (Practo, Apollo24)';
        }

        .status-indicator {
            padding: 8px 12px;
            gap: 8px;
            justify-self: start;
        }

        .status-icon {
            font-size: 1.1rem;
        }

        .status-text {
            font-size: 0.8rem;
        }
    }

    .competition-cta {
        padding: 30px 20px;
    }

    .cta-title {
        font-size: 1.5rem;
    }

    .cta-description {
        font-size: 1rem;
    }

    /* Market Section Mobile - Responsive Layout */
    .market-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .market-subtitle {
        font-size: 1rem;
    }

    .market-overview {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 60px;
    }

    .market-card {
        padding: 30px 25px;
    }

    .market-card-title {
        font-size: 2rem;
    }

    .market-value {
        font-size: 2.2rem;
    }

    .estimate-value {
        font-size: 1.5rem;
    }

    /* Mobile Market Tables - Vertical Card Layout */
    .market-table-wrapper {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .table-header-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }

    .table-title {
        font-size: 1.2rem;
    }

    .table-total {
        align-items: flex-start;
    }

    .total-value {
        font-size: 1.8rem;
    }

    /* Transform table into vertical cards */
    .market-table {
        gap: 15px;
    }

    .table-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
    }

    .table-row:not(.table-header-row):not(.table-total-row):hover {
        transform: translateY(-3px);
    }

    .table-header-row {
        display: none;
    }

    .table-cell {
        font-size: 0.85rem;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .table-cell::before {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }

    .table-cell:nth-child(1) {
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }

    .table-cell:nth-child(1)::before {
        display: none;
    }

    .table-cell:nth-child(2)::before {
        content: 'Assumption Basis';
    }

    .table-cell:nth-child(3)::before {
        content: 'Adoption';
    }

    .table-cell:nth-child(4)::before {
        content: 'Price (INR)';
    }

    .table-cell:nth-child(5)::before {
        content: 'Market Cap (INR Cr)';
    }

    .table-cell.highlight {
        font-size: 1.2rem;
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        justify-content: center;
    }

    .table-total-row {
        background: rgba(120, 119, 198, 0.25);
        border: 2px solid rgba(120, 119, 198, 0.4);
    }

    .table-total-row .table-cell:first-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Budget Section Mobile - Unique Vertical Layout */
    .budget-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .budget-subtitle {
        font-size: 1rem;
    }

    .budget-toggle {
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
        padding: 10px;
    }

    .budget-toggle-slider {
        display: none;
    }

    .budget-toggle-btn {
        width: 100%;
        padding: 20px;
        border-radius: 16px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

    .budget-toggle-btn.active {
        background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));
        border-color: rgba(120, 119, 198, 0.5);
        box-shadow: 0 4px 20px rgba(120, 119, 198, 0.3);
    }

    .toggle-amount {
        font-size: 1.6rem;
    }

    .toggle-label {
        font-size: 0.9rem;
    }

    .budget-card {
        padding: 25px 20px;
        border-radius: 24px;
    }

    .budget-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 30px;
    }

    .budget-card-title {
        font-size: 1.3rem;
    }

    .budget-total {
        align-items: flex-start;
    }

    .total-amount {
        font-size: 2rem;
    }

    /* Mobile Budget Row - Vertical Card Layout */
    .budget-row {
        display: grid;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        border-radius: 16px;
    }


    .budget-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .category-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .category-name {
        font-size: 1rem;
    }

    .category-note {
        font-size: 0.85rem;
    }

    .budget-amount {
        font-size: 1.4rem;
        align-self: flex-end;
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .budget-bar {
        grid-column: 1 / -1;
        margin-top: 10px;
        height: 8px;
    }

    .budget-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px;
        margin-top: 25px;
    }

    .note-icon {
        font-size: 1.3rem;
    }

    .note-text {
        font-size: 0.9rem;
    }

    /* Contact Section Mobile */
    .contact-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .contact-subtitle {
        font-size: 1rem;
    }

    .contact-card {
        padding: 30px 20px;
    }

    .card-icon {
        font-size: 3rem;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .card-description {
        font-size: 0.95rem;
    }

    .form-wrapper {
        padding: 30px 20px;
    }

    .form-title {
        font-size: 1.8rem;
    }

    .form-subtitle {
        font-size: 1rem;
    }

    .form-input {
        padding: 14px 18px 14px 50px;
        font-size: 0.95rem;
    }

    .submit-button {
        padding: 16px 40px;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
    }

    .social-section {
        padding: 40px 15px;
    }

    .social-title {
        font-size: 1.3rem;
    }

    .social-link {
        padding: 20px;
        min-width: 90px;
    }

    .social-icon {
        font-size: 2rem;
    }

    .social-name {
        font-size: 0.85rem;
    }

    .footer-logo {
        font-size: 1.3rem;
    }

    .footer-tagline {
        font-size: 0.85rem;
    }
}

/* Image Showcase Section */
.image-showcase-section {
    position: relative;
    padding: 60px 20px;
    /* Balanced padding */
    background: #0a0a0a;
    width: 100%;
}

.image-showcase-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.showcase-visual {
    position: relative;
    width: 100%;
    /* Use padding-bottom for aspect ratio if needed, or let content define height */
    overflow: hidden;
}

.showcase-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-showcase-container:hover .showcase-img {
    transform: scale(1.02);
}

.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 80%, rgba(10, 10, 10, 0.4) 100%);
    pointer-events: none;
}


.showcase-header {
    text-align: center;
    margin-bottom: 40px;
}

.showcase-section-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -1px;
    padding-bottom: 10px;
    line-height: 1.3;
}

/* Gallery Carousel Section */
.gallery-section {
    padding: 80px 20px;
    background: #0a0a0a;
    position: relative;
    overflow: hidden;
}

.gallery-header {
    text-align: center;
    margin-bottom: 60px;
}

.gallery-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -1px;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.gallery-track-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    aspect-ratio: 16/9;
}

.gallery-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
}

.gallery-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.gallery-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .gallery-container {
        padding: 0 10px;
    }

    .gallery-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}


/* Award / Milestone Section */
.award-section {
    position: relative;
    padding: clamp(76px, 9vh, 110px) 20px;
    overflow: hidden;
    background: transparent;
}

.award-section::before {
    content: none;
}

.award-section::after {
    content: none;
}

.award-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.award-header {
    text-align: center;
    margin-bottom: clamp(28px, 4vh, 44px);
}

.award-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -1px;
    margin: 12px 0 10px;
}

.award-subtitle {
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.05rem;
    max-width: 860px;
    margin: 0 auto;
    line-height: 1.65;
}

.award-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(20px, 3.2vw, 38px);
    align-items: center;
    padding: clamp(22px, 3.2vw, 34px);
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 14%, rgba(102, 126, 234, 0.18), transparent 46%),
        radial-gradient(circle at 86% 22%, rgba(130, 243, 255, 0.08), transparent 52%),
        rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.award-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
            rgba(102, 126, 234, 0.75),
            rgba(130, 243, 255, 0.35),
            rgba(255, 119, 198, 0.22));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.75;
    pointer-events: none;
}

.award-card::after {
    content: '';
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
    transform: rotate(10deg) translateX(-30%);
    opacity: 0.0;
    pointer-events: none;
}

.award-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.55);
}

.award-card:hover::after {
    opacity: 1;
    animation: awardShimmer 2.2s ease both;
}

@keyframes awardShimmer {
    from {
        transform: rotate(10deg) translateX(-30%);
    }

    to {
        transform: rotate(10deg) translateX(30%);
    }
}

.award-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.award-media img {
    width: 100%;
    height: min(380px, 42vh);
    object-fit: contain;
    display: block;
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

.award-card:hover .award-media img {
    transform: translateY(-4px);
}

.award-body {
    position: relative;
}

.award-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.award-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.award-badge svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    color: rgba(102, 126, 234, 1);
}

.award-badge--primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.26), rgba(130, 243, 255, 0.10));
    border-color: rgba(102, 126, 234, 0.35);
}

.award-headline {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    color: #fff;
}

.award-copy {
    color: rgba(255, 255, 255, 0.64);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 18px;
}

.award-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.award-metric {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 14px 14px;
}

.award-metric-k {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.52);
    margin-bottom: 6px;
}

.award-metric-v {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.90);
}

.award-header[data-reveal],
.award-card[data-reveal],
.award-badges[data-reveal],
.award-headline[data-reveal],
.award-copy[data-reveal],
.award-metrics[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.award-header.is-revealed,
.award-card.is-revealed,
.award-badges.is-revealed,
.award-headline.is-revealed,
.award-copy.is-revealed,
.award-metrics.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 880px) {
    .award-card {
        grid-template-columns: 1fr;
    }

    .award-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .award-media img {
        height: min(360px, 46vh);
    }
}

@media (max-width: 560px) {
    .award-metrics {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .award-card,
    .award-media img,
    .award-header[data-reveal],
    .award-card[data-reveal],
    .award-badges[data-reveal],
    .award-headline[data-reveal],
    .award-copy[data-reveal],
    .award-metrics[data-reveal] {
        transition: none;
        animation: none;
    }

    .award-card::after {
        display: none;
    }
}

/* Image Carousel Section */
.carousel-section {
    position: relative;
    margin-top: 70px;
    padding: 80px 20px;
    background: transparent;
    width: 100%;
}

.carousel-container-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-header {
    text-align: center;
    margin-bottom: 50px;
}

.carousel-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #ffffff;
    margin: 10px 0;
    letter-spacing: -1px;
}

.carousel-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
}

.carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    height: 500px;
}

.carousel-track-container {
    background: rgba(255, 255, 255, 0.02);
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 500ms ease-in-out;
}

.carousel-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keeps entire image visible */
    background: transparent;
    /* Good for letterboxing */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: -70px;
}

.next-btn {
    right: -70px;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    gap: 10px;
}

.carousel-indicator {
    border: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicator.current-slide {
    background: #ffffff;
    transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .carousel-btn {
        width: 40px;
        height: 40px;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    .carousel-container {
        height: 400px;
        max-width: 100%;
    }
}


/* Strategic Roadmap & Financial Allocation Section */
.projection-section {
    position: relative;
    padding: 120px 20px;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 50%, #0a0a0a 100%);
    overflow: hidden;
}

.projection-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section Header */
.projection-header {
    text-align: center;
    margin-bottom: 80px;
}

.projection-title {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 20px 0 10px;
}

.projection-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

/* Sub-section Titles */
.subsection-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 4px solid #667eea;
}

/* Roadmap Timeline */
.roadmap-wrapper {
    margin-bottom: 100px;
}

.rm18n,
.rm18n-head[data-reveal],
.rm18n-timeline[data-reveal],
.rm18n-item[data-reveal],
.rm18n-footer[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm18n.is-revealed,
.rm18n-head.is-revealed,
.rm18n-timeline.is-revealed,
.rm18n-item.is-revealed,
.rm18n-footer.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.rm18n {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 90px;
    display: grid;
    gap: 16px;
}

.rm18n-head {
    display: grid;
    gap: 8px;
}

.rm18n-title.subsection-title {
    margin: 0;
    border-left-color: #667eea;
}

.rm18n-subtitle.trench-subtitle {
    margin: 6px 0 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.62);
    max-width: 75ch;
    line-height: 1.5;
}

.rm18n-timeline {
    position: relative;
    margin: 0;
    padding: 2px 0 0;
    list-style: none;
    display: grid;
    gap: 22px;
}

.rm18n-timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}

.rm18n-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.rm18n-rail {
    position: relative;
    width: 28px;
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.rm18n-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.14);
}

.rm18n-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.028);
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 12px;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 8px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease;
}

.rm18n-card::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: 2px;
    background: rgba(102, 126, 234, 0.9);
    opacity: 0.9;
}

.rm18n-card:hover {
    transform: translateY(-2px);
    border-color: rgba(102, 126, 234, 0.28);
}

.rm18n-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rm18n-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(102, 126, 234, 0.35);
    background: rgba(102, 126, 234, 0.10);
    color: rgba(255, 255, 255, 0.90);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.rm18n-window {
    font-size: 0.84rem;
    font-weight: 850;
    color: rgba(255, 255, 255, 0.68);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.rm18n-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.0rem;
    line-height: 1.25;
}

.rm18n-goal {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 850;
    letter-spacing: -0.25px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
    line-height: 1.35;
}

.rm18n-goal-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
}

.rm18n-goal-text {
    color: rgba(255, 255, 255, 0.90);
}

.rm18n-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 10px;
    align-items: stretch;
}

.rm18n-col {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.20);
    padding: 9px 9px;
    display: grid;
    gap: 7px;
    height: 100%;
}

.rm18n-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.64);
}

.rm18n-col-title svg {
    width: 15px;
    height: 15px;
}

.rm18n-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.92rem;
    line-height: 1.44;
}

.rm18n-list li::marker {
    color: #667eea;
}

.rm18n-kpi-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: start;
}

.rm18n-kpi {
    border-radius: 999px;
    border: 1px solid rgba(102, 126, 234, 0.22);
    background: rgba(102, 126, 234, 0.08);
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.84rem;
    line-height: 1.15;
    font-weight: 750;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.rm18n-kpi svg {
    width: 14px;
    height: 14px;
    color: rgba(102, 126, 234, 0.90);
}

.rm18n-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.30);
}

.rm18n-kpi-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.3px;
    color: #667eea;
}

.rm18n-footer {
    margin: 6px 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .rm18n,
    .rm18n-head,
    .rm18n-timeline,
    .rm18n-item,
    .rm18n-kpi {
        transition: none;
        transform: none;
    }
}

.invest-board {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
}

.invest-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.invest-section .subsection-title {
    margin-bottom: 12px;
}

.invest-section + .invest-section {
    margin-top: 70px;
}

.invest-section .trench-subtitle {
    margin-top: 0;
    margin-bottom: 18px;
    padding-left: 20px;
}

.invest-section-head {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 12px;
    display: grid;
    gap: 6px;
}

.invest-section-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.invest-section-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.35rem, 1.8vw, 1.65rem);
    font-weight: 950;
    letter-spacing: -0.8px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-card {
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at 18% 20%, rgba(130, 243, 255, 0.10), transparent 60%),
        radial-gradient(circle at 82% 26%, rgba(255, 119, 198, 0.08), transparent 62%),
        rgba(255, 255, 255, 0.018);
    box-shadow:
        0 18px 72px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease,
        box-shadow 0.55s ease;
}

.invest-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 20% 18%, rgba(130, 243, 255, 0.12), transparent 60%),
        radial-gradient(circle at 84% 26%, rgba(255, 119, 198, 0.10), transparent 62%),
        rgba(255, 255, 255, 0.024);
    box-shadow:
        0 24px 96px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.invest-card[data-reveal],
.invest-assump[data-reveal],
.invest-tranche[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.invest-card.is-revealed,
.invest-assump.is-revealed,
.invest-tranche.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.invest-card-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.012);
}

.invest-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.80);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 850;
    font-size: 0.88rem;
    letter-spacing: -0.2px;
}

.invest-kicker-ico {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(130, 243, 255, 0.20), transparent 62%),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.86);
}

.invest-kicker-ico svg {
    width: 16px;
    height: 16px;
}

.invest-assump-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.invest-assump-grid--plain {
    padding: 0;
}

.invest-assump {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
    padding: 14px 14px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease;
}

.invest-assump:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
}

.invest-assump-ico {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 32% 28%, rgba(79, 172, 254, 0.22), transparent 62%),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.86);
}

.invest-assump-ico svg {
    width: 16px;
    height: 16px;
}

.invest-assump-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.4;
}

.invest-funding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.invest-funding {
    display: grid;
}

.invest-funding .invest-card-head {
    padding: 20px 20px 16px;
}

.invest-ask {
    display: grid;
    gap: 2px;
    text-align: right;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.14), rgba(255, 119, 198, 0.12));
}

.invest-ask-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}

.invest-ask-amt {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -0.6px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    font-variant-numeric: tabular-nums;
}

.invest-money {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
}

.invest-pct {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}

.invest-glance {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invest-glance-item {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.012);
    padding: 12px 12px;
    display: grid;
    gap: 2px;
}

.invest-glance-k {
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.invest-glance-v {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: rgba(255, 255, 255, 0.90);
}

.invest-funding-table-wrap {
    padding: 14px;
    display: grid;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.invest-funding-table-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-funding-table {
    width: 100%;
    min-width: 780px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.invest-funding-table thead th {
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.invest-funding-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: 1.45;
    vertical-align: top;
    word-break: break-word;
}

.invest-funding-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.01);
}

.invest-funding-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.015);
}

.invest-funding-table tfoot td {
    border-bottom: 0;
}

.invest-funding-total-row td {
    font-weight: 850;
    color: rgba(255, 255, 255, 0.90);
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.12), rgba(255, 119, 198, 0.10));
}

.invest-funding-table td:nth-child(3),
.invest-funding-table td:nth-child(4) {
    white-space: nowrap;
}

.invest-funding-table td:nth-child(3),
.invest-funding-table td:nth-child(4) {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.88);
}

.invest-funding-table td:nth-child(5) {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.70);
}

.invest-util-cards {
    width: 100%;
    margin-top: 18px;
    padding: 18px 18px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 10px;
}

.invest-util-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-util-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.95rem;
    line-height: 1.5;
}

.invest-util-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
}

.invest-util-card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.012);
    padding: 14px 14px;
    display: grid;
    gap: 6px;
}

.invest-util-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.invest-util-card-k {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.3px;
    color: rgba(255, 255, 255, 0.90);
}

.invest-util-card-v {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
}

.invest-util-card-meta {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
    font-weight: 600;
}

.invest-util-card-body {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.95rem;
    line-height: 1.45;
}

.invest-funding-table td:nth-child(1) {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    color: rgba(255, 255, 255, 0.90);
}

.invest-funding-table td:nth-child(3),
.invest-funding-table td:nth-child(4),
.invest-funding-table thead th:nth-child(3),
.invest-funding-table thead th:nth-child(4) {
    text-align: right;
}

.invest-tranche-grid {
    padding: 14px;
    display: grid;
    gap: 10px;
}

.invest-table-hints {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 160px 110px minmax(0, 1.2fr);
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.invest-hint {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.invest-tranche {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.015);
    border-radius: 22px;
    padding: 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease,
        box-shadow 0.55s ease;
}

.invest-tranche:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.invest-tranche:focus-visible {
    outline: 2px solid rgba(130, 243, 255, 0.65);
    outline-offset: 3px;
}

.invest-tranche-top {
    display: grid;
    gap: 2px;
}

.invest-tranche-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    font-size: 1.05rem;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-tranche-meta {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
    font-weight: 500;
}

.invest-tranche-right {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 2px;
}

.invest-tranche-amt {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    letter-spacing: -0.5px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-tranche-pct {
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.58);
}

.invest-tranche-bar {
    grid-column: 1 / -1;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.invest-tranche-barfill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(130, 243, 255, 0.72), rgba(255, 119, 198, 0.58));
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.invest-tranche.is-revealed .invest-tranche-barfill {
    width: calc(var(--pct) * 1%);
}

.invest-tranche-detail {
    grid-column: 1 / -1;
    height: 0;
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.invest-use {
    padding-top: 2px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.95rem;
    line-height: 1.45;
}

.invest-tranche-chev {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.80);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.invest-tranche-chev svg {
    width: 16px;
    height: 16px;
}

.invest-tranche[aria-expanded="true"] .invest-tranche-chev {
    transform: rotate(180deg);
}

.invest-total {
    margin: 0 14px 14px;
    padding: 16px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.14), rgba(255, 119, 198, 0.10));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.invest-total-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-total-note {
    margin-top: 4px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.62);
}

.invest-total-right {
    text-align: right;
    display: grid;
    gap: 2px;
}

.invest-total-amt {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 950;
    font-size: 1.3rem;
    letter-spacing: -0.6px;
    color: rgba(255, 255, 255, 0.95);
}

.invest-total-pct {
    font-size: 0.86rem;
    font-weight: 850;
    color: rgba(255, 255, 255, 0.70);
}

.invest-utilization {
    margin: 0 14px 14px;
    padding: 16px 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 10px;
}

.invest-utilization-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.4px;
    color: rgba(255, 255, 255, 0.92);
}

.invest-utilization-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.95rem;
    line-height: 1.5;
}

.invest-utilization-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.invest-utilization-list li {
    padding-left: 2px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.95rem;
    line-height: 1.5;
}

.invest-utilization-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.90);
}

.invest-utilization-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.invest-utilization-item {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
    padding: 12px 12px;
    display: grid;
    gap: 4px;
}

.invest-utilization-item-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.88);
}

.invest-utilization-item-text {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.92rem;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .invest-board {
        grid-template-columns: 1fr;
    }

    .invest-table-hints {
        grid-template-columns: 1fr;
    }
}

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

    .rm18n {
        gap: 14px;
    }

    .rm18n-timeline {
        gap: 16px;
    }

    .rm18n-timeline::before {
        left: 12px;
    }

    .rm18n-item {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 12px;
    }

    .rm18n-rail {
        width: 24px;
        padding-top: 12px;
    }

    .rm18n-dot {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.14);
    }

    .rm18n-cols {
        grid-template-columns: 1fr;
    }

    .invest-glance {
        grid-template-columns: 1fr;
    }

    .invest-funding-table {
        min-width: 720px;
    }

    .invest-utilization-grid {
        grid-template-columns: 1fr;
    }

    .invest-table-hints {
        display: none;
    }

    .invest-funding-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .invest-ask {
        width: 100%;
        text-align: left;
    }

    .invest-util-grid {
        grid-template-columns: 1fr;
    }
}

.roadmap-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    position: relative;
}

.roadmap-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.roadmap-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.roadmap-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.roadmap-item:hover::before {
    opacity: 1;
}

.roadmap-marker {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    line-height: 1;
}

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

.quarter-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 20px;
}

.roadmap-list {
    list-style: none;
    padding: 0;
}

.roadmap-list li {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    position: relative;
    padding-left: 18px;
    font-size: 0.95rem;
}

.roadmap-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #667eea;
    position: absolute;
    left: 0;
    top: 0.78em;
    transform: translateY(-50%);
}

/* Budget Tranches */
.trench-wrapper {
    margin-bottom: 100px;
}

.trench-subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 40px;
    margin-top: -30px;
    padding-left: 25px;
    /* Visual alignment with border-left of title */
    font-size: 0.95rem;
}

.tranche-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

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

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

.tranche-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease;
}

.tranche-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.04);
}

/* Tranche Colors */
.tranche-card[data-tranche="1"] {
    border-top: 3px solid #667eea;
}

/* Blue */
.tranche-card[data-tranche="2"] {
    border-top: 3px solid #4ecdc4;
}

/* Teal */
.tranche-card[data-tranche="3"] {
    border-top: 3px solid #f093fb;
}

/* Purple/Pink */
.tranche-card[data-tranche="4"] {
    border-top: 3px solid #ff6b6b;
}

/* Red/Orange */

.tranche-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tranche-badge {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.tranche-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.tranche-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-top: 5px;
}

.tranche-category {
    margin-bottom: 20px;
}

.tranche-category h5 {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 600;
}

.tranche-category ul {
    list-style: none;
    padding: 0;
}

.tranche-category ul li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

.tranche-outcome {
    margin-top: 20px;
    padding: 15px;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 10px;
    color: #4ecdc4;
    font-size: 0.9rem;
    font-weight: 500;
}

.tranche-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}


/* Funding Card */
.funding-wrapper {
    display: flex;
    justify-content: center;
}

.funding-card {
    width: 100%;
    max-width: 800px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.funding-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 60%);
    animation: rotate 20s linear infinite;
    z-index: 0;
}

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

    to {
        transform: rotate(360deg);
    }
}

.funding-header,
.funding-details {
    position: relative;
    z-index: 1;
    width: 100%;
}

.funding-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #667eea;
}

.funding-header h3 {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 10px;
}

.funding-header p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 30px;
}

.funding-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.funding-amount span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    vertical-align: middle;
    margin-right: 10px;
}

.funding-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.breakdown-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.breakdown-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .projection-header {
        text-align: left;
    }

    .subsection-title {
        font-size: 1.5rem;
    }

    .roadmap-timeline {
        grid-template-columns: 1fr;
    }

    .funding-amount {
        font-size: 2rem;
    }
}

/* =========================================
   i-Hub Expectations Section
   ========================================= */
.ihub-expectations-section {
    position: relative;
    padding: clamp(60px, 8vh, 100px) 20px;
    background: linear-gradient(180deg, #0a0a0a 0%, #111116 100%);
    overflow: hidden;
}

/* Background gradient accent */
.ihub-expectations-section::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.ihub-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ihub-header {
    text-align: center;
    margin-bottom: clamp(50px, 7vh, 70px);
}

.ihub-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    margin-bottom: 16px;
    color: #ffffff;
    line-height: 1.2;
}

.ihub-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid Layout */
.expectations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}

/* Special styling for the 5th card to center it if needed or span full width */
.card-5 {
    grid-column: span 1;
}

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

    .card-5 {
        grid-column: 1 / -1;
        /* Span full width on last row */
        max-width: 800px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .card-5 .expectation-description {
        max-width: 600px;
        margin: 10px auto 0;
    }
}

/* Expectation Card */
.expectation-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    height: 100%;
}

.expectation-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.expectation-number {
    position: absolute;
    top: 24px;
    right: 24px;
    opacity: 0.1;
    font-size: 4rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1;
    transition: all 0.4s ease;
}

.expectation-card:hover .expectation-number {
    opacity: 0.2;
    transform: scale(1.1);
    color: #818cf8;
}

.expectation-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5b4fc;
    margin-bottom: 8px;
    transition: transform 0.4s ease;
}

.expectation-icon i {
    width: 28px;
    height: 28px;
}

.expectation-card:hover .expectation-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));
    color: #ffffff;
}

.expectation-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Syne', sans-serif;
}

.expectation-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* Glow Effect */
.expectation-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.expectation-card:hover .expectation-glow {
    opacity: 1;
}

/* Impact Statement */
.ihub-impact-statement {
    margin-top: 40px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.05));
    border-radius: 24px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ihub-impact-statement::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    animation: rotate 20s linear infinite;
    z-index: 0;
}

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

    to {
        transform: rotate(360deg);
    }
}

.impact-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.impact-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.impact-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    line-height: 1.3;
    background: linear-gradient(90deg, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 900px;
}

.impact-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .expectations-grid {
        grid-template-columns: 1fr;
    }

    .card-5 {
        grid-column: span 1;
    }
}