/* Hardware-Accelerated Cinematic Scroll Fade system */
.reveal-element {
    opacity: 0;
    transform: translateY(38px) scale(0.975);
    filter: blur(7px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.22, 1.12, 0.4, 1),
                filter 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0ms);
    will-change: transform, opacity, filter;
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

[data-i18n] { transition: opacity 180ms ease; }

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea {
    font-family: Inter, "Tahoma", sans-serif;
}

[dir="rtl"] .search-input {
    padding: 0 56px 0 20px;
}

[dir="rtl"] .search-input-wrap svg {
    left: auto;
    right: 20px;
}

@media (max-width: 980px) {
    .topbar {
        top: auto;
        bottom: 16px;
        align-items: center;
        width: calc(100% - 24px);
    }

    .brand span:last-child { display: none; }

    .navlinks {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .navlinks a {
        white-space: nowrap;
    }

    .hero-grid,
    .split-grid,
    .two-grid,
    .facet-layout,
    .contact-form {
        grid-template-columns: 1fr;
    }

    .section {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .hero {
        min-height: 100vh;
        padding-top: 110px;
        padding-bottom: 120px;
    }

    .sandbox { transform: none !important; }
    /* At 980px the sandbox goes full-width but columns are still side by side;
       reduce height slightly so the panel stays compact. */
    .result-column { height: 310px; }
    .estimate-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 350px; }
    .benchmark-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .shell { width: min(100vw - 32px, 1200px); }
    h1 { font-size: 2.85rem; }
    h2 { font-size: 2.15rem; }
    /* On narrow screens columns stack; each one is now full-width so
       items are taller and fewer fit — 260px is enough for 2 cards. */
    .result-grid { grid-template-columns: 1fr; }
    .result-column { height: 260px; }
    .tenant-map,
    .terminal { min-height: 400px; }
    .tenant-node {
        position: relative;
        inset: auto;
        width: auto;
        margin: 12px;
    }
    .secure-core { display: none !important; }
    .connection { display: none; }
    .benchmark-strip { grid-template-columns: 1fr; }
}