/* ================= General ================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/* ================= FAQ (pure CSS grid technique) =================
   Using grid-template-rows 0fr -> 1fr means we never depend on
   scrollHeight calculations from JS, so it keeps working correctly
   even if fonts/images shift content height, on resize, or on very
   small mobile screens. The inner .faq-inner has overflow:hidden so
   the collapsed row still clips its content to zero height. */

.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-item.active .faq-content {
    grid-template-rows: 1fr;
}

.faq-item.active {
    box-shadow: 0 20px 45px rgba(91, 63, 214, 0.12);
}

.faq-item.active .faq-btn {
    background: #f8f5ff;
}

.faq-item .faq-btn i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-btn i {
    transform: rotate(180deg);
}

/* ================= Mobile Sidebar ================= */

#sidebar {
    transition: left 0.3s ease;
}

/* ================= Small-screen safety nets ================= */

@media (max-width: 380px) {
    h1 {
        word-break: break-word;
    }
}