.platform {
    overflow: hidden;
    background:
        linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
}

.platform-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
    align-items: center;
}

.platform-accordion {
    display: grid;
    gap: 8px;
    margin-top: 42px;
}

.platform-accordion button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 18px;
    color: var(--color-blue);
    background: transparent;
    font-size: clamp(1.08rem, 2vw, 1.34rem);
    font-weight: 900;
    text-align: left;
}

.platform-accordion button::before {
    content: "›";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--color-blue);
    font-size: 1.5rem;
    transition: transform 180ms ease;
}

.platform-accordion button.is-open::before {
    transform: rotate(90deg);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    padding-left: 36px;
    transition: grid-template-rows 260ms ease;
}

.accordion-panel.is-open {
    grid-template-rows: 1fr;
}

.accordion-panel p {
    overflow: hidden;
    max-width: 600px;
    margin: 0;
    color: var(--color-text);
    font-size: 1.08rem;
    line-height: 1.7;
}

.platform-preview {
    position: relative;
}

.platform-preview::before {
    content: "";
    position: absolute;
    inset: -50px;
    border-radius: 48px;
    background:
        radial-gradient(circle at 60% 38%, rgba(8,87,255,0.22), transparent 42%),
        radial-gradient(circle at 32% 70%, rgba(72,213,255,0.2), transparent 35%);
    pointer-events: none;
}

.command-center {
    position: relative;
    z-index: 2;
    padding: 22px;
    border: 1px solid rgba(8, 87, 255, 0.14);
    border-radius: 36px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(238,246,255,0.78));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.center-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.72);
}

.center-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #25d67d;
    box-shadow: 0 0 24px rgba(37,214,125,0.75);
}

.center-top small {
    margin-left: auto;
    color: var(--color-muted);
}

.center-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.center-card {
    min-height: 138px;
    padding: 20px;
    border: 1px solid rgba(8, 87, 255, 0.1);
    border-radius: 24px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 18px 48px rgba(8,36,88,0.08);
}

.center-card.wide {
    grid-column: span 2;
}

.center-card.tall {
    min-height: 240px;
}

.center-card small {
    display: block;
    color: var(--color-muted);
    font-weight: 800;
}

.center-card strong {
    display: block;
    margin-top: 10px;
    color: var(--color-blue);
    font-size: 2.5rem;
    line-height: 1;
}

.center-card.wide span {
    display: block;
    height: 10px;
    margin-top: 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-blue), var(--color-cyan), var(--color-mint));
    animation: center-bar 3s ease-in-out infinite;
}

.center-card.tall {
    display: flex;
    align-items: end;
    gap: 12px;
}

.center-card.tall small {
    align-self: start;
    margin-right: auto;
}

.center-card.tall i {
    width: 36px;
    height: var(--height);
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, var(--color-cyan), var(--color-blue));
    box-shadow: 0 18px 46px rgba(8,87,255,0.24);
}

.center-card.list {
    display: grid;
    gap: 10px;
    align-content: start;
}

.center-card.list span {
    display: block;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--color-blue-dark);
    background: rgba(8,87,255,0.08);
    font-weight: 800;
}

@keyframes center-bar {
    0%, 100% { filter: hue-rotate(0deg); transform: scaleX(0.72); transform-origin: left; }
    50% { filter: hue-rotate(48deg); transform: scaleX(1); }
}

@media (max-width: 980px) {
    .platform-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@media (max-width: 620px) {
    .center-grid {
        grid-template-columns: 1fr;
    }

    .center-card.wide {
        grid-column: auto;
    }

    .command-center {
        padding: 14px;
        border-radius: 28px;
    }
}