/* ------------------------------
   Hero
------------------------------ */

.hero {
    background: linear-gradient(180deg, #ffffff 0%, #f5faf0 70%);
    min-height: auto;
    display: flex;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--nav-height-desktop));
    padding-top: calc(var(--nav-height-desktop) + clamp(0.5rem, 1.5vw, 1rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.9fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.hero__visual {
    justify-self: end;
    margin-right: 0;
    margin-bottom: 0;
    transform: translateY(0);
    animation: heroFlyInBottom 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    opacity: 0;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: clamp(480px, 63vw, 720px);
    justify-content: center;
    padding-right: clamp(1rem, 3vw, 2rem);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.hero__content .eyebrow {
    animation: heroFlyInBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
    opacity: 0;
}

.hero__headline {
    font-size: clamp(2.65rem, 4.6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
    min-height: clamp(3.8rem, 6vw, 6.6rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    overflow: hidden;
    animation: heroFlyInBottom 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    opacity: 0;
}

.hero__dynamic-text {
    color: var(--color-accent-strong);
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    padding-inline: 0.15em 0.25em;
    margin-left: 0.12em;
    border-radius: 0.4em;
    background: linear-gradient(90deg, rgba(141, 198, 63, 0.12) 0%, rgba(141, 198, 63, 0.08) 30%, transparent 100%);
    min-height: 1.2em;
    white-space: nowrap;
    min-width: clamp(13ch, 18vw, 20ch);
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(20ch, 100%);
    box-sizing: border-box;
}

.hero__dynamic-text::after {
    content: '';
    display: inline-block;
    width: 0.08em;
    height: 0.9em;
    margin-left: 0.16em;
    border-radius: 1px;
    background: currentColor;
    animation: heroCursor 1s steps(2, start) infinite;
}

.hero__lead {
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 46ch;
    animation: heroFlyInBottom 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
}

.hero__subnote {
    font-size: 0.92rem;
    color: rgba(61, 76, 69, 0.85);
    margin: 0.35rem 0 0;
    max-width: 48ch;
    animation: heroFlyInBottom 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
    opacity: 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    animation: heroFlyInBottom 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    opacity: 0;
}

.cta-button,
.floating-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-standard), box-shadow var(--transition-standard), filter var(--transition-standard);
}

.cta-button:hover,
.cta-button:focus-visible,
.floating-button:hover,
.floating-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.02);
}

.hero__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: heroFlyInBottom 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
    opacity: 0;
}

.hero__metrics .hero__metric {
    animation: heroFlyInBottom 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.hero__metrics .hero__metric:nth-child(1) {
    animation-delay: 0.9s;
}

.hero__metrics .hero__metric:nth-child(2) {
    animation-delay: 1.05s;
}

.hero__metrics .hero__metric:nth-child(3) {
    animation-delay: 1.2s;
}

.hero__metric {
    padding: 1.2rem 1.35rem;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.hero__metric dt {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.hero__metric dd {
    margin: 0.4rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.hero__visual {
    display: grid;
    gap: 1.5rem;
    position: relative;
    justify-items: center;
}

.hero__visual-display {
    position: relative;
    width: clamp(300px, 38vw, 520px);
    max-width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(141, 198, 63, 0.12) 0%, rgba(255, 255, 255, 0.92) 60%, #ffffff 100%);
    box-shadow: none;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1.4rem;
    margin-left: auto;
}

.hero__visual-display::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(140% 140% at 0% 0%, rgba(141, 198, 63, 0.18) 0%, transparent 65%);
    pointer-events: none;
}

.hero__visual-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(141, 198, 63, 0.14);
    color: var(--color-accent-strong);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
}

.hero__timestamp {
    font-variant-numeric: tabular-nums;
}

.hero__visual-map {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    margin-block: 1.2rem;
    border-radius: 18px;
    border: 1px solid rgba(141, 198, 63, 0.18);
    padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(2rem, 4.5vw, 3rem);
    background: linear-gradient(160deg, rgba(141, 198, 63, 0.08), rgba(107, 160, 47, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.hero__orb {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), rgba(141, 198, 63, 0.3) 62%, rgba(107, 160, 47, 0.12));
    box-shadow: 0 0 38px rgba(107, 160, 47, 0.32);
    animation: heroOrb 8s ease-in-out infinite;
}

.hero__orb--east { top: 18%; right: 18%; animation-delay: 0s; }
.hero__orb--central { top: 42%; left: 50%; transform: translateX(-50%); animation-delay: 1.6s; }
.hero__orb--west { bottom: 16%; left: 18%; animation-delay: 3.2s; }

.hero__map-logo {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    width: 100%;
    justify-content: center;
}

.hero__map-logo-image {
    width: clamp(100px, 15vw, 140px);
    height: clamp(100px, 15vw, 140px);
    display: block;
    flex-shrink: 0;
    animation: heroMapLogoPulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(141, 198, 63, 0.5));
}

.hero__map-logo-text {
    font-family: 'newwake demo', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: normal;
    color: #8dc63f;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: lowercase;
    animation: heroMapLogoGlow 3s ease-in-out infinite;
}

@keyframes heroMapLogoPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.08) rotate(2deg);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.05) rotate(-1deg);
        opacity: 0.9;
    }
    75% {
        transform: scale(1.08) rotate(1deg);
        opacity: 0.95;
    }
}

@keyframes heroMapLogoGlow {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(141, 198, 63, 0.5);
    }
    50% {
        opacity: 0.85;
        text-shadow: 0 0 12px rgba(141, 198, 63, 0.7), 0 0 20px rgba(141, 198, 63, 0.3);
    }
}

.hero__visual-kpis {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.85rem;
}

.hero__visual-glow {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 210deg, rgba(141, 198, 63, 0.05), rgba(247, 183, 51, 0.18), rgba(141, 198, 63, 0.08));
    filter: blur(52px);
    animation: heroGlow 10s ease-in-out infinite;
}

.hero__visual-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(76, 102, 84, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 102, 84, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

.hero__visual-pulse {
    position: absolute;
    inset: 14% 20%;
    border-radius: 32px;
    border: 1px solid rgba(141, 198, 63, 0.25);
    backdrop-filter: blur(4px);
    animation: heroPulse 4.5s ease-in-out infinite;
}

.hero__visual-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    color: var(--color-text);
    width: 100%;
}

.hero__visual-readout--primary {
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.hero__visual-readout--primary > div {
    min-width: 0;
    flex: 1 1 auto;
}

.hero__visual-readout--secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.85rem;
}

.hero__visual-readout--secondary > div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.hero__visual-readout--secondary .hero__readout-value {
    font-size: 0.95rem;
}

.hero__readout-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.hero__readout-value {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-accent-strong);
    position: relative;
    transition: color 0.35s ease, transform 0.35s ease;
}

.hero__readout-value.is-updating {
    color: #6ba02f !important;
    transform: translateY(-1px);
}

.hero__readout-value.is-updating::after {
    content: '';
    position: absolute;
    inset: -0.3rem -0.45rem;
    border-radius: 0.9rem;
    background: linear-gradient(120deg, rgba(141, 198, 63, 0.18), rgba(107, 160, 47, 0.12));
    opacity: 0;
    animation: heroValuePulse 0.8s ease forwards;
}

.hero__readout-value--positive {
    color: var(--color-positive);
}

.hero__readout-value--alert {
    color: #ef7b3a;
}

.hero__visual-stream {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    border-radius: 14px;
    background: rgba(12, 38, 24, 0.82);
    color: rgba(242, 255, 247, 0.92);
    font-size: 0.8rem;
    line-height: 1.4;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__visual-stream::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 58, 35, 0.55) 0%, rgba(12, 38, 24, 0.92) 65%);
    pointer-events: none;
}

.hero__visual-stream > * {
    position: relative;
    z-index: 1;
}

.hero__stream-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0.92;
}

.hero__stream-item:first-child {
    border-top: none;
}

.hero__stream-item.is-entering {
    animation: heroStreamEnter 0.6s ease forwards;
}

.hero__stream-label {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero__stream-value {
    color: rgba(199, 236, 212, 0.9);
    font-weight: 500;
    text-align: right;
    transition: color 0.3s ease;
}

.hero__stream-value--alert {
    color: #f4a340;
}

.hero__stream-value--positive {
    color: #2fce83;
}

.hero__stream-value--neutral {
    color: rgba(199, 236, 212, 0.75);
}

.hero__visual-chart {
    position: absolute;
    bottom: 1.35rem;
    right: 1.35rem;
    width: 96px;
    height: 60px;
    border-radius: 16px;
    background: rgba(141, 198, 63, 0.12);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.7rem;
    box-shadow: inset 0 0 0 1px rgba(141, 198, 63, 0.12);
}

.hero__visual-chart span {
    display: inline-flex;
    width: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    height: var(--bar-height);
    animation: heroBar var(--bar-duration, 2.8s) ease-in-out infinite;
    animation-delay: var(--bar-delay);
    transform-origin: bottom;
}

@media (max-height: 860px) {
    .hero {
        padding-top: calc(var(--nav-height-desktop) + clamp(0.4rem, 2vh, 0.8rem));
        padding-bottom: clamp(2rem, 4vw, 3.5rem);
    }

    .hero__inner {
        gap: clamp(2rem, 4vw, 3rem);
        grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.85fr);
    }

    .hero__visual {
        margin-right: 0;
        margin-bottom: 0;
        transform: translateY(0);
    }

    .hero__visual-display {
        width: clamp(280px, 38vw, 480px);
    }

    .hero__visual-map {
        padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
    }

    .hero__map-logo {
        flex-direction: column;
        gap: 0.4rem;
    }

    .hero__map-logo-image {
        width: clamp(70px, 12vw, 110px);
        height: clamp(70px, 12vw, 110px);
    }

    .hero__map-logo-text {
        font-size: clamp(1.3rem, 3vw, 2rem);
    }

    .hero__map-logo-image {
        width: clamp(40px, 7vw, 56px);
        height: clamp(40px, 7vw, 56px);
    }

    .hero__map-logo-text {
        font-size: clamp(0.75rem, 2vw, 1rem);
    }

    .hero__metrics {
        display: none;
    }
}

@media (max-height: 720px) {
    .hero__headline {
        font-size: clamp(2.1rem, 3.8vw, 2.9rem);
        min-height: clamp(3.1rem, 5.4vw, 5.6rem);
    }

    .hero__visual-display {
        width: clamp(260px, 35vw, 420px);
    }

    .hero__visual-readout {
        padding: 0.38rem 0.65rem;
    }

    .hero__visual {
        transform: translateY(0);
        margin-bottom: 0;
    }

    .hero__inner {
        gap: clamp(1.5rem, 3.5vw, 2.5rem);
    }
}

@media (max-height: 640px) {
    .hero {
        padding-top: calc(var(--nav-height-desktop) + clamp(0.3rem, 2vh, 0.6rem));
        padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    .hero__inner {
        gap: clamp(1.5rem, 3vw, 2rem);
    }
}

/* Tablet and smaller desktop */
@media (max-width: 1200px) and (min-width: 769px) {
    .hero__inner {
        gap: clamp(2rem, 4vw, 3rem);
        grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    }

    .hero__visual-display {
        width: clamp(280px, 36vw, 460px);
    }

    .hero__content {
        padding-right: clamp(1rem, 2.5vw, 1.5rem);
    }
}

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(2.5rem, 5vw, 3.5rem);
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__visual {
        margin-right: 0;
        margin-bottom: 0;
        transform: translateY(0);
        justify-self: center;
        max-width: 100%;
        overflow: hidden;
    }

    .hero__visual-display {
        width: clamp(280px, 65vw, 500px);
        max-width: 100%;
        overflow: hidden;
    }

    .hero__visual-stream {
        font-size: 0.78rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero {
        min-height: calc((var(--vh, 1vh) * 100) - var(--nav-height-desktop, 84px));
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__content {
        padding-right: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero__headline,
    .hero__lead,
    .hero__subnote {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}


/* Tablet portrait */
@media (max-width: 768px) and (min-width: 641px) {
    .hero__inner {
        gap: clamp(2rem, 4vw, 3rem);
    }

    .hero__visual-display {
        width: clamp(300px, 70vw, 450px);
    }

    .hero__headline {
        font-size: clamp(2.2rem, 4.2vw, 2.8rem);
    }
}

@media (max-width: 640px) {
    .hero {
        margin-top: calc(-1 * var(--nav-height-mobile));
        padding-top: calc(var(--nav-height-mobile) + clamp(0.5rem, 3vw, 1rem));
        padding-bottom: clamp(2.5rem, 5vw, 4rem);
        min-height: auto;
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__inner {
        gap: clamp(2rem, 5vw, 3rem);
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__visual-display {
        width: min(90vw, 400px);
        padding: 1.1rem;
        max-width: 100%;
        overflow: hidden;
    }

    .hero__stream-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero__headline {
        font-size: clamp(2rem, 6vw, 2.6rem);
        line-height: 1.1;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        overflow: hidden;
    }

    .hero__lead {
        font-size: clamp(1rem, 3.5vw, 1.15rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .hero__subnote {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .hero__content {
        gap: clamp(1rem, 3vw, 1.5rem);
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__visual {
        margin-top: clamp(1rem, 3vw, 2rem);
        max-width: 100%;
        overflow: hidden;
    }

    .hero__visual-readout--secondary {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero__visual-readout--primary {
        flex-direction: column;
        gap: 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero__readout-label,
    .hero__readout-value,
    .hero__stream-label,
    .hero__stream-value {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .hero__dynamic-text {
        min-width: clamp(10ch, 25vw, 18ch);
        max-width: min(18ch, 100%);
        font-size: 0.9em;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero__visual-stream {
        overflow: visible;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero__visual-map {
        overflow: hidden;
        max-width: 100%;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .hero {
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__inner {
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero__headline {
        font-size: clamp(1.8rem, 7vw, 2.2rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .hero__lead,
    .hero__subnote {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .hero__visual-display {
        width: min(95vw, 360px);
        padding: 0.9rem;
        max-width: 100%;
        overflow: hidden;
    }

    .hero__visual-map {
        padding: 1.2rem 1.4rem;
        overflow: hidden;
        max-width: 100%;
    }

    .hero__readout-label,
    .hero__readout-value,
    .hero__stream-label,
    .hero__stream-value {
        font-size: 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

@keyframes heroGlow {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.85;
    }
    50% {
        transform: rotate(12deg) scale(1.08);
        opacity: 1;
    }
}

@keyframes heroPulse {
    0%, 100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(141, 198, 63, 0.18);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 22px 0 rgba(141, 198, 63, 0.18);
    }
}

@keyframes heroBar {
    0%, 100% {
        transform: scaleY(0.78);
        opacity: 0.65;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes heroOrb {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.85;
    }
    50% {
        transform: translate3d(6px, -8px, 0) scale(1.08);
        opacity: 1;
    }
}

@keyframes heroValuePulse {
    0% {
        opacity: 0.85;
        transform: scale(0.9);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@keyframes heroStreamEnter {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFlyInBottom {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroCursor {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* ------------------------------
   Scroll reveal utilities
------------------------------ */

.scroll-float,
.scroll-float-image,
.scroll-float-trillion {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-float.visible,
.scroll-float-image.visible,
.scroll-float-trillion.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-float-image {
    transition-delay: 0.1s;
}

.scroll-float-trillion {
    transition-delay: 0.12s;
}

/* ------------------------------
   Big Problem
------------------------------ */

.big-problem-section {
    padding-block: clamp(5rem, 12vw, 7rem);
    background: linear-gradient(180deg, #ffffff 0%, #f5faf0 100%);
    text-align: center;
    position: relative;
    z-index: 3;
}

.big-problem-section h1 {
    font-size: clamp(3.5rem, 9vw, 7rem);
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: clamp(1rem, 4vw, 2rem);
    background: linear-gradient(120deg, var(--color-accent-strong) 0%, var(--color-accent) 45%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-subtitle {
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    color: var(--color-text-muted);
    margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
    max-width: 60ch;
}

.call-to-action-subtitle {
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    color: var(--color-text-muted);
    margin: clamp(3rem, 7vw, 4.5rem) auto clamp(2.5rem, 6vw, 3.5rem);
    max-width: 60ch;
}

.problem-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.5rem, 4vw, 2rem);
    width: min(100%, 1080px);
    margin-inline: auto;
    justify-items: center;
    align-items: center;
}

.problem-stat {
    padding: clamp(1.8rem, 4vw, 2.4rem);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.problem-stat:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.problem-stat h3 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}

.problem-stat p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* ------------------------------
   Transition spacer
------------------------------ */

.filler-section {
    height: clamp(6rem, 15vw, 12rem);
    background: linear-gradient(180deg, #f5faf0 0%, #2a3d1a 100%);
}

/* ------------------------------
   Banana animation section
------------------------------ */

.problem-section-with-banana {
    position: relative;
    background: 
        radial-gradient(circle at 30% 40%, rgba(141, 198, 63, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(107, 160, 47, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, #2a3d1a 0%, #1e2d14 30%, #243318 70%, #2a3d1a 100%);
    padding-block: clamp(5rem, 12vw, 7rem);
    overflow: hidden;
    margin-bottom: clamp(20rem, 36vw, 36rem);
}

.problem-section-with-banana::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(141, 198, 63, 0.03) 1px, rgba(141, 198, 63, 0.03) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(141, 198, 63, 0.02) 1px, rgba(141, 198, 63, 0.02) 2px);
    pointer-events: none;
    opacity: 0.4;
}

.problem-section-with-banana::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(141, 198, 63, 0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: backgroundPulse 8s ease-in-out infinite;
}

.banana-animation-container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 6vw, 4rem);
    align-items: center;
    justify-items: center;
    justify-content: center;
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(4rem, 10vh, 6rem);
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.banana-animation-container.sticky {
    position: fixed;
    top: var(--nav-height-desktop, 84px);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 6vw, 4rem);
    align-items: center;
    justify-items: center;
    justify-content: center;
    background: inherit;
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
    padding-block: clamp(2rem, 8vh, 4rem);
    max-width: min(100%, 1400px);
    margin: 0 auto;
    z-index: 1;
}

@media (max-width: 768px) {
    .banana-animation-container.sticky {
        top: var(--nav-height-mobile, 72px);
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        padding-inline: clamp(1rem, 4vw, 2rem);
        padding-block: clamp(1.5rem, 6vh, 3rem);
    }
}

@media (max-height: 700px) {
    .banana-animation-container.sticky {
        padding-block: clamp(1rem, 4vh, 2rem);
    }
}

.banana-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.banana-image-container {
    position: relative;
    width: clamp(220px, 26vw, 320px);
    max-width: 100%;
    aspect-ratio: 7 / 11;
    border-radius: 12px;
    margin: 0 auto;
    background-image: 
        /* Viewfinder corner brackets - Top-left */
        linear-gradient(to right, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        linear-gradient(to bottom, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        /* Top-right */
        linear-gradient(to left, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        linear-gradient(to bottom, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        /* Bottom-left */
        linear-gradient(to right, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        linear-gradient(to top, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        /* Bottom-right */
        linear-gradient(to left, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        linear-gradient(to top, rgba(141, 198, 63, 0.7) 0%, rgba(141, 198, 63, 0.7) 20px, transparent 20px),
        /* Main background */
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.85) 0%, rgba(30, 45, 36, 0.9) 100%),
        linear-gradient(135deg, rgba(22, 32, 24, 0.9) 0%, rgba(30, 45, 36, 0.95) 100%);
    background-size: 
        20px 3px, 3px 20px, /* Top-left */
        20px 3px, 3px 20px, /* Top-right */
        20px 3px, 3px 20px, /* Bottom-left */
        20px 3px, 3px 20px, /* Bottom-right */
        100% 100%, 100% 100%; /* Main backgrounds */
    background-position: 
        top left, top left, /* Top-left */
        top right, top right, /* Top-right */
        bottom left, bottom left, /* Bottom-left */
        bottom right, bottom right, /* Bottom-right */
        center, center; /* Main backgrounds */
    background-repeat: no-repeat;
    border: 3px solid rgba(141, 198, 63, 0.4);
    box-shadow: 
        0 0 30px rgba(141, 198, 63, 0.25),
        0 0 60px rgba(141, 198, 63, 0.15),
        inset 0 0 20px rgba(141, 198, 63, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.banana-image-container::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(141, 198, 63, 0.3);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
    background: 
        /* Grid pattern */
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(141, 198, 63, 0.1) 19px, rgba(141, 198, 63, 0.1) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(141, 198, 63, 0.1) 19px, rgba(141, 198, 63, 0.1) 20px);
    opacity: 0.7;
}

/* Scanner laser line */
.banana-image-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: 
        linear-gradient(0deg, 
            transparent 0%, 
            rgba(141, 198, 63, 0.4) 15%,
            rgba(141, 198, 63, 1) 30%,
            rgba(141, 198, 63, 1) 50%,
            rgba(141, 198, 63, 1) 70%,
            rgba(141, 198, 63, 0.4) 85%,
            transparent 100%
        );
    box-shadow: 
        0 0 15px rgba(141, 198, 63, 1),
        0 0 30px rgba(141, 198, 63, 0.8),
        0 0 50px rgba(141, 198, 63, 0.6),
        0 0 70px rgba(141, 198, 63, 0.4),
        inset 0 0 8px rgba(141, 198, 63, 1);
    animation: scanLine 2.5s linear infinite;
    pointer-events: none;
    z-index: 3;
    border-radius: 2px;
    filter: blur(0.5px);
}

.banana-image-container:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(141, 198, 63, 0.6);
    box-shadow: 
        0 0 40px rgba(141, 198, 63, 0.35),
        0 0 80px rgba(141, 198, 63, 0.2),
        inset 0 0 30px rgba(141, 198, 63, 0.15),
        inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.banana-image {
    position: absolute;
    inset: clamp(0.7rem, 2vw, 1.2rem);
    width: auto;
    height: auto;
    max-width: calc(100% - clamp(1.4rem, 3vw, 2.2rem));
    max-height: calc(100% - clamp(1.4rem, 3vw, 2.2rem));
    object-fit: contain;
    margin: auto;
    opacity: 0;
    transition: none;
}

.banana-image.active {
    opacity: 1;
}

.restart-animation-btn {
    position: absolute;
    left: 50%;
    bottom: 1.15rem;
    transform: translateX(-50%);
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.scroll-indicator {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
    width: auto;
}

.scroll-indicator.fade-out {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(10px);
    visibility: hidden;
    pointer-events: none;
}

.scroll-indicator__text {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.scroll-indicator__arrow {
    color: var(--color-accent);
    width: 24px;
    height: 24px;
    display: block;
    animation: scrollBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(141, 198, 63, 0.3));
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

.restart-animation-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.restart-animation-btn:hover,
.restart-animation-btn:focus-visible {
    transform: translateX(-50%) translateY(-1px);
}

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

.problem-text-side h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.problem-text-side p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.spoilage-indicator {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    background: rgba(30, 45, 36, 0.7);
    border: 1px solid rgba(141, 198, 63, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(141, 198, 63, 0.1);
    backdrop-filter: blur(10px);
}

.spoilage-level {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spoilage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.spoilage-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

#spoilage-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.55;
}

.progress-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(141, 198, 63, 0.25);
    overflow: hidden;
    border: 1px solid rgba(141, 198, 63, 0.35);
}

.progress-fill {
    height: 100%;
    width: 8%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    transition: width 0.25s ease;
}

@media (max-width: 960px) {
    .banana-animation-container {
        grid-template-columns: 1fr;
        text-align: center;
        padding-block: clamp(2rem, 8vh, 3.5rem);
    }

    .problem-text-side {
        order: -1;
    }

    .scroll-indicator {
        bottom: clamp(1rem, 3vh, 2rem);
    }

    .scroll-indicator__text {
        font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    }

    .scroll-indicator__arrow {
        width: 18px;
        height: 18px;
    }

    .spoilage-indicator {
        text-align: left;
    }
}

/* ------------------------------
   Core capabilities
------------------------------ */

.core-capabilities {
    background: var(--color-surface);
    padding-block: clamp(5rem, 12vw, 7rem);
    overflow-x: hidden;
    max-width: 100%;
}

.dashboard-preview {
    display: grid;
    gap: clamp(0.75rem, 2vw, 1rem);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(214, 228, 236, 0.9);
    background: linear-gradient(180deg, rgba(244, 248, 252, 0.98) 0%, rgba(233, 241, 248, 0.95) 70%, rgba(226, 237, 246, 0.93) 100%);
    padding: clamp(0.95rem, 2.5vw, 1.3rem);
    box-shadow: 0 14px 24px rgba(18, 43, 74, 0.14);
    max-width: min(100%, 1120px);
    margin: 0 auto;
    min-height: auto;
}

.dashboard-preview__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: center;
}

.dashboard-preview__header h3 {
    margin: 0.4rem 0 0;
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
}

.dashboard-preview__views {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: rgba(141, 198, 63, 0.1);
}

.dashboard-preview__view {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--transition-standard), color var(--transition-standard);
}

.dashboard-preview__view.is-active {
    background: #ffffff;
    color: var(--color-accent-strong);
    box-shadow: var(--shadow-sm);
}

.dashboard-preview__panels {
    display: grid;
    gap: clamp(0.6rem, 1.5vw, 0.9rem);
}

.dashboard-preview__panel {
    display: grid;
    gap: clamp(0.6rem, 1.5vw, 0.8rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    transition: opacity 0.3s ease;
    min-height: clamp(400px, 50vh, 500px);
}

@media (min-width: 960px) {
    .dashboard-preview__panel {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.dashboard-preview__panel--distribution {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-preview__panel:not(.is-active) {
    opacity: 0;
}

.dashboard-preview__panel[hidden] {
    display: none;
}

.dashboard-preview__map {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid rgba(107, 160, 47, 0.18);
    background: radial-gradient(140% 140% at 75% 25%, rgba(141, 198, 63, 0.2), rgba(85, 120, 38, 0.85));
    min-height: clamp(110px, 16vw, 140px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.dashboard-preview__map::before {
    content: '';
    position: absolute;
    inset: 10% 10% 18% 10%;
    background:
        radial-gradient(circle at 20% 30%, rgba(141, 198, 63, 0.35) 0, transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(247, 183, 51, 0.28) 0, transparent 60%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
    opacity: 0.55;
    pointer-events: none;
}

.dashboard-preview__map::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(220% 120% at 80% 120%, rgba(12, 38, 24, 0.45) 0%, transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.dashboard-preview__stats-grid {
    display: grid;
    gap: clamp(0.4rem, 1.1vw, 0.6rem);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.stat-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(195, 214, 229, 0.9);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(240, 246, 252, 0.96));
    padding: 0.5rem 0.55rem;
    color: #1c2c3a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 9px 14px rgba(29, 65, 102, 0.08);
    display: grid;
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(120% 80% at 50% 0%, rgba(120, 182, 255, 0.32), transparent 66%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.stat-card.is-updating::after {
    opacity: 1;
}

.stat-card__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(53, 84, 117, 0.72);
}

.stat-card__value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #0b2742;
}

.stat-card__progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.stat-card__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(62, 154, 227, 0.95), rgba(24, 120, 200, 0.9));
    width: var(--stat-progress, 50%);
    transition: width 0.6s ease;
}

.stat-card--alert .stat-card__progress-fill {
    background: linear-gradient(90deg, rgba(245, 156, 108, 0.95), rgba(210, 93, 68, 0.9));
}

.stat-card--positive .stat-card__progress-fill {
    background: linear-gradient(90deg, rgba(92, 207, 168, 0.95), rgba(41, 156, 128, 0.9));
}

.stat-card--positive .stat-card__value {
    color: #0c5c44;
}

.stat-card--alert .stat-card__value {
    color: #b8521b;
}

.dashboard-preview__signals {
    list-style: none;
    padding: 0;
    margin: clamp(0.4rem, 1.2vw, 0.8rem) 0 0;
    display: grid;
    gap: 0.4rem;
}

.signal {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem;
    border-radius: 12px;
    background: rgba(227, 236, 244, 0.85);
    color: rgba(28, 52, 78, 0.9);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.signal.is-active {
    opacity: 1;
    transform: translateX(4px);
}

.signal__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(44, 130, 201, 0.9);
    box-shadow: 0 0 0 6px rgba(44, 130, 201, 0.18);
}

.signal--alert .signal__dot {
    background: rgba(226, 119, 74, 0.95);
    box-shadow: 0 0 0 6px rgba(226, 119, 74, 0.2);
}

.signal--info .signal__dot {
    background: rgba(90, 143, 230, 0.9);
    box-shadow: 0 0 0 6px rgba(90, 143, 230, 0.18);
}

.signal__label {
    flex: 1;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .dashboard-distribution__top,
    .dashboard-transport__top,
    .dashboard-retail__top {
        grid-template-columns: 1fr;
        gap: clamp(0.5rem, 1.5vw, 0.8rem);
    }

    .dashboard-distribution__bottom .dashboard-preview__stats-grid,
    .dashboard-transport__bottom .dashboard-preview__stats-grid,
    .dashboard-retail__bottom .dashboard-preview__stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .dashboard-card p,
    .dashboard-card ul {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

@media (max-width: 768px) {
    .dashboard-preview {
        padding: clamp(1rem, 4vw, 1.5rem);
        overflow-x: hidden;
        max-width: 100%;
    }

    .dashboard-preview__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .dashboard-preview__header h3 {
        font-size: clamp(1.2rem, 4vw, 1.5rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .dashboard-preview__views {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .dashboard-preview__view {
        font-size: 0.85rem;
        padding: 0.35rem 0.75rem;
    }

    .dashboard-preview__panel {
        min-height: auto;
        overflow-x: hidden;
    }

    .dashboard-distribution__top,
    .dashboard-transport__top,
    .dashboard-retail__top {
        grid-template-columns: 1fr;
        gap: clamp(0.5rem, 2vw, 0.8rem);
    }

    .dashboard-distribution__left,
    .dashboard-transport__left,
    .dashboard-retail__left {
        min-width: 0;
        overflow: hidden;
    }

    .dashboard-distribution__right,
    .dashboard-transport__right,
    .dashboard-retail__right {
        min-width: 0;
        overflow: hidden;
    }

    .dashboard-card {
        padding: clamp(0.5rem, 2vw, 0.7rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        overflow: hidden;
    }

    .dashboard-card header {
        flex-wrap: wrap;
        gap: 0.3rem;
        font-size: 0.75rem;
        min-width: 0;
    }

    .dashboard-card header span:last-child {
        flex-shrink: 1;
        text-align: right;
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-card__label,
    .dashboard-card__trend {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-card__trend {
        font-size: 0.7rem;
    }

    .dashboard-card p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .dashboard-card ul {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.85rem;
    }

    .dashboard-log li {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .signal {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }

    .signal__label {
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .stat-card {
        padding: 0.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .stat-card__label {
        font-size: 0.6rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .stat-card__value {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .dashboard-preview__stats-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.4rem, 1.5vw, 0.6rem);
    }

    .pricing-list li {
        grid-template-columns: minmax(0, 1fr);
        justify-items: flex-start;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pricing-list__price {
        justify-self: flex-start;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .route-status__grid {
        grid-template-columns: 1fr;
        gap: clamp(0.4rem, 1.5vw, 0.6rem);
    }

    .route-card {
        padding: clamp(0.5rem, 2vw, 0.7rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    .route-card__header {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .route-number,
    .route-tier {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.85rem;
    }

    .metric-label,
    .metric-value,
    .pricing-label,
    .pricing-value {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.8rem;
    }

    .store-heatmap {
        min-height: auto;
        padding: clamp(0.5rem, 2vw, 0.8rem);
        overflow: hidden;
    }

    .store-heatmap__layout {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.3rem, 1.5vw, 0.5rem);
    }

    .store-zone {
        padding: clamp(0.3rem, 1.5vw, 0.5rem);
        min-height: 50px;
    }

    .zone-content {
        font-size: 0.7rem;
        gap: 0.15rem;
    }

    .zone-label,
    .zone-hours,
    .zone-freshness,
    .zone-action {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.65rem;
    }

    .store-heatmap__legend {
        grid-template-columns: repeat(2, 1fr);
        font-size: 0.6rem;
        gap: 0.3rem;
    }

    .monitoring-chart {
        min-height: 100px;
        padding: 0.3rem;
        overflow: hidden;
    }

    .chart-svg {
        min-height: 100px;
    }

    .delivery-insights li {
        font-size: 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
    }

    .delivery-note {
        font-size: 0.7rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .route-status-dashboard {
        min-height: auto;
        padding: clamp(0.5rem, 2vw, 0.8rem);
    }

    .status-title,
    .status-subtitle {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.75rem;
    }

    .status-subtitle {
        font-size: 0.65rem;
    }

    .heatmap-title,
    .heatmap-subtitle {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pricing-list__name,
    .pricing-list__health,
    .pricing-list__timer,
    .pricing-list__price {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .core-capabilities {
        overflow-x: hidden;
        max-width: 100%;
    }

    .capabilities-container {
        overflow-x: hidden;
        max-width: 100%;
    }

    .problem-stats-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1.5rem, 4vw, 2rem);
        max-width: 100%;
        padding-inline: clamp(1rem, 4vw, 2rem);
        width: 100%;
        margin-inline: auto;
    }

    .problem-stat {
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
        flex-shrink: 0;
    }
}

.dashboard-preview__routes {
    position: absolute;
    inset: 12% 18%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.route {
    flex: 1 1 auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));
    margin: 0 0.4rem;
    position: relative;
    overflow: hidden;
    border-radius: 999px;
}

.route::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    animation: routePulse 2.4s linear infinite;
    opacity: 0.8;
}

.route--healthy {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(141, 198, 63, 0.8));
}

.route--warning {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(244, 163, 64, 0.9));
}

.route--alert {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(211, 68, 49, 0.95));
}

.dashboard-preview__nodes {
    position: absolute;
    inset: 22% 0 0 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 1.25rem 1.25rem;
    gap: 1.2rem;
    z-index: 3;
}

.node {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 0 0 6px rgba(25, 71, 45, 0.45), 0 18px 26px rgba(3, 12, 7, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.node--hq {
    width: 20px;
    height: 20px;
    background: #8dc63f;
    box-shadow: 0 0 0 8px rgba(141, 198, 63, 0.35), 0 24px 38px rgba(2, 18, 10, 0.5);
}

.node--healthy {
    background: rgba(141, 198, 63, 0.72);
    box-shadow: 0 0 0 7px rgba(141, 198, 63, 0.28), 0 22px 32px rgba(3, 18, 11, 0.45);
}

.node--warning {
    background: rgba(244, 163, 64, 0.82);
    box-shadow: 0 0 0 7px rgba(244, 163, 64, 0.28), 0 22px 32px rgba(40, 23, 6, 0.45);
}

.node--offline {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 6px rgba(16, 38, 27, 0.28), 0 16px 24px rgba(3, 9, 6, 0.35);
    transform: translateY(3px);
}

.dashboard-preview__cards {
    display: grid;
    gap: clamp(1rem, 3vw, 1.35rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-distribution {
    display: grid;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    grid-column: 1 / -1;
}

.dashboard-distribution__top {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(0.4rem, 1vw, 0.6rem);
    align-items: start;
}

.dashboard-distribution__left {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    min-width: 0;
}

.dashboard-distribution__right {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-distribution__mapblock {
    display: grid;
    gap: 0.75rem;
}

.dashboard-preview__map--distribution {
    min-height: clamp(180px, 24vw, 260px);
}

.distribution-map__overlay {
    margin-top: 1.2rem;
    display: grid;
    gap: 0.9rem;
    pointer-events: auto;
}

.distribution-map__beacons {
    position: absolute;
    inset: 1.4rem;
    pointer-events: none;
    z-index: 3;
}

.distribution-map__background {
    position: absolute;
    inset: 0.6rem;
    width: calc(100% - 1.2rem);
    height: calc(100% - 1.2rem);
    object-fit: contain;
    opacity: 0;
    filter: saturate(0.9) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.35));
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.distribution-map__background.is-loaded {
    opacity: 0.92;
}

.distribution-map__background.is-fallback {
    opacity: 0.65;
}

.map-region {
    position: absolute;
    display: grid;
    gap: 0.15rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(12, 38, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(4, 15, 8, 0.4), inset 0 0 0 1px rgba(141, 198, 63, 0.24);
    min-width: 120px;
    text-align: left;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    z-index: 4;
}

.map-region__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(223, 242, 232, 0.7);
}

.map-region__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1fff8;
}

.map-region--midwest {
    top: 14%;
    left: 6%;
}

.map-region--south {
    bottom: 18%;
    left: 14%;
}

.map-region--northeast {
    top: 20%;
    right: 8%;
}

.map-region::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 198, 63, 0.35), transparent 65%);
    opacity: 0.6;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.map-region--caution {
    background: rgba(100, 64, 10, 0.88);
    border-color: rgba(244, 163, 64, 0.4);
}

.map-region--caution::before {
    background: radial-gradient(circle, rgba(244, 163, 64, 0.35), transparent 70%);
}

.map-region--alert {
    background: rgba(120, 33, 22, 0.88);
    border-color: rgba(239, 123, 58, 0.5);
}

.map-region--alert::before {
    background: radial-gradient(circle, rgba(239, 123, 58, 0.45), transparent 70%);
    opacity: 0.85;
}

.distribution-map__center {
    display: grid;
    gap: 0.2rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    background: rgba(8, 22, 14, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(141, 198, 63, 0.18);
    min-width: clamp(140px, 22vw, 200px);
    backdrop-filter: blur(6px);
    position: relative;
}

.center__name {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(205, 236, 217, 0.82);
}

.center__metric {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e8fff3;
}

.center__price {
    font-size: 0.85rem;
    color: rgba(160, 222, 188, 0.86);
}

.center__price--alert {
    color: #f4a340;
}

.distribution-map__legend {
    display: grid;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: rgba(188, 212, 247, 0.7);
}

.dashboard-distribution__bottom {
    display: grid;
    margin-top: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-distribution__bottom .dashboard-preview__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-card--pricing {
    padding: clamp(0.5rem, 1.3vw, 0.7rem);
    background: rgba(14, 31, 55, 0.9);
    border: 1px solid rgba(103, 148, 208, 0.3);
}

.pricing-list {
    list-style: none;
    margin: clamp(0.6rem, 2vw, 0.8rem) 0 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.pricing-list li {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(207, 221, 235, 0.8);
    background: rgba(255, 255, 255, 0.9);
}

.pricing-list__name {
    font-weight: 600;
    color: var(--color-text);
}

.pricing-list__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.pricing-list__freshness {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(60, 84, 114, 0.85);
}

.pricing-list__health {
    font-size: 0.82rem;
    color: rgba(45, 133, 92, 0.9);
    font-weight: 600;
}

.pricing-list__health.pricing-list__health--alert {
    color: #b0442d;
}

.pricing-list__timer {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(83, 102, 125, 0.9);
}

.pricing-list__action {
    font-size: 0.78rem;
    color: rgba(94, 115, 144, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.pricing-list__price {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-strong);
    font-weight: 600;
}

.pricing-list__price--alert {
    color: #f97316;
}

.pricing-progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(9, 128, 86, 0.12);
    overflow: hidden;
}

.pricing-progress__fill {
    position: absolute;
    inset: 0;
    width: var(--progress, 60%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(41, 156, 128, 0.95), rgba(73, 198, 164, 0.9));
    transition: width 0.4s ease;
}

.pricing-progress__fill--alert {
    background: linear-gradient(90deg, rgba(226, 119, 74, 0.95), rgba(189, 57, 34, 0.9));
}

.pricing-list__note {
    margin: clamp(0.6rem, 2vw, 0.8rem) 0 0;
    font-size: 0.78rem;
    color: rgba(82, 104, 134, 0.72);
}


.dashboard-card--stream {
    min-height: 80px;
}

.delivery-insights {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.delivery-insights li {
    font-size: 0.8rem;
    color: var(--dashboard-text);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-left: 3px solid var(--dashboard-accent);
}

.delivery-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(53, 84, 117, 0.8);
    line-height: 1.4;
    font-style: italic;
}

.dashboard-card--stream .dashboard-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: rgba(252, 255, 253, 0.92);
}

.dashboard-card--stream .dashboard-log li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem;
    border-radius: 10px;
    background: rgba(12, 38, 24, 0.86);
    border: 1px solid rgba(141, 198, 63, 0.15);
    box-shadow: inset 0 0 0 1px rgba(141, 198, 63, 0.12);
}

.dashboard-card--stream .dashboard-log li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    background: linear-gradient(180deg, rgba(141, 198, 63, 0.95), rgba(24, 90, 55, 0.85));
    box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.22);
}

.dashboard-card--summary {
    margin-top: clamp(0.2rem, 1vw, 0.6rem);
}

.dashboard-card {
    padding: clamp(0.55rem, 1.5vw, 0.7rem);
    border-radius: var(--radius-md);
    border: 1px solid rgba(103, 148, 208, 0.22);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(163, 213, 255, 0.08);
    display: grid;
    gap: 0.3rem;
    color: #1e2a36;
}

.dashboard-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(82, 104, 134, 0.95);
    gap: 0.5rem;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dashboard-card__trend {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0f4c81;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
}

.dashboard-card__trend.is-up {
    color: #6ba02f;
}

.dashboard-card__trend.is-down {
    color: #d2693c;
}

.dashboard-card p {
    margin: 0;
    color: #43505c;
}

.dashboard-card ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #43505c;
    line-height: 1.55;
}

.dashboard-card header + p,
.dashboard-card header + ul {
    margin-top: 0.2rem;
}

.dashboard-card header span:last-child {
    flex-shrink: 1;
    text-align: right;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.dashboard-card header span:first-child {
    flex-wrap: wrap;
    line-height: 1.3;
}

.dashboard-card li + li {
    margin-top: 0.4rem;
}

.dashboard-transport {
    display: grid;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    grid-column: 1 / -1;
}

.dashboard-transport__top {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(0.4rem, 1vw, 0.6rem);
    align-items: start;
}

.dashboard-transport__left {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    min-width: 0;
}

.dashboard-transport__left .dashboard-preview__stats-grid {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    grid-template-columns: 1fr;
}

.dashboard-transport__right {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    align-content: start;
}

.dashboard-transport__bottom {
    display: grid;
    margin-top: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-transport__bottom .dashboard-preview__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-transport__mapblock {
    display: grid;
    gap: 0.75rem;
}

.route-status-dashboard {
    position: relative;
    min-height: clamp(180px, 24vw, 260px);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(46, 92, 180, 0.25) 50%, rgba(28, 58, 120, 0.2) 100%);
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: clamp(0.6rem, 1.5vw, 1rem);
    display: grid;
    gap: 0.5rem;
}

.route-status__header {
    display: grid;
    gap: 0.2rem;
}

.status-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(53, 84, 117, 0.9);
}

.status-subtitle {
    font-size: 0.7rem;
    color: rgba(53, 84, 117, 0.7);
}

.route-status__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.4rem, 1vw, 0.6rem);
    margin-top: 0.4rem;
}

.route-card {
    padding: clamp(0.5rem, 1.2vw, 0.7rem);
    border-radius: 8px;
    display: grid;
    gap: 0.4rem;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.route-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.route-card--premium {
    border-color: rgba(141, 198, 63, 0.4);
    background: linear-gradient(135deg, rgba(141, 198, 63, 0.15), rgba(255, 255, 255, 0.8));
}

.route-card--standard {
    border-color: rgba(255, 149, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.12), rgba(255, 255, 255, 0.8));
}

.route-card--alert {
    border-color: rgba(255, 59, 48, 0.5);
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.15), rgba(255, 255, 255, 0.8));
}

.route-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(53, 84, 117, 0.1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.route-number {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(53, 84, 117, 0.9);
}

.route-tier {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}

.route-card--premium .route-tier {
    background: rgba(141, 198, 63, 0.2);
    color: rgba(141, 198, 63, 1);
}

.route-card--standard .route-tier {
    background: rgba(255, 149, 0, 0.2);
    color: rgba(204, 85, 0, 1);
}

.route-card--alert .route-tier {
    background: rgba(255, 59, 48, 0.2);
    color: rgba(204, 0, 0, 1);
}

.route-card__metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.metric-label {
    color: rgba(53, 84, 117, 0.7);
    font-weight: 500;
}

.metric-value {
    color: rgba(53, 84, 117, 0.9);
    font-weight: 600;
}

.route-card__pricing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(53, 84, 117, 0.1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    margin-top: 0.2rem;
}

.pricing-label {
    font-size: 0.7rem;
    color: rgba(53, 84, 117, 0.7);
    font-weight: 500;
}

.pricing-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(53, 84, 117, 0.9);
}

.route-card--premium .pricing-value {
    color: rgba(141, 198, 63, 1);
}

.route-timeline {
    position: relative;
    min-height: clamp(180px, 24vw, 260px);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(46, 92, 180, 0.25) 50%, rgba(28, 58, 120, 0.2) 100%);
    border: 1px solid rgba(74, 144, 226, 0.2);
    padding: clamp(0.6rem, 1.5vw, 1rem);
    display: grid;
    gap: 0.5rem;
}

.route-timeline__header {
    display: grid;
    gap: 0.2rem;
}

.timeline-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(53, 84, 117, 0.9);
}

.timeline-subtitle {
    font-size: 0.7rem;
    color: rgba(53, 84, 117, 0.7);
}

.route-timeline__chart {
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-svg {
    width: 100%;
    height: 100%;
    min-height: 140px;
}

.route-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3s ease-in-out infinite;
}

.route-line--healthy {
    animation-delay: 0s;
}

.route-line--warning {
    animation-delay: -1s;
}

.route-line--alert {
    animation-delay: -2s;
}

.route-area {
    opacity: 0;
    animation: fadeInArea 2s ease-in-out infinite;
}

.route-area--healthy {
    animation-delay: 0.5s;
}

.route-area--warning {
    animation-delay: 1.5s;
}

.route-area--alert {
    animation-delay: 2.5s;
}

.route-dot {
    animation: pulseDot 2s ease-in-out infinite;
}

.route-dot--1 {
    animation-delay: 0s;
}

.route-dot--2 {
    animation-delay: -0.67s;
}

.route-dot--3 {
    animation-delay: -1.33s;
}

.route-labels {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(74, 144, 226, 0.2);
}

.route-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(53, 84, 117, 0.8);
}

.label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.route-label--healthy .label-dot {
    background: rgba(141, 198, 63, 1);
    box-shadow: 0 0 8px rgba(141, 198, 63, 0.6);
}

.route-label--warning .label-dot {
    background: rgba(255, 149, 0, 1);
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.6);
}

.route-label--alert .label-dot {
    background: rgba(255, 59, 48, 1);
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.6);
}

.transport-map__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.map-outline {
    animation: mapGlow 4s ease-in-out infinite;
}

.route-path {
    stroke-dasharray: 8,4;
    animation: routeFlow 3s linear infinite;
    filter: drop-shadow(0 0 3px currentColor);
}

.route-path--1 { animation-delay: 0s; }
.route-path--2 { animation-delay: -0.6s; }
.route-path--3 { animation-delay: -1.2s; }
.route-path--4 { animation-delay: -1.8s; }
.route-path--5 { animation-delay: -2.4s; }

.route-line--1 { animation-delay: 0s; }
.route-line--2 { animation-delay: -0.6s; }
.route-line--3 { animation-delay: -1.2s; }
.route-line--4 { animation-delay: -1.8s; }
.route-line--5 { animation-delay: -2.4s; }

.transport-map__background {
    position: absolute;
    inset: 0.6rem;
    width: calc(100% - 1.2rem);
    height: calc(100% - 1.2rem);
    object-fit: contain;
    opacity: 0.75;
    filter: saturate(0.9);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.transport-map__background.is-loaded {
    opacity: 0.85;
}

.transport-fleet {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.fleet-vehicle {
    position: absolute;
    animation: vehicleMove 20s linear infinite;
}

.fleet-vehicle--1 {
    top: 25%;
    left: 15%;
    animation-delay: 0s;
}

.fleet-vehicle--2 {
    top: 45%;
    left: 35%;
    animation-delay: -4s;
}

.fleet-vehicle--3 {
    top: 60%;
    left: 20%;
    animation-delay: -8s;
}

.fleet-vehicle--4 {
    top: 35%;
    left: 55%;
    animation-delay: -12s;
}

.fleet-vehicle--5 {
    top: 70%;
    left: 45%;
    animation-delay: -16s;
}

.vehicle-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px currentColor;
    animation: vehiclePulse 2s ease-in-out infinite;
}

.vehicle-marker--healthy {
    background: var(--dashboard-positive);
    color: var(--dashboard-positive);
}

.vehicle-marker--warning {
    background: var(--dashboard-warning);
    color: var(--dashboard-warning);
}

.vehicle-marker--alert {
    background: var(--dashboard-alert);
    color: var(--dashboard-alert);
    animation-duration: 1s;
}

.vehicle-info {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background: rgba(12, 38, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: grid;
    gap: 0.15rem;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fleet-vehicle:hover .vehicle-info {
    opacity: 1;
}

.vehicle-label {
    font-weight: 600;
    color: #f1fff8;
}

.vehicle-status {
    font-size: 0.65rem;
    color: rgba(223, 242, 232, 0.8);
}

.transport-routes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.transport-route {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(141, 198, 63, 0.4), transparent);
    animation: routePulse 3s ease-in-out infinite;
}

.transport-route--1 {
    top: 25%;
    left: 15%;
    width: 20%;
    transform: rotate(25deg);
}

.transport-route--2 {
    top: 45%;
    left: 35%;
    width: 18%;
    transform: rotate(-15deg);
}

.transport-route--3 {
    top: 60%;
    left: 20%;
    width: 22%;
    transform: rotate(35deg);
}

.transport-route--4 {
    top: 35%;
    left: 55%;
    width: 16%;
    transform: rotate(-25deg);
}

.transport-route--5 {
    top: 70%;
    left: 45%;
    width: 19%;
    transform: rotate(10deg);
}

.transport-map__legend {
    display: grid;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: rgba(188, 212, 247, 0.7);
}

.dashboard-retail {
    display: grid;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    grid-column: 1 / -1;
}

.dashboard-retail__top {
    display: grid;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(0.4rem, 1vw, 0.6rem);
    align-items: start;
}

.dashboard-retail__left {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    min-width: 0;
}

.dashboard-retail__left .dashboard-preview__stats-grid {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    grid-template-columns: 1fr;
}

.dashboard-retail__right {
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    align-content: start;
}

.dashboard-retail__bottom {
    display: grid;
    margin-top: clamp(0.3rem, 0.8vw, 0.5rem);
}

.dashboard-retail__bottom .dashboard-preview__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.transport-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.transport-alerts li {
    display: grid;
    gap: 0.4rem;
    padding: 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--dashboard-border);
}

.alert-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
}

.alert-status--warning {
    background: rgba(255, 149, 0, 0.15);
    color: var(--dashboard-warning);
}

.alert-status--alert {
    background: rgba(255, 59, 48, 0.15);
    color: var(--dashboard-alert);
}

.alert-status--positive {
    background: rgba(141, 198, 63, 0.15);
    color: var(--dashboard-positive);
}

.alert-message {
    font-size: 0.85rem;
    color: var(--dashboard-text);
    line-height: 1.4;
}

@keyframes vehicleMove {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(15px, -10px);
    }
    50% {
        transform: translate(30px, 5px);
    }
    75% {
        transform: translate(15px, 15px);
    }
}

@keyframes vehiclePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

@keyframes routePulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes mapGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

@keyframes routeFlow {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 12;
        opacity: 0.6;
    }
}

@keyframes drawLine {
    0% {
        stroke-dashoffset: 1000;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -1000;
    }
}

@keyframes fadeInArea {
    0%, 40% {
        opacity: 0;
    }
    50%, 90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulseDot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

@keyframes drawChartLine {
    0% {
        stroke-dashoffset: 1000;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInChartArea {
    0%, 30% {
        opacity: 0;
    }
    50%, 100% {
        opacity: 0.5;
    }
}

@keyframes fadeInPoint {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulsePoint {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes fadeInValue {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-preview__telemetry {
    display: grid;
    gap: 0.5rem;
    width: min(80%, 260px);
    padding: 1rem;
    border-radius: 16px;
    background: rgba(8, 22, 14, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.telemetry-label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(212, 232, 220, 0.7);
}

.telemetry-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: #e6fff0;
}

.telemetry-value--alert {
    color: #f4a340;
}

.dashboard-preview__map--retail {
    display: grid;
    place-items: center;
    padding: 1.4rem;
    background: linear-gradient(140deg, rgba(236, 245, 255, 0.95), rgba(213, 229, 245, 0.9));
    border: 1px solid rgba(181, 202, 222, 0.8);
}

.store-heatmap {
    width: 100%;
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    padding: clamp(0.5rem, 1.2vw, 0.8rem);
    background: linear-gradient(140deg, rgba(236, 245, 255, 0.95), rgba(213, 229, 245, 0.9));
    border: 1px solid rgba(181, 202, 222, 0.8);
    border-radius: var(--radius-md);
    min-height: clamp(180px, 24vw, 260px);
    visibility: visible;
    opacity: 1;
}

.store-heatmap__header {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
}

.heatmap-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(53, 84, 117, 0.9);
}

.heatmap-subtitle {
    font-size: 0.7rem;
    color: rgba(53, 84, 117, 0.7);
}

.store-heatmap__layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    flex: 1;
}

.store-zone {
    position: relative;
    padding: clamp(0.4rem, 1vw, 0.6rem);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 60px;
}

.store-zone:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.zone-content {
    display: grid;
    gap: 0.2rem;
    text-align: center;
    width: 100%;
}

.store-zone--optimal {
        background: linear-gradient(135deg, rgba(141, 198, 63, 0.25), rgba(107, 160, 47, 0.2));
    border-color: rgba(141, 198, 63, 0.4);
}

.store-zone--good {
    background: linear-gradient(135deg, rgba(104, 202, 255, 0.25), rgba(52, 152, 219, 0.2));
    border-color: rgba(52, 152, 219, 0.4);
}

.store-zone--warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 149, 0, 0.25));
    border-color: rgba(255, 149, 0, 0.5);
}

.store-zone--alert {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.35), rgba(255, 59, 48, 0.3));
    border-color: rgba(255, 59, 48, 0.6);
}

.zone-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(53, 84, 117, 0.9);
}

.zone-hours {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0b2d4f;
}

.zone-freshness {
    font-size: 0.65rem;
    color: rgba(53, 84, 117, 0.75);
    font-weight: 500;
}

.zone-action {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(53, 84, 117, 0.65);
    margin-top: 0.1rem;
}

.store-heatmap__legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    font-size: 0.65rem;
    color: rgba(53, 84, 117, 0.7);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(181, 202, 222, 0.5);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot--optimal {
    background: rgba(141, 198, 63, 1);
    box-shadow: 0 0 6px rgba(141, 198, 63, 0.6);
}

.legend-dot--good {
    background: rgba(52, 152, 219, 1);
    box-shadow: 0 0 6px rgba(52, 152, 219, 0.6);
}

.legend-dot--warning {
    background: rgba(255, 149, 0, 1);
    box-shadow: 0 0 6px rgba(255, 149, 0, 0.6);
}

.legend-dot--alert {
    background: rgba(255, 59, 48, 1);
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
}

.monitoring-chart {
    position: relative;
    width: 100%;
    min-height: 78px;
    margin: 0.3rem 0;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.chart-svg {
    width: 100%;
    height: 100%;
    min-height: 78px;
}

.chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawChartLine 4s ease-in-out infinite;
}

.chart-area {
    opacity: 0;
    animation: fadeInChartArea 3s ease-in-out infinite;
}

.chart-point {
    opacity: 0;
    animation: fadeInPoint 0.8s ease-in-out forwards;
}

.chart-point:nth-child(1) { animation-delay: 0.5s; }
.chart-point:nth-child(2) { animation-delay: 1s; }
.chart-point:nth-child(3) { animation-delay: 1.5s; }
.chart-point:nth-child(4) { animation-delay: 2s; }
.chart-point:nth-child(5) { animation-delay: 2.5s; }

.chart-axis-label {
    font-size: 8px;
    fill: rgba(53, 84, 117, 0.7);
    font-weight: 500;
}

.chart-value {
    font-size: 9px;
    fill: rgba(53, 84, 117, 0.9);
    font-weight: 600;
    opacity: 0;
    animation: fadeInValue 0.6s ease-in-out forwards;
}

.chart-value:nth-of-type(1) { animation-delay: 0.8s; }
.chart-value:nth-of-type(2) { animation-delay: 1.3s; }
.chart-value:nth-of-type(3) { animation-delay: 1.8s; }
.chart-value:nth-of-type(4) { animation-delay: 2.3s; }

.optimization-point {
    filter: drop-shadow(0 0 4px currentColor);
}

.optimization-label {
    font-size: 7px;
    fill: rgba(53, 84, 117, 0.9);
    font-weight: 600;
    text-anchor: middle;
    animation: fadeInOptimization 3s ease-in-out infinite;
}

.optimization-label:nth-of-type(1) {
    animation-delay: 2s;
}

.optimization-label:nth-of-type(2) {
    animation-delay: 2.5s;
}

@keyframes fadeInOptimization {
    0%, 30% {
        opacity: 0;
        transform: translateY(-3px);
    }
    40%, 80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-3px);
    }
}

@keyframes backgroundPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1) rotate(5deg);
    }
}

@keyframes scanLine {
    0% {
        top: 0;
        opacity: 0.9;
    }
    50% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 4px);
        opacity: 0.9;
    }
}

.monitoring-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(53, 84, 117, 0.8);
    line-height: 1.4;
}

.retail-heatmap {
    width: 100%;
    display: grid;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
}

.retail-heatmap__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.4rem, 1vw, 0.6rem);
}

.retail-cell {
    position: relative;
    padding: clamp(0.5rem, 1.2vw, 0.7rem);
    border-radius: 12px;
    background: radial-gradient(circle at top, rgba(104, 202, 255, 0.35), rgba(52, 152, 219, 0.25));
    border: 1px solid rgba(82, 139, 187, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 6px 14px rgba(27, 68, 108, 0.15);
    display: grid;
    gap: 0.3rem;
}

.retail-cell--alert {
    background: radial-gradient(circle at top, rgba(255, 187, 140, 0.45), rgba(237, 122, 78, 0.35));
    border-color: rgba(217, 107, 65, 0.5);
}

.retail-cell__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(53, 84, 117, 0.9);
}

.retail-cell__value {
    font-size: 1rem;
    font-weight: 600;
    color: #0b2d4f;
}

.retail-cell__insight {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(74, 94, 118, 0.9);
}
.retail-legend {
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: rgba(66, 88, 116, 0.9);
}

.retail-legend__scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(86, 106, 130, 0.8);
}

.retail-note {
    font-size: 0.8rem;
    color: rgba(64, 84, 112, 0.85);
    margin: 0;
}

.tile--alert,
.telemetry-value--alert,
.hero__stream-value--alert,
.hero__readout-value--alert {
    animation: alertPulse 1.8s ease-in-out infinite;
}

@keyframes routePulse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes alertPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.15);
    }
}

.capabilities-container {
    display: grid;
    gap: clamp(2.5rem, 6vw, 3.5rem);
}

.core-capabilities h2 {
    text-align: center;
    font-size: clamp(2.2rem, 4.2vw, 2.8rem);
    margin: 0;
    color: var(--color-text);
}

.photo-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}

.square-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.square-photo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.square-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
}

.capability-card {
    position: relative;
    padding: 2.2rem 1.8rem 1.8rem;
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.capability-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.card-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--color-accent-strong);
}

.capability-card h3 {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    font-size: 1.25rem;
}

.capability-card p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* ------------------------------
   Floating CTA
------------------------------ */

.floatingEnd {
    background: linear-gradient(180deg, #ffffff 0%, #f5faf4 100%);
    padding-block: clamp(5rem, 10vw, 6.5rem);
}

.core-capabilities,
.floatingEnd,
footer {
    position: relative;
    z-index: 2;
}

.floating-cta {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.floating-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-card {
    width: min(100%, 880px);
    padding: clamp(2.5rem, 6vw, 3.5rem);
    border-radius: var(--radius-lg);
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.cta-content {
    text-align: center;
    display: grid;
    gap: 1rem;
}

.cta-content h3 {
    font-size: clamp(1.8rem, 3.5vw, 2.1rem);
    color: var(--color-text);
    margin: 0;
}

.cta-content p {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.cta-actions {
    display: flex;
    justify-content: center;
}

/* ------------------------------
   Responsive adjustments
------------------------------ */

@media (max-width: 768px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 3vw, 1.75rem);
    }

    .hero__metrics {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: clamp(1rem, 2.5vw, 1.5rem);
    }

    .capability-card {
        padding: clamp(1.5rem, 4vw, 1.8rem) clamp(1.25rem, 3vw, 1.5rem);
    }

    .dashboard-preview__panel {
        grid-template-columns: 1fr;
    }

    .dashboard-preview__nodes {
        inset: 26% 0 0 0;
    }

    .problem-section,
    .solution-section {
        padding-block: clamp(3rem, 8vw, 5rem);
    }

    .problem-stats-container {
        gap: clamp(1.25rem, 3vw, 1.75rem);
    }
}

@media (max-width: 640px) {
    .capability-card h3 {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .capability-card p {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
    }

    .problem-section,
    .solution-section {
        padding-block: clamp(2.5rem, 6vw, 4rem);
    }

    .problem-stats-container {
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 3vw, 1.5rem);
    }

    .problem-stat {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .hero__metric dt {
        font-size: clamp(1.2rem, 4vw, 1.35rem);
    }

    .hero__metric dd {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    }

    .capability-card {
        padding: clamp(1.25rem, 4vw, 1.5rem) clamp(1rem, 3vw, 1.25rem);
    }

    .capability-card h3 {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    .dashboard-preview {
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .dashboard-preview__views {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .dashboard-preview__view {
        flex: 1 1 calc(50% - 0.4rem);
        text-align: center;
    }
}