/* ================================================================
           FQ- (FAQ) — Modern Interactive FAQ
           ================================================================ */
        .fq-section {
            padding: 4rem 0;
            background: linear-gradient(180deg, var(--bg-subtle) 0%, #fff 100%);
            position: relative;
            content-visibility: auto;
            contain-intrinsic-size: auto 700px;
        }
        .fq-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
        }

        /* Header */
        .fq-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .fq-header__icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--teal-bg), #B8E0DF);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            color: var(--teal);
            animation: fqFloat 3s ease-in-out infinite;
        }
        @keyframes fqFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        .fq-header__title {
            font-size: clamp(1.4rem, 3vw, 1.8rem);
            font-weight: 800;
            color: var(--navy-deep);
            margin: 0 0 .4rem;
        }
        .fq-header__desc {
            color: var(--text-mid);
            font-size: .92rem;
            margin: 0;
        }

        /* List */
        .fq-list {
            max-width: 820px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Item */
        .fq-item {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            transition: border-color .3s, box-shadow .3s;
        }
        .fq-item:hover {
            border-color: var(--border);
        }
        .fq-item--open {
            border-color: var(--teal-bg);
            box-shadow: 0 4px 20px rgba(14, 124, 123, .08);
        }

        /* Head / Button */
        .fq-item__head {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 18px 22px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-align: start;
            transition: background .2s;
        }
        .fq-item__head:hover {
            background: #fafbfc;
        }

        /* Number */
        .fq-item__num {
            font-size: .78rem;
            font-weight: 800;
            color: var(--text-muted);
            min-width: 28px;
            height: 28px;
            border-radius: 8px;
            background: var(--bg-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .3s, color .3s;
        }
        .fq-item--open .fq-item__num {
            background: var(--teal-bg);
            color: var(--teal);
        }

        /* Question */
        .fq-item__q {
            flex: 1;
            font-size: .95rem;
            font-weight: 700;
            color: var(--navy);
            margin: 0;
            line-height: 1.5;
        }

        /* Toggle icon */
        .fq-item__toggle {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--bg-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--text-mid);
            transition: background .3s, color .3s, transform .3s;
        }
        .fq-item--open .fq-item__toggle {
            background: var(--teal-bg);
            color: var(--teal);
            transform: rotate(45deg);
        }
        .fq-toggle__v {
            transition: transform .3s, opacity .3s;
            transform-origin: center;
        }
        .fq-item--open .fq-toggle__v {
            opacity: 0;
            transform: scaleY(0);
        }

        /* Body / Answer */
        .fq-item__body {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);
        }
        .fq-item--open .fq-item__body {
            grid-template-rows: 1fr;
        }
        .fq-item__content {
            overflow: hidden;
            padding: 0 22px;
            transition: padding .4s cubic-bezier(.22, 1, .36, 1);
        }
        .fq-item--open .fq-item__content {
            padding: 0 22px 22px; padding-inline-start: 64px;
        }
        .fq-item__content p {
            font-size: .9rem;
            color: var(--text-mid);
            line-height: 1.85;
            margin: 0 0 .6rem;
        }
        .fq-item__content p:last-child {
            margin-bottom: 0;
        }
        .fq-item__content ul {
            padding-inline-end: 18px;
            margin: .5rem 0 0;
        }
        .fq-item__content li {
            font-size: .88rem;
            color: var(--text-mid);
            line-height: 1.85;
            margin-bottom: 4px;
        }
        .fq-item__content a {
            color: var(--teal);
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px dashed var(--teal-bg);
            transition: border-color .2s;
        }
        .fq-item__content a:hover {
            border-color: var(--teal);
        }
        .fq-item__content strong, .fq-item__content b {
            color: var(--navy);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .fq-section { padding: 3rem 0; }
            .fq-header__icon { width: 50px; height: 50px; border-radius: 14px; }
            .fq-header__icon svg { width: 22px; height: 22px; }
            .fq-item__head { padding: 14px 16px; gap: 10px; }
            .fq-item__q { font-size: .88rem; }
            .fq-item--open .fq-item__content { padding: 0 16px 18px; padding-inline-start: 52px; }
            .fq-item__toggle { width: 32px; height: 32px; border-radius: 8px; }
        }
        @media (max-width: 480px) {
            .fq-item__num { display: none; }
            .fq-item--open .fq-item__content { padding: 0 16px 16px; }
        }