/* ==========================================================================
   Responsive — All media queries
   Breakpoints align with Bootstrap 5: sm 576 | md 768 | lg 992 | xl 1200
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — Large desktop (>= 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .header__overlay {
        display: none !important;
    }

    .header__nav {
        flex: 1;
        justify-content: space-between;
        margin-left: var(--spacing-md);
    }

    .header__menu {
        flex: 1;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Header — Tablet & below (< 992px) — slide drawer
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root {
        --header-height: 64px;
    }

    .header__hamburger {
        display: flex;
    }

    .header__overlay {
        display: block;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 88vw);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: calc(var(--header-height) + 1rem) var(--spacing-sm) var(--spacing-sm);
        background-color: var(--color-bg);
        border-right: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1045;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
    }

    .header__nav--open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        background-color: #1a1a2e;
        border-right-color: rgba(255, 255, 255, 0.08);
        color: #f1f5f9;
    }

    .header__nav--open .header__nav-link {
        color: rgba(255, 255, 255, 0.82);
    }

    .header__nav--open .header__nav-link:hover,
    .header__nav--open .header__nav-link--active,
    .header__nav--open .header__dropdown--open > .header__dropdown-toggle {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .header__nav--open .header__dropdown-menu {
        background-color: rgba(255, 255, 255, 0.06);
    }

    .header__nav--open .header__mega-link,
    .header__nav--open .header__dropdown-item {
        color: rgba(255, 255, 255, 0.92);
    }

    .header__nav--open .header__mega-link:hover,
    .header__nav--open .header__dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .header__nav--open .header__mega-title,
    .header__nav--open .header__dropdown-item-title {
        color: #ffffff;
    }

    .header__nav--open .header__mega-desc,
    .header__nav--open .header__dropdown-item-desc {
        color: rgba(255, 255, 255, 0.55);
    }

    .header__nav--open .header__mega-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .header__nav--open .header__mega-cta {
        color: #7eb3ff;
    }

    .header__nav--open .header__mega-cta:hover {
        color: #a8ccff;
    }

    .header__nav--open .header__actions {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .header__nav--open .header__login {
        color: rgba(255, 255, 255, 0.85);
    }

    .header__nav--open .header__login:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .header__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: 100%;
    }

    .header__nav-item {
        width: 100%;
        min-width: 0;
    }

    .header__nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        font-size: 1rem;
        white-space: normal;
    }

    .header__dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 0.25rem;
        box-shadow: none;
        border: none;
        background-color: var(--color-bg-alt);
        border-radius: var(--radius-md);
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        padding: 0;
        transition: max-height var(--transition-base), padding var(--transition-base);
    }

    .header__dropdown--open > .header__dropdown-menu,
    .header__dropdown:hover > .header__dropdown-menu {
        transform: none;
        left: auto;
        right: auto;
    }

    .header__dropdown--open > .header__dropdown-menu {
        max-height: 80vh;
        pointer-events: auto;
        padding: 0.5rem;
        overflow-y: auto;
    }

    .header__mega {
        width: 100%;
        max-width: 100%;
        left: auto;
        right: auto;
        transform: none;
        padding: 0.5rem;
    }

    .header__dropdown:hover > .header__mega,
    .header__dropdown--open > .header__mega {
        transform: none;
        left: auto;
        right: auto;
    }

    .header__dropdown-menu--simple {
        min-width: 0;
        width: 100%;
        padding: 0;
    }

    .header__dropdown--open > .header__dropdown-menu--simple {
        padding: 0.5rem;
    }

    .header__mega-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .header__mega-link,
    .header__dropdown-item {
        padding: 0.75rem;
        min-width: 0;
    }

    .header__mega-title,
    .header__mega-desc,
    .header__dropdown-item-title,
    .header__dropdown-item-desc {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .header__mega-footer {
        padding: 0.5rem 0.75rem 0.25rem;
    }

    .header__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border);
        gap: 0.5rem;
    }

    .header__login {
        justify-content: center;
        min-height: auto;
        text-align: center;
        padding: 0.875rem 1rem;
    }

    .header__cta {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Header — Small mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .header__logo-text {
        font-size: 1.125rem;
    }

    .header__logo-mark svg {
        width: 28px;
        height: 28px;
    }
}

/* --------------------------------------------------------------------------
   Hero — Tablet & below (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero__content {
        max-width: 100%;
        text-align: center;
    }

    .hero__desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__portals {
        justify-content: center;
    }

    .hero__stats {
        justify-content: center;
    }

    .hero__visual {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .hero__float-card--notify {
        right: 0;
        top: -0.5rem;
    }

    .hero__float-card--users {
        left: 0;
    }
}

/* --------------------------------------------------------------------------
   Hero — Small mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__cta,
    .hero__cta-secondary {
        width: 100%;
    }

    .hero__portals {
        gap: 0.5rem;
    }

    .hero__portal {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    .hero__mockup-body {
        min-height: 300px;
    }

    .hero__mockup-sidebar {
        width: 52px;
        padding: 0.5rem 0.35rem;
    }

    .hero__mockup-nav-label {
        display: none;
    }

    .hero__mockup-toolbar-pill {
        display: none;
    }

    .hero__mockup-activity-meta {
        font-size: 0.4375rem;
    }

    .hero__float-card {
        display: none;
    }

    .hero__visual {
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Trust — Small mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .trust__tags {
        gap: 0.5rem;
    }

    .trust__tag {
        font-size: 0.75rem;
        padding: 0.3125rem 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Dashboard backgrounds — hide on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .dashboard__bg-panel {
        opacity: 0.25 !important;
        transform: scale(0.85);
    }

    .dashboard__bg--why .dashboard__bg-panel--sidebar {
        transform: translateY(-50%) scale(0.85);
    }

    .dashboard__bg--portals .dashboard__bg-panel--chart,
    .dashboard__bg--modules .dashboard__bg-panel--chart {
        width: 140px;
        height: 80px;
    }
}

@media (max-width: 767.98px) {
    .dashboard__bg-panel {
        display: none;
    }

    .dashboard__bg-grid {
        opacity: 0.6;
    }
}

/* --------------------------------------------------------------------------
   Portals — Tablet & below (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .portals__section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .portals__footer .btn__outline {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Modules — Tablet & below (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .modules__section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

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

    .modules__header {
        text-align: center;
    }

    .modules__header .section__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .modules__slider-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }

    .modules__slider-wrap .modules__flip-viewport {
        width: 100%;
        order: 1;
    }

    .modules__slider-wrap .modules__nav-btn--prev {
        order: 2;
    }

    .modules__slider-wrap .modules__nav-btn--next {
        order: 3;
    }

    .modules__flip-dots {
        width: 100%;
        order: 4;
    }

    .modules__flip-slide {
        flex: 0 0 100%;
    }

    .modules__footer .btn__primary {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Modules — Tablet (768px – 991px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .modules__flip-slide {
        flex: 0 0 calc((100% - 1.25rem) / 2);
    }
}

/* --------------------------------------------------------------------------
   Why — Tablet & below (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .why__intro {
        text-align: center;
        margin-bottom: var(--spacing-sm);
    }

    .why__intro .section__title {
        text-align: center;
    }

    .why__intro-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .why__intro-cta {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   CRM — Tablet & below (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .crm__section .section__title,
    .crm__section .section__label {
        text-align: center;
    }

    .crm__desc {
        text-align: center;
    }

    .crm__section .btn__primary {
        display: flex;
        width: 100%;
        margin-bottom: var(--spacing-md);
    }

    .cta__visual {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   CRM — Small mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .crm__pipeline {
        grid-template-columns: 1fr;
    }

    .cta__card {
        padding: 1.75rem 1.25rem;
    }

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

    .cta__btn {
        width: 100%;
    }

    .cta__trust {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cta__visual {
        min-height: auto;
        margin-top: 0.5rem;
    }

    .cta__stat-card--float {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        max-width: 100%;
        margin-top: 0.75rem;
        animation: none;
    }

    .hiw__actions {
        flex-direction: column;
    }

    .hiw__actions .btn__primary,
    .hiw__actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .hiw__step:hover .hiw__step-card {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Section — Tablet & below (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section__wrapper {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .section__title {
        font-size: var(--font-size-xl);
    }

    .section__subtitle {
        font-size: var(--font-size-base);
    }
}

/* --------------------------------------------------------------------------
   Section — Small mobile (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    :root {
        --font-size-base: 15px;
    }

    .section__title {
        font-size: var(--font-size-lg);
    }

    .btn__primary,
    .btn__outline {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Footer — Tablet & below (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .footer__cta-bar-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .footer__cta-bar-btn {
        width: 100%;
        justify-content: center;
    }

    .footer__top {
        text-align: left;
    }

    .footer__brand {
        max-width: 100%;
        margin-bottom: 0;
        text-align: left;
    }

    .footer__logo-link {
        justify-content: flex-start;
    }

    .footer__contact-panel {
        display: flex;
        justify-content: flex-start;
    }

    .footer__contact {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   Features page — Tablet & below (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pagehero__section {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }

    .pagehero__actions {
        flex-direction: column;
    }

    .pagehero__actions .btn__primary,
    .pagehero__actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .featurepage__hero {
        flex-direction: column;
    }

    .featurepage__dashboard {
        padding: 0 0 1.25rem;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .pagehero__section .portalpage__dashboard {
        padding: 0 0 0.75rem;
    }

    .featurepage__dashboard-float {
        right: 0;
        bottom: 0.5rem;
    }

    .featurepage__sidebar {
        position: static;
    }

    .features__intro-card {
        flex-direction: column;
        padding: var(--spacing-md);
    }

    .features__cta-actions {
        flex-direction: column;
    }

    .features__cta-actions .btn__primary,
    .features__cta-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .features-index__hero-actions {
        flex-direction: column;
    }

    .features-index__hero-actions .btn__primary,
    .features-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .features-index__visual {
        padding-bottom: 2rem;
    }

    .portals-index__mobile-visual {
        padding: 0.25rem 0;
    }

    .portals-index__mobile-phone {
        width: min(196px, 72vw);
    }

    .portals-index__mobile-phone-button--silent,
    .portals-index__mobile-phone-button--volume-up,
    .portals-index__mobile-phone-button--volume-down,
    .portals-index__mobile-phone-button--power {
        display: none;
    }

    .features-index__visual .hero__float-card.features-index__mockup-float {
        top: auto;
        right: 0;
        bottom: 0.5rem;
        max-width: min(220px, calc(100% - 0.5rem));
    }

    .features-index__flow-panel {
        min-height: 300px;
        padding: 1rem;
        gap: 0.5rem;
    }

    .features-index__flow-module {
        max-width: 108px;
        padding: 0.625rem 0.5rem;
    }

    .features-index__flow-module-icon {
        width: 30px;
        height: 30px;
    }

    .features-index__addon-card {
        flex-direction: column;
        padding: var(--spacing-md);
    }

    .featurepage__workflow-step:hover .featurepage__workflow-card {
        transform: none;
    }

    .featurepage__workflow {
        padding: var(--spacing-md);
    }

    .featurepage__workflow-steps {
        grid-template-columns: 1fr;
    }

    .featurepage__jump-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .featurepage__jump-nav::-webkit-scrollbar {
        display: none;
    }

    .featurepage__jump-list {
        flex-wrap: nowrap;
        min-width: min-content;
    }

    .featurepage__layout {
        --featurepage-section-gap: 1.5rem;
        --featurepage-stack-gap: 1.25rem;
    }

    .featurepage__section {
        --featurepage-section-gap: 1.5rem;
        --featurepage-stack-gap: 1.25rem;
    }

    .featurepage__layout.section__wrapper {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .featurepage__overview-illustration {
        max-width: 300px;
    }

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

    .featurepage__highlight-card:hover {
        transform: none;
    }

    .featurepage__portal-card:hover {
        transform: none;
    }

    .featurepage__cta-section .cta__stat-card--float {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        max-width: none;
        margin-top: 0.75rem;
        animation: none;
    }

    .featurepage__cta-visual {
        min-height: auto;
        padding: 0;
    }

    .hiw__page-cta-card {
        flex-direction: column;
        text-align: center;
    }

    .hiw__page-cta-card .btn__primary {
        width: 100%;
        justify-content: center;
    }

    .hiw-index__stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hiw-index__hero-actions {
        flex-direction: column;
    }

    .hiw-index__hero-actions .btn__primary,
    .hiw-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .hiw-index__intro-sticky {
        position: static;
    }

    .hiw-index__jump-nav,
    .page-jump-nav {
        width: 100%;
    }

    .about-index__hero-actions {
        flex-direction: column;
    }

    .about-index__hero-actions .btn__primary,
    .about-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .careers-page__hero-actions {
        flex-direction: column;
    }

    .careers-page__hero-actions .btn__primary,
    .careers-page__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .careers-page__opening-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .careers-page__opening-apply {
        width: 100%;
        justify-content: center;
    }

    .lead-form__checkbox-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-page__sidebar {
        position: static;
    }

    .inquiry-page__form-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .inquiry-page__form-hint {
        align-self: flex-start;
        white-space: normal;
    }

    .inquiry-page__quick-actions {
        flex-direction: column;
    }

    .inquiry-page__quick-action {
        justify-content: center;
    }

    .legal-page__sidebar {
        position: static;
    }
}

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

@media (min-width: 1200px) {
    .featurepage__workflow-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .solutions-index__hero-actions {
        flex-direction: column;
    }

    .solutions-index__hero-actions .btn__primary,
    .solutions-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .solutions-index__visual {
        max-width: 100%;
        margin-left: 0;
        padding-bottom: 2rem;
    }

    .solutions-index__jump-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .solutions-index__jump-nav::-webkit-scrollbar {
        display: none;
    }

    .solutions-index__jump-list {
        flex-wrap: nowrap;
        min-width: min-content;
    }

    .solutions__highlight-card {
        position: relative;
        max-width: none;
        margin-top: var(--spacing-sm);
    }

    .solutions__visual {
        padding: 0;
    }

    .solutionpage__hero-visual,
    .solutionpage__cta-visual {
        min-height: auto;
    }

    .solutionpage__module-card:hover {
        transform: none;
    }

    .solutionpage__cta-section .solutions__highlight-card {
        position: relative;
        max-width: none;
        margin-top: var(--spacing-sm);
    }

    .portals-index__hero-actions {
        flex-direction: column;
    }

    .portals-index__hero-actions .btn__primary,
    .portals-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .portals-index__visual {
        max-width: 420px;
        margin-inline: auto;
    }

    .portals-index__flow-panel {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto;
        min-height: auto;
        padding: 1.25rem;
    }

    .portals-index__flow-lines {
        display: none;
    }

    .portals-index__flow-hub {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: 100%;
    }

    .portals-index__flow-portal--top {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 180px;
    }

    .portals-index__flow-portal--left {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }

    .portals-index__flow-portal--right {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
    }

    .portals-index__flow-portal--bottom {
        grid-column: 1 / -1;
        grid-row: 4;
        max-width: 180px;
    }

    .portalpage__cta-visual .portalpage__dashboard {
        padding-bottom: 0;
    }

    .modules-index__hero-actions {
        flex-direction: column;
    }

    .modules-index__hero-actions .btn__primary,
    .modules-index__hero-actions .btn__outline {
        width: 100%;
        justify-content: center;
    }

    .modules-index__stack {
        max-width: 100%;
        margin-left: 0;
    }

    .modules-index__stack-layer--addon {
        margin-left: 0;
    }

    .modules-index__addon-card:hover {
        transform: none;
    }
}