/* ============================================================
   ABOTRIX PUBLIC PLATFORM V23.2
   Safe enhancement layer for the existing Platform section
   ============================================================ */

.platform-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.platform-section::before {
    content: "";
    position: absolute;
    width: 760px;
    height: 760px;
    left: -430px;
    top: 10%;
    z-index: -2;
    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(38, 187, 231, 0.1),
            rgba(20, 108, 161, 0.035) 47%,
            transparent 72%
        );
}

.platform-section::after {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    right: -390px;
    bottom: -170px;
    z-index: -2;
    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(61, 135, 255, 0.09),
            transparent 70%
        );
}

.platform-introduction {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.platform-introduction h2 {
    text-wrap: balance;
}

.platform-feature-grid {
    align-items: stretch;
}

.platform-feature-card {
    position: relative;
    overflow: hidden;

    border-color: rgba(120, 205, 241, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(14, 52, 78, 0.83),
            rgba(8, 35, 57, 0.9)
        );

    box-shadow:
        0 24px 62px rgba(0, 5, 20, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.platform-feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72, 219, 247, 0.48),
            transparent
        );

    opacity: 0;

    transition: opacity 220ms ease;
}

.platform-feature-card::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -130px;
    bottom: -140px;
    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(48, 191, 235, 0.13),
            transparent 70%
        );

    transition:
        transform 300ms ease,
        opacity 300ms ease;
}

.platform-feature-card:hover {
    transform: translateY(-7px);

    border-color: rgba(83, 219, 248, 0.31);

    box-shadow:
        0 32px 80px rgba(0, 6, 22, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.platform-feature-card:hover::before {
    opacity: 1;
}

.platform-feature-card:hover::after {
    transform: scale(1.15);
}

.feature-card-heading {
    position: relative;
    z-index: 2;
}

.feature-icon {
    flex: 0 0 auto;

    box-shadow:
        0 13px 30px rgba(26, 174, 222, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.platform-feature-card > p {
    position: relative;
    z-index: 2;
}

/* COMMAND CENTER */

.command-center-preview {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(115, 207, 241, 0.16);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 74, 105, 0.76),
            rgba(14, 52, 79, 0.73)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 20px 50px rgba(0, 7, 22, 0.14);
}

.command-center-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.035),
            transparent 22%,
            transparent 75%,
            rgba(57, 205, 241, 0.03)
        );
}

.command-status i {
    position: relative;
}

.command-status i::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 1px solid rgba(54, 239, 172, 0.52);
    border-radius: 50%;

    animation:
        abotrixPlatformLivePulse 1.8s ease-out infinite;
}

@keyframes abotrixPlatformLivePulse {
    from {
        opacity: 0.82;
        transform: scale(0.55);
    }

    to {
        opacity: 0;
        transform: scale(1.85);
    }
}

.command-metrics > div {
    position: relative;
    overflow: hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.command-metrics > div:hover {
    transform: translateY(-3px);
    border-color: rgba(76, 218, 247, 0.29);
    background: rgba(31, 83, 113, 0.72);
}

.command-metrics strong {
    font-variant-numeric: tabular-nums;
}

.platform-chart-line {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
}

.platform-chart-fill {
    opacity: 0;
}

.platform-chart-line.platform-chart-visible {
    animation:
        abotrixPlatformChartLine 1.7s
        cubic-bezier(0.22, 0.75, 0.2, 1)
        forwards;
}

.platform-chart-fill.platform-chart-visible {
    animation:
        abotrixPlatformChartFill 900ms ease
        650ms forwards;
}

@keyframes abotrixPlatformChartLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes abotrixPlatformChartFill {
    to {
        opacity: 1;
    }
}

/* MODULE WORKSPACE */

.module-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
}

.module-list .abotrix-module-tile {
    position: relative;
    min-height: 74px;
    padding: 13px 14px;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;

    border: 1px solid rgba(123, 204, 238, 0.15);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(26, 72, 100, 0.68),
            rgba(17, 56, 82, 0.61)
        );

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.module-list .abotrix-module-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 216, 247, 0.3);
    background: rgba(27, 80, 108, 0.79);

    box-shadow:
        0 13px 30px rgba(0, 7, 21, 0.15);
}

.abotrix-module-icon {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(94, 218, 246, 0.19);
    border-radius: 12px;

    color: #62e0f7;
    background: rgba(24, 149, 194, 0.13);

    font-size: 12px;
    font-weight: 850;
    letter-spacing: -0.03em;
}

.abotrix-module-copy {
    min-width: 0;
}

.abotrix-module-copy strong {
    display: block;
    overflow: hidden;

    color: #edf8ff;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.abotrix-module-copy small {
    display: block;
    margin-top: 3px;

    color: #86acc8;
    font-size: 10px;
}

.abotrix-module-status {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #42e9ad;

    box-shadow: 0 0 12px rgba(66, 233, 173, 0.42);
}

/* BRANCH MANAGEMENT */

.branch-list {
    display: grid;
    gap: 9px;
}

.branch-list > div {
    min-height: 56px;

    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;

    border: 1px solid rgba(122, 203, 238, 0.13);
    border-radius: 13px;

    background: rgba(21, 65, 92, 0.54);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.branch-list > div:hover {
    transform: translateX(3px);
    border-color: rgba(72, 214, 245, 0.28);
    background: rgba(26, 78, 105, 0.7);
}

.branch-list strong {
    display: block;
}

.branch-list small {
    min-width: 72px;
    text-align: right;
}

.branch-indicator.online {
    box-shadow:
        0 0 0 4px rgba(57, 231, 169, 0.08),
        0 0 14px rgba(57, 231, 169, 0.38);
}

.branch-indicator.syncing {
    background: #ffc85a;

    box-shadow:
        0 0 0 4px rgba(255, 200, 90, 0.08),
        0 0 14px rgba(255, 200, 90, 0.34);

    animation:
        abotrixBranchSync 1.2s ease-in-out infinite;
}

@keyframes abotrixBranchSync {
    50% {
        opacity: 0.48;
    }
}

.abotrix-branch-summary {
    margin-top: 13px;
    padding-top: 13px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;

    border-top: 1px solid rgba(125, 202, 235, 0.12);
}

.abotrix-branch-summary div {
    padding: 10px 8px;

    border-radius: 11px;
    background: rgba(14, 48, 71, 0.47);
    text-align: center;
}

.abotrix-branch-summary strong {
    display: block;

    color: #f2f9ff;
    font-size: 17px;
}

.abotrix-branch-summary span {
    display: block;
    margin-top: 3px;

    color: #88aec9;
    font-size: 9px;
}

/* ANALYTICS */

.analytics-bars > div {
    position: relative;
}

.analytics-bars i {
    position: relative;
    overflow: hidden;
}

.analytics-bars i::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--value);
    transform: scaleX(0);
    transform-origin: left center;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #4fdef5,
            #38bff0 55%,
            #458bff
        );

    box-shadow:
        0 0 18px rgba(65, 205, 241, 0.24);
}

.analytics-bars.analytics-visible i::after {
    animation:
        abotrixAnalyticsBar 900ms
        cubic-bezier(0.2, 0.7, 0.2, 1)
        forwards;
}

.analytics-bars > div:nth-child(2) i::after {
    animation-delay: 100ms;
}

.analytics-bars > div:nth-child(3) i::after {
    animation-delay: 200ms;
}

@keyframes abotrixAnalyticsBar {
    to {
        transform: scaleX(1);
    }
}

.abotrix-analytics-trend {
    margin-left: auto;

    color: #48e8b2;
    font-size: 10px;
    font-weight: 800;
}

/* AUTOMATION */

.automation-flow {
    position: relative;
    display: grid !important;
    grid-template-columns:
        minmax(58px, 1fr)
        auto
        minmax(72px, 1fr)
        auto
        minmax(58px, 1fr) !important;

    align-items: center;
    gap: 7px !important;
}

.automation-flow span {
    position: relative;

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(113, 204, 240, 0.17);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(28, 79, 107, 0.67),
            rgba(16, 55, 81, 0.62)
        );

    color: #eaf7ff;
    font-size: 11px;
    font-weight: 750;

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}

.automation-flow span:hover {
    transform: translateY(-3px);
    border-color: rgba(75, 218, 248, 0.32);
}

.automation-flow b {
    color: #4bd8f5;

    animation:
        abotrixFlowArrow 1.5s ease-in-out infinite;
}

.automation-flow b:nth-of-type(2) {
    animation-delay: 250ms;
}

@keyframes abotrixFlowArrow {
    50% {
        opacity: 0.4;
        transform: translateX(2px);
    }
}

.abotrix-workflow-footer {
    margin-top: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: #83abc7;
    font-size: 10px;
}

.abotrix-workflow-footer strong {
    color: #45e8ae;
    font-size: 10px;
}

/* DEPLOYMENT */

.deployment-options-mini {
    gap: 9px;
}

.deployment-mini-button {
    position: relative;
    overflow: hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.deployment-mini-button:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 216, 247, 0.31);
}

.deployment-mini-button.abotrix-deployment-active {
    border-color: rgba(71, 222, 248, 0.45);

    background:
        linear-gradient(
            145deg,
            rgba(33, 105, 139, 0.72),
            rgba(20, 71, 100, 0.75)
        );

    box-shadow:
        0 15px 36px rgba(0, 8, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.deployment-mini-button.abotrix-deployment-active::after {
    content: "Selected";
    position: absolute;
    top: 7px;
    right: 7px;

    color: #4cebb4;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.abotrix-deployment-detail {
    margin-top: 13px;
    padding: 14px 15px;

    border: 1px solid rgba(116, 201, 237, 0.13);
    border-radius: 13px;

    background: rgba(13, 47, 71, 0.52);

    color: #9fc0d8;
    font-size: 11px;
    line-height: 1.55;
}

.abotrix-deployment-detail strong {
    color: #f0f8ff;
}

/* SUMMARY */

.platform-summary {
    position: relative;
    overflow: hidden;

    border-color: rgba(89, 218, 246, 0.22);

    background:
        linear-gradient(
            130deg,
            rgba(23, 72, 99, 0.84),
            rgba(11, 43, 67, 0.91)
        );

    box-shadow:
        0 25px 70px rgba(0, 5, 20, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.platform-summary::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -160px;
    top: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54, 214, 244, 0.18),
            transparent 70%
        );

    pointer-events: none;
}

.platform-summary > * {
    position: relative;
    z-index: 2;
}

.platform-summary .button {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.platform-summary .button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 38px rgba(51, 198, 237, 0.24);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .module-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .platform-feature-card:hover {
        transform: none;
    }

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

    .automation-flow {
        grid-template-columns: 1fr !important;
    }

    .automation-flow b {
        transform: rotate(90deg);
    }

    .abotrix-branch-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .abotrix-branch-summary {
        grid-template-columns: 1fr;
    }

    .branch-list > div {
        grid-template-columns: 10px minmax(0, 1fr);
    }

    .branch-list small {
        grid-column: 2;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .command-status i::after,
    .platform-chart-line.platform-chart-visible,
    .platform-chart-fill.platform-chart-visible,
    .analytics-bars.analytics-visible i::after,
    .branch-indicator.syncing,
    .automation-flow b {
        animation: none !important;
    }

    .platform-chart-line {
        stroke-dashoffset: 0;
    }

    .platform-chart-fill {
        opacity: 1;
    }

    .analytics-bars i::after {
        transform: scaleX(1);
    }
}