.acc-wrap { position: relative; width: 100%; background: #ffffff; padding: 0; }

.acc-viewport { overflow: hidden; width: 100%; position: relative; }

.accordion { display: flex; height: 600px; transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); }

.panel { position: relative; overflow: hidden; cursor: pointer; transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1); flex: 1; min-width: 0; }

.panel.active { flex: 4.5; cursor: default; }

.panel:not(.active):hover .panel-bg { filter: brightness(0.9); }

.panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter 0.5s ease; filter: brightness(0.9); }

.panel.active .panel-bg { filter: brightness(1.05); }

.panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 65%); z-index: 1; opacity: 0; transition: opacity 0.5s ease; }

.panel::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%); z-index: 2; pointer-events: none; }

.panel.active::before { opacity: 0.6; }

.panel.active::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%); }

.panel-label { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%) rotate(90deg); transform-origin: center center; z-index: 2; white-space: nowrap; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); transition: opacity 0.25s ease; }

.panel.active .panel-label { opacity: 0; pointer-events: none; }

.panel-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; pointer-events: none; max-width: 600px; }

.panel.active .panel-content { opacity: 1; transform: translateY(0); pointer-events: auto; }

.tag { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 10px; background: #232f60; padding: 5px 10px; border-radius: 4px; display: inline-block; }

.panel-content h2 { font-size: 1.6rem; font-weight: 500; color: #fff; line-height: 1.2; margin-bottom: 12px; }

.panel-content p { font-size: 1.2rem; font-weight:500; color: rgba(255, 255, 255, 0.75); line-height: 1.75; margin-bottom: 20px; }

.panel-content a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 4px; }

.panel-content a svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

.plus-btn { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: #c0392b; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; }

.panel.active .plus-btn { opacity: 0; }

.plus-btn svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; }

.panel + .panel { border-left: 1px solid rgba(255, 255, 255, 0.07); }

.arr-btn { 
    display: none;
}

.dots { display: flex; justify-content: center; gap: 6px; padding-top: 14px; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(35, 47, 96, 0.2); transition: all 0.3s; cursor: pointer; }

.dot.active { background: #232f60; width: 18px; border-radius: 3px; }

@media (max-width: 1200px) {
    .accordion { height: 480px; }
    .panel-content { padding: 36px; }
    .panel-content h2 { font-size: 1.5rem; }
}

@media (max-width: 992px) {
    .accordion { height: 450px; }
    .panel-content { padding: 30px; }
    .panel-content h2 { font-size: 1.4rem; }
}

@media (max-width: 768px) {
    .accordion { 
        flex-direction: column; 
        height: auto;
    }

    .panel { 
        flex: none !important;
        width: 100%;
        height: 80px;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .panel.active { 
        height: 400px;
    }

    .panel-label {
        transform: none;
        left: 24px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.9rem;
    }

    .panel-content { 
        padding: 24px;
        max-width: 100%;
        opacity: 0;
        transform: translateY(20px);
    }

    .panel.active .panel-content {
        opacity: 1;
        transform: translateY(0);
    }

    .panel-content h2 { font-size: 1.4rem; }
    .panel-content p { font-size: 0.95rem; margin-bottom: 16px; }

    .plus-btn {
        left: auto;
        right: 24px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
    }

    .panel.active .plus-btn svg {
        transform: rotate(45deg);
    }

    .arr-btn { display: none; }

    .dots { display: none; }
}

@media (max-width: 576px) {
    .panel {
        height: 70px;
    }

    .panel.active { 
        height: 380px;
    }

    .panel-content { padding: 20px; }
    .panel-content h2 { font-size: 1.2rem; }
    .panel-content p { font-size: 0.9rem; margin-bottom: 12px; }
    .panel-label { font-size: 0.85rem; left: 20px; }
    .tag { font-size: 0.75rem; padding: 4px 8px; }
    .plus-btn { width: 28px; height: 28px; right: 20px; }
}