:root {
    --portal-blue: #087cff;
    --portal-cyan: #16caff;
    --portal-dark: #062b55;
    --portal-navy: #02234a;
    --portal-text: #58708b;
    --portal-light: #f5fbff;
    --portal-border: #e2eef8;
}


/* =========================================
   HERO
========================================= */

.portal-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(22, 202, 255, .15),
            transparent 30%
        ),
        linear-gradient(135deg, #f8fcff, #edf8ff);
}

.portal-hero h1 {
    color: var(--portal-navy);
    font-size: clamp(43px, 5vw, 66px);
    line-height: 1.05;
    font-weight: 800;
    margin: 20px 0 25px;
}

.portal-hero h1 span {
    display: block;
    color: var(--portal-blue);
}

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(8,124,255,.3);
    border-radius: 50px;
    color: var(--portal-blue);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.portal-hero-text {
    max-width: 610px;
    color: var(--portal-text);
    font-size: 18px;
    line-height: 1.8;
}

.portal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.portal-btn-primary,
.portal-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.portal-btn-primary {
    color: #fff;
    background: linear-gradient(
        90deg,
        var(--portal-blue),
        var(--portal-cyan)
    );
    box-shadow: 0 12px 30px rgba(8,124,255,.2);
}

.portal-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
}

.portal-btn-outline {
    color: var(--portal-blue);
    background: #fff;
    border: 1px solid var(--portal-blue);
}

.portal-btn-outline:hover {
    color: #fff;
    background: var(--portal-blue);
}

.portal-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
}

.portal-points span {
    color: var(--portal-dark);
    font-size: 13px;
    font-weight: 600;
}

.portal-points i {
    margin-right: 5px;
    color: var(--portal-blue);
}


/* =========================================
   HERO VISUAL
========================================= */

.portal-hero-visual {
    position: relative;
    padding: 35px;
}

.portal-browser {
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(3,50,90,.16);
}

.browser-header {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 15px;
    border-bottom: 1px solid var(--portal-border);
    background: #f8fbfe;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: #bfd0df;
}

.browser-url {
    flex: 1;
    padding: 7px 14px;
    border-radius: 20px;
    color: #758ba0;
    background: #fff;
    border: 1px solid #e5edf4;
    font-size: 9px;
}

.browser-url i {
    margin-right: 5px;
    color: #18a96d;
}

.browser-header > i {
    color: #8194a7;
}

.browser-content {
    min-height: 400px;
}

.portal-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--portal-border);
}

.portal-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--portal-dark);
    font-size: 12px;
    font-weight: 800;
}

.portal-logo span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--portal-blue),
        var(--portal-cyan)
    );
}

.portal-nav {
    display: flex;
    gap: 15px;
}

.portal-nav span {
    width: 35px;
    height: 5px;
    display: block;
    border-radius: 4px;
    background: #dce8f1;
}

.portal-user {
    color: var(--portal-blue);
    font-size: 20px;
}

.portal-dashboard {
    display: flex;
    min-height: 340px;
}

.portal-sidebar {
    width: 55px;
    padding: 18px 9px;
    background: #062b55;
}

.portal-sidebar > div {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.65);
}

.portal-sidebar .portal-side-active {
    color: #fff;
    background: var(--portal-blue);
}

.portal-main {
    flex: 1;
    padding: 20px;
}

.portal-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-heading small {
    color: #8296a9;
    font-size: 9px;
}

.portal-heading h3 {
    margin: 2px 0 0;
    color: var(--portal-dark);
    font-size: 18px;
}

.online-status {
    color: #17a66c;
    font-size: 9px;
}

.online-status i {
    font-size: 6px;
    margin-right: 4px;
}

.portal-stat-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 18px;
}

.portal-stat {
    position: relative;
    padding: 11px;
    border: 1px solid var(--portal-border);
    border-radius: 9px;
}

.stat-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
    border-radius: 7px;
    color: #fff;
}

.stat-icon.blue {
    background: var(--portal-blue);
}

.stat-icon.cyan {
    background: var(--portal-cyan);
}

.stat-icon.green {
    background: #18b978;
}

.portal-stat small {
    display: block;
    color: #8498aa;
    font-size: 8px;
}

.portal-stat strong {
    display: block;
    color: var(--portal-dark);
    font-size: 14px;
}

.portal-stat span {
    color: #18ae72;
    font-size: 7px;
}

.portal-chart-area {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid var(--portal-border);
    border-radius: 9px;
}

.portal-chart-head {
    display: flex;
    justify-content: space-between;
    color: var(--portal-dark);
    font-size: 9px;
}

.portal-chart-head span {
    color: #8498aa;
    font-size: 8px;
}

.portal-chart {
    height: 120px;
    margin-top: 15px;
}

.chart-bars {
    height: 100%;
    display: flex;
    align-items: end;
    gap: 9px;
    padding: 0 10px;
    border-bottom: 1px solid #e3edf5;
}

.chart-bars i {
    flex: 1;
    display: block;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(
        to top,
        var(--portal-blue),
        var(--portal-cyan)
    );
}

.portal-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 15px 35px rgba(3,50,90,.12);
}

.portal-floating-card strong,
.portal-floating-card small {
    display: block;
}

.portal-floating-card strong {
    color: var(--portal-dark);
    font-size: 10px;
}

.portal-floating-card small {
    color: #8194a7;
    font-size: 8px;
}

.floating-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--portal-blue);
    background: #eaf5ff;
}

.portal-monitoring {
    right: -5px;
    top: 20px;
}

.portal-security {
    left: -5px;
    bottom: 15px;
}

.portal-security .floating-icon {
    color: #18b978;
    background: #e8fbf3;
}


/* =========================================
   COMMON
========================================= */

.portal-intro,
.platform-management,
.portal-features,
.platform-types,
.portal-process,
.portal-cta {
    padding: 100px 0;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading > span,
.section-label {
    color: var(--portal-blue);
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.section-heading h2,
.platform-management h2 {
    color: var(--portal-navy);
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    margin: 12px 0 18px;
}

.section-heading h2 strong,
.platform-management h2 strong {
    color: var(--portal-blue);
}

.section-heading p,
.platform-management > .container p {
    color: var(--portal-text);
    line-height: 1.8;
}


/* =========================================
   SERVICE CARDS
========================================= */

.portal-intro {
    background: #fff;
}

.portal-service-card {
    position: relative;
    height: 100%;
    padding: 32px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #fff;
    transition: .3s;
}

.portal-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(3,50,90,.09);
}

.portal-service-card.featured {
    border-color: rgba(8,124,255,.45);
    box-shadow: 0 15px 40px rgba(8,124,255,.08);
}

.portal-service-label {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 9px;
    border-radius: 20px;
    color: #fff;
    background: var(--portal-blue);
    font-size: 8px;
    font-weight: 700;
}

.portal-service-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 14px;
    font-size: 25px;
}

.portal-service-icon.blue {
    color: var(--portal-blue);
    background: #e9f5ff;
}

.portal-service-icon.cyan {
    color: #009bc7;
    background: #e5fbff;
}

.portal-service-icon.purple {
    color: #6b54d9;
    background: #f0edff;
}

.portal-service-card h3 {
    color: var(--portal-navy);
    font-size: 21px;
}

.portal-service-card > p {
    min-height: 75px;
    color: var(--portal-text);
    font-size: 14px;
    line-height: 1.7;
}

.portal-service-card ul {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

.portal-service-card li {
    padding: 7px 0;
    color: #637890;
    font-size: 13px;
}

.portal-service-card li i {
    color: var(--portal-blue);
    margin-right: 6px;
}


/* =========================================
   PLATFORM MANAGEMENT
========================================= */

.platform-management {
    background: var(--portal-light);
}

.platform-list {
    margin-top: 32px;
}

.platform-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.platform-item > div {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 11px;
    color: var(--portal-blue);
    background: #e7f4ff;
}

.platform-item strong,
.platform-item small {
    display: block;
}

.platform-item strong {
    color: var(--portal-dark);
    font-size: 15px;
    margin-bottom: 4px;
}

.platform-item small {
    color: var(--portal-text);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================
   MANAGEMENT VISUAL
========================================= */

.management-visual {
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 25px 55px rgba(3,50,90,.11);
}

.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--portal-border);
}

.management-header small,
.management-header strong {
    display: block;
}

.management-header small {
    color: #8296aa;
    font-size: 9px;
}

.management-header strong {
    color: var(--portal-dark);
    margin-top: 3px;
    font-size: 14px;
}

.management-header > span {
    color: #18aa70;
    font-size: 10px;
}

.management-header > span i {
    font-size: 6px;
    margin-right: 3px;
}

.health-score {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px;
}

.score-circle {
    width: 105px;
    height: 105px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 57%, transparent 58%),
        conic-gradient(
            var(--portal-blue) 98%,
            #e6f0f7 0
        );
}

.score-circle strong {
    color: var(--portal-blue);
    font-size: 27px;
}

.score-circle small {
    color: var(--portal-blue);
    font-size: 12px;
}

.health-score > div:last-child strong {
    display: block;
    color: var(--portal-dark);
    font-size: 15px;
}

.health-score > div:last-child p {
    margin: 5px 0 0;
    color: var(--portal-text);
    font-size: 11px;
}

.health-bars {
    padding: 0 28px 20px;
}

.health-row {
    display: grid;
    grid-template-columns: 130px 1fr 35px;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.health-row span,
.health-row strong {
    font-size: 9px;
}

.health-row span {
    color: #667e95;
}

.health-row strong {
    color: var(--portal-blue);
}

.health-row > div {
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: #e8f0f6;
}

.health-row > div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--portal-blue),
        var(--portal-cyan)
    );
}

.management-footer {
    display: flex;
    gap: 25px;
    padding: 15px 25px;
    border-top: 1px solid var(--portal-border);
}

.management-footer span {
    color: #71869b;
    font-size: 9px;
}

.management-footer i {
    color: var(--portal-blue);
    margin-right: 4px;
}


/* =========================================
   FEATURES
========================================= */

.portal-features {
    background: #fff;
}

.portal-feature-card {
    height: 100%;
    padding: 28px 23px;
    border: 1px solid var(--portal-border);
    border-radius: 15px;
    background: #fff;
    transition: .3s;
}

.portal-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(3,50,90,.08);
}

.portal-feature-card > i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 12px;
    color: var(--portal-blue);
    background: #eaf5ff;
    font-size: 22px;
}

.portal-feature-card h4 {
    color: var(--portal-dark);
    font-size: 17px;
}

.portal-feature-card p {
    margin: 0;
    color: var(--portal-text);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   PLATFORM TYPES
========================================= */

.platform-types {
    background: var(--portal-light);
}

.platform-type-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.platform-type {
    padding: 30px;
    border: 1px solid var(--portal-border);
    border-radius: 15px;
    background: #fff;
    transition: .3s;
}

.platform-type:hover {
    transform: translateY(-5px);
    border-color: rgba(8,124,255,.4);
}

.platform-type > i {
    color: var(--portal-blue);
    font-size: 27px;
}

.platform-type h4 {
    color: var(--portal-dark);
    font-size: 18px;
    margin: 16px 0 8px;
}

.platform-type p {
    margin: 0;
    color: var(--portal-text);
    font-size: 12px;
}


/* =========================================
   PROCESS
========================================= */

.portal-process {
    background: #fff;
}

.portal-process-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.portal-process-step {
    width: 190px;
    text-align: center;
}

.process-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(
        135deg,
        var(--portal-blue),
        var(--portal-cyan)
    );
    box-shadow: 0 10px 25px rgba(8,124,255,.2);
}

.process-icon span {
    font-size: 13px;
    font-weight: 800;
}

.portal-process-step h4 {
    color: var(--portal-dark);
    font-size: 16px;
    margin: 17px 0 7px;
}

.portal-process-step p {
    color: var(--portal-text);
    font-size: 11px;
    line-height: 1.6;
}

.process-arrow {
    width: 70px;
    margin-top: 22px;
    text-align: center;
    color: #9bb3c8;
}


/* =========================================
   CTA
========================================= */

.portal-cta {
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(22,202,255,.2),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #03234a,
            #0759a4
        );
}

.portal-cta-content {
    max-width: 760px;
    margin: auto;
    text-align: center;
}

.portal-cta-content > span {
    color: var(--portal-cyan);
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
}

.portal-cta-content h2 {
    color: #fff;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
    margin: 15px 0;
}

.portal-cta-content h2 strong {
    color: var(--portal-cyan);
}

.portal-cta-content p {
    max-width: 620px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,.78);
    line-height: 1.8;
}

.portal-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 27px;
    color: #fff;
    background: linear-gradient(
        90deg,
        var(--portal-blue),
        var(--portal-cyan)
    );
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.portal-cta-button:hover {
    color: #fff;
    transform: translateY(-3px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .portal-hero {
        padding: 80px 0;
    }

    .portal-hero-visual {
        margin-top: 60px;
    }

    .management-visual {
        margin-top: 50px;
    }

    .portal-process-grid {
        flex-wrap: wrap;
        gap: 25px;
    }

    .process-arrow {
        display: none;
    }

    .portal-process-step {
        width: 45%;
    }
}


@media (max-width: 767px) {

    .portal-intro,
    .platform-management,
    .portal-features,
    .platform-types,
    .portal-process,
    .portal-cta {
        padding: 70px 0;
    }

    .portal-hero h1 {
        font-size: 42px;
    }

    .section-heading h2,
    .platform-management h2,
    .portal-cta-content h2 {
        font-size: 32px;
    }

    .portal-hero-visual {
        padding: 10px;
    }

    .portal-floating-card {
        display: none;
    }

    .portal-stat-grid {
        grid-template-columns: 1fr;
    }

    .portal-dashboard {
        min-height: 400px;
    }

    .platform-type-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 480px) {

    .portal-hero h1 {
        font-size: 37px;
    }

    .portal-buttons {
        flex-direction: column;
    }

    .portal-btn-primary,
    .portal-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .portal-points {
        flex-direction: column;
        gap: 10px;
    }

    .portal-sidebar {
        width: 45px;
        padding: 15px 7px;
    }

    .portal-sidebar > div {
        width: 32px;
        height: 32px;
    }

    .portal-main {
        padding: 12px;
    }

    .health-score {
        padding: 20px;
    }

    .health-bars {
        padding: 0 20px 20px;
    }

    .health-row {
        grid-template-columns: 100px 1fr 30px;
    }

    .platform-type-grid {
        grid-template-columns: 1fr;
    }

    .portal-process-step {
        width: 100%;
    }

    .portal-nav {
        display: none;
    }
}