/* =========================================================
   SKYBRIDGE - SITE.CSS
   Dominant Blue Theme
========================================================= */

:root {
    --ink: #0b1728;
    --ink-soft: #263b52;
    --muted: #6b7c91;
    --line: #dfe7f1;
    --surface: #f5f8fc;
    --white: #ffffff;

    /* BLUE BRAND */
    --brand: #3b82f6;
    --brand-dark: #2563eb;
    --brand-deep: #1d4ed8;
    --brand-soft: #eaf2ff;
    --brand-softer: #f3f7ff;

    /* NAVY */
    --navy: #071a33;
    --navy-light: #0b2550;
    --navy-soft: #102d5b;

    /* OTHER */
    --orange: #ff9e45;

    --shadow:
        0 24px 70px rgba(15, 54, 110, .11);

    --blue-shadow:
        0 18px 45px rgba(37, 99, 235, .20);

    --radius: 22px;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    line-height: 1.75;
}


/* =========================================================
   BUTTON
========================================================= */

.btn {
    border-radius: 12px;
    font-weight: 700;
    padding: .72rem 1.25rem;
    transition: .25s ease;
}

.btn-lg {
    padding: .92rem 1.45rem;
    font-size: .98rem;
}

.btn-brand {
    color: #ffffff !important;
    border-color: var(--brand-dark) !important;

    background:
        linear-gradient(
            135deg,
            #3b82f6 0%,
            #2563eb 55%,
            #1d4ed8 100%
        ) !important;

    box-shadow:
        0 10px 26px rgba(37, 99, 235, .25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    color: #ffffff !important;

    border-color: #1d4ed8 !important;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 100%
        ) !important;

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(37, 99, 235, .32);
}


/* =========================================================
   NAVBAR
========================================================= */

.site-navbar {
    min-height: 78px;

    background:
        rgba(255, 255, 255, .96);

    border-bottom:
        1px solid rgba(37, 99, 235, .08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    padding: 12px 0;

    transition: .25s ease;

    z-index: 1030;
}

.site-navbar.is-scrolled {
    min-height: 68px;

    box-shadow:
        0 12px 35px rgba(15, 54, 110, .09);
}

.navbar-brand {
    display: flex;
    align-items: center;

    padding: 0;
    margin: 0;
}

.navbar-logo {
    display: block;

    height: 52px;
    width: auto;
    max-width: 220px;

    object-fit: contain;

    margin: 0;
}


/* NAV LINKS */

.site-navbar .nav-link {
    position: relative;

    color: #42546a;

    font-size: .92rem;
    font-weight: 650;

    padding: .65rem .8rem !important;

    transition: .2s ease;
}

.site-navbar .nav-link:hover {
    color: var(--brand-dark);
}

.site-navbar .nav-link.active {
    color: var(--brand-dark);
}

.site-navbar .nav-link.active::after {
    position: absolute;

    right: .8rem;
    bottom: .28rem;
    left: .8rem;

    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #2563eb
        );

    border-radius: 4px;
}


/* MOBILE NAV */

.navbar-toggler {
    padding: 6px 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
}


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

.hero-section {
    position: relative;

    min-height: 760px;

    padding:
        170px 0 100px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(59, 130, 246, .32),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(37, 99, 235, .18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #040f22 0%,
            #071a33 35%,
            #0b2550 72%,
            #0f3a7a 100%
        );
}


/* GRID BACKGROUND */

.hero-grid,
.login-background .hero-grid {
    position: absolute;
    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(96, 165, 250, .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(96, 165, 250, .14) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        linear-gradient(
            to right,
            #000,
            transparent 78%
        );
}


/* HERO ORBS */

.hero-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(1px);
}

.hero-orb-one {
    top: 80px;
    right: 5%;

    width: 350px;
    height: 350px;

    background:
        radial-gradient(
            circle,
            rgba(96, 165, 250, .15),
            rgba(37, 99, 235, .04)
        );

    border:
        1px solid rgba(96, 165, 250, .20);
}

.hero-orb-two {
    bottom: -130px;
    left: 42%;

    width: 320px;
    height: 320px;

    background:
        rgba(59, 130, 246, .08);
}


/* EYEBROW */

.eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #9db6d4;

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.eyebrow > span {
    width: 28px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #2563eb
        );
}

.eyebrow-dark {
    color: #587087;
}


/* HERO TITLE */

.display-title {
    max-width: 760px;

    margin-bottom: 28px;

    font-size:
        clamp(3.2rem, 6.5vw, 6.5rem);

    font-weight: 790;

    line-height: .96;

    letter-spacing: -.065em;
}

.display-title span {
    color: #60a5fa;
}


/* HERO LEAD */

.hero-lead {
    max-width: 640px;

    margin-bottom: 34px;

    color: #b7c9df;

    font-size: 1.12rem;
}


/* HERO TRUST */

.hero-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 26px;

    margin-top: 48px;
}

.hero-trust > div {
    display: flex;
    flex-direction: column;

    padding-right: 24px;

    border-right:
        1px solid rgba(255, 255, 255, .14);
}

.hero-trust > div:last-child {
    border: 0;
}

.hero-trust strong {
    font-size: .92rem;
}

.hero-trust span {
    margin-top: 4px;

    color: #8099b5;

    font-size: .74rem;
}


/* =========================================================
   NETWORK VISUAL
========================================================= */

.network-visual {
    position: relative;

    width:
        min(100%, 470px);

    min-height: 490px;

    margin-inline: auto;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .08),
            rgba(59, 130, 246, .045)
        );

    border:
        1px solid rgba(96, 165, 250, .18);

    border-radius: 30px;

    box-shadow:
        0 45px 100px rgba(1, 9, 24, .35);

    backdrop-filter: blur(12px);
}

.visual-top {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 20px 22px;

    color: #d5e2ee;

    border-bottom:
        1px solid rgba(96, 165, 250, .12);

    font-size: .78rem;
    font-weight: 700;
}

.visual-top small {
    margin-left: auto;

    color: #60a5fa;

    font-size: .65rem;

    letter-spacing: .1em;
}

.status-dot {
    width: 8px;
    height: 8px;

    background: #60a5fa;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(59, 130, 246, .15);
}


/* SIGNAL */

.signal-ring {
    position: absolute;

    top: 49%;
    left: 50%;

    border:
        1px solid rgba(96, 165, 250, .20);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.ring-one {
    width: 160px;
    height: 160px;
}

.ring-two {
    width: 270px;
    height: 270px;
}

.ring-three {
    width: 390px;
    height: 390px;
}


/* CORE */

.visual-core,
.visual-node {
    position: absolute;

    display: grid;

    place-items: center;

    top: 49%;
    left: 50%;

    color: #ffffff;

    border-radius: 18px;

    transform:
        translate(-50%, -50%);
}

.visual-core {
    width: 82px;
    height: 82px;

    font-size: 2rem;

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        );

    box-shadow:
        0 15px 40px rgba(37, 99, 235, .40);
}

.visual-node {
    width: 48px;
    height: 48px;

    color: #c2d4e9;

    background:
        linear-gradient(
            145deg,
            #102d5b,
            #0b2245
        );

    border:
        1px solid rgba(96, 165, 250, .20);

    border-radius: 14px;

    font-size: 1.15rem;
}

.node-one {
    top: 29%;
    left: 27%;
}

.node-two {
    top: 31%;
    left: 77%;
}

.node-three {
    top: 68%;
    left: 24%;
}

.node-four {
    top: 70%;
    left: 76%;
}


/* VISUAL BOTTOM */

.visual-bottom {
    position: absolute;

    right: 20px;
    bottom: 20px;
    left: 20px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}

.visual-bottom div {
    display: flex;
    flex-direction: column;

    padding: 13px 15px;

    background:
        rgba(3, 15, 35, .60);

    border:
        1px solid rgba(96, 165, 250, .12);

    border-radius: 13px;
}

.visual-bottom span {
    color: #829bb7;

    font-size: .67rem;
}

.visual-bottom strong {
    margin-top: 3px;

    font-size: 1rem;
}


/* =========================================================
   SECTION
========================================================= */

.section-padding {
    padding: 105px 0;
}

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 48px;
}

.section-heading h2,
.section-intro h2,
.about-strip h2,
.why-section h2 {
    max-width: 680px;

    margin: 0;

    font-size:
        clamp(2rem, 4vw, 3.35rem);

    font-weight: 780;

    line-height: 1.08;

    letter-spacing: -.045em;
}

.section-heading > p {
    max-width: 430px;

    margin: 0;

    color: var(--muted);
}


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

.service-card {
    position: relative;

    padding: 34px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--line);

    border-radius: var(--radius);

    transition: .3s ease;
}

.service-card::after {
    position: absolute;

    right: -50px;
    bottom: -50px;

    width: 130px;
    height: 130px;

    content: "";

    background:
        radial-gradient(
            circle,
            rgba(96, 165, 250, .32),
            rgba(59, 130, 246, .09)
        );

    border-radius: 50%;

    transition: .3s ease;
}

.service-card:hover {
    border-color:
        rgba(59, 130, 246, .30);

    box-shadow: var(--shadow);

    transform:
        translateY(-6px);
}

.service-card:hover::after {
    width: 160px;
    height: 160px;
}


/* SERVICE ICON */

.service-icon {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    margin-bottom: 30px;

    color: var(--brand-dark);

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    border-radius: 17px;

    font-size: 1.45rem;
}

.service-icon-sm {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin: 0;

    border-radius: 12px;

    font-size: 1rem;
}

.service-card h3,
.portfolio-card h3,
.value-card h3,
.process-card h3 {
    position: relative;

    z-index: 1;

    margin-bottom: 12px;

    font-size: 1.28rem;

    font-weight: 750;
}

.service-card p,
.portfolio-card p,
.value-card p,
.process-card p {
    position: relative;

    z-index: 1;

    margin-bottom: 22px;

    color: var(--muted);

    font-size: .93rem;
}

.service-link,
.text-link {
    position: relative;

    z-index: 1;

    color: var(--ink);

    font-size: .86rem;

    font-weight: 750;
}

.service-link i,
.text-link i {
    margin-left: 5px;

    color: var(--brand-dark);
}


/* =========================================================
   ABOUT
========================================================= */

.about-strip {
    padding: 105px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #f1f6fc
        );
}

.about-visual {
    position: relative;

    min-height: 440px;

    padding: 46px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(96, 165, 250, .38),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071a33 0%,
            #0b2550 55%,
            #164a91 100%
        );

    border-radius: 28px;

    box-shadow:
        0 24px 65px rgba(15, 54, 110, .18);
}

.about-visual::before {
    position: absolute;

    top: -110px;
    right: -90px;

    width: 300px;
    height: 300px;

    content: "";

    border:
        60px solid rgba(96, 165, 250, .23);

    border-radius: 50%;
}

.about-card-main {
    position: relative;

    z-index: 1;

    max-width: 390px;

    color: #ffffff;
}

.mini-label {
    display: block;

    margin-bottom: 12px;

    color: var(--brand-dark);

    font-size: .7rem;

    font-weight: 850;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.about-card-main .mini-label,
.contact-info-panel .mini-label {
    color: #60a5fa;
}

.about-card-main h3 {
    margin-bottom: 18px;

    font-size: 2.45rem;

    font-weight: 760;

    line-height: 1.1;

    letter-spacing: -.045em;
}

.about-card-main p {
    color: #a9bdd5;
}

.about-card-float {
    position: absolute;

    right: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    color: var(--ink);

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 20px 50px rgba(2, 16, 36, .27);
}

.about-card-float > i {
    color: var(--brand-dark);

    font-size: 1.55rem;
}

.about-card-float div {
    display: flex;

    flex-direction: column;
}

.about-card-float small {
    color: var(--muted);

    font-size: .7rem;
}

.lead-copy {
    color: #526981;

    font-size: 1.08rem;
}

.feature-list {
    display: grid;

    gap: 15px;

    margin-top: 26px;
}

.feature-list > div {
    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 650;
}

.feature-list i {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    color: var(--brand-dark);

    background: var(--brand-soft);

    border-radius: 50%;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-card {
    overflow: hidden;

    background: #ffffff;

    border:
        1px solid var(--line);

    border-radius: var(--radius);

    transition: .3s ease;
}

.portfolio-card:hover {
    box-shadow: var(--shadow);

    transform:
        translateY(-5px);
}

.portfolio-media {
    position: relative;

    height: 245px;

    overflow: hidden;

    background: var(--surface);
}

.portfolio-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .5s ease;
}

.portfolio-card:hover img {
    transform:
        scale(1.045);
}

.portfolio-placeholder {
    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    color: #60a5fa;

    background:
        radial-gradient(
            circle at 65% 20%,
            rgba(96, 165, 250, .35),
            transparent 32%
        ),
        linear-gradient(
            140deg,
            #071a33,
            #0d356b
        );

    font-size: 4rem;
}

.portfolio-placeholder::after {
    position: absolute;

    width: 130px;
    height: 130px;

    content: "";

    border:
        1px solid rgba(96, 165, 250, .14);

    border-radius: 50%;
}

.portfolio-category {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 7px 12px;

    color: #ffffff;

    background:
        rgba(5, 20, 47, .78);

    border:
        1px solid rgba(96, 165, 250, .18);

    border-radius: 30px;

    backdrop-filter: blur(8px);

    font-size: .68rem;

    font-weight: 750;
}

.portfolio-body {
    padding: 27px;
}

.portfolio-meta {
    display: flex;

    justify-content: space-between;

    margin-bottom: 11px;

    color: var(--muted);

    font-size: .72rem;
}


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

.process-section {
    padding: 105px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(59, 130, 246, .22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06152d 0%,
            #071a33 45%,
            #0b2550 100%
        );
}

.section-intro {
    max-width: 720px;

    margin-bottom: 50px;
}

.process-card {
    position: relative;

    min-height: 250px;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .06),
            rgba(59, 130, 246, .04)
        );

    border:
        1px solid rgba(96, 165, 250, .13);

    border-radius: 19px;
}

.process-card > span {
    display: block;

    margin-bottom: 50px;

    color: #60a5fa;

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: .12em;
}

.process-card p {
    color: #96abc3;
}


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

.cta-wrap {
    padding:
        0 0 100px;
}

.cta-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;

    padding: 58px 64px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(255, 255, 255, .22),
            transparent 22%
        ),
        radial-gradient(
            circle at 15% 100%,
            rgba(147, 197, 253, .25),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #1d4ed8 0%,
            #2563eb 48%,
            #3b82f6 100%
        );

    border-radius: 28px;

    box-shadow:
        0 24px 70px rgba(37, 99, 235, .28);
}

.cta-card > div:first-child {
    max-width: 700px;
}

.cta-card h2 {
    margin:
        8px 0 12px;

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    font-weight: 780;

    line-height: 1.06;

    letter-spacing: -.045em;
}

.cta-card p {
    margin: 0;

    color:
        rgba(255, 255, 255, .82);
}

.cta-kicker {
    font-size: .7rem;

    font-weight: 850;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding:
        75px 0 28px;

    color: #d8e3f0;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(59, 130, 246, .16),
            transparent 28%
        ),
        linear-gradient(
            150deg,
            #030c1b 0%,
            #06152d 50%,
            #071a33 100%
        );
}


/* FOOTER LOGO */

.footer-brand {
    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: auto !important;

    height: auto !important;

    margin-bottom: 22px !important;
}

.footer-logo-link {
    display: inline-flex !important;

    align-items: center !important;

    width: auto !important;

    height: auto !important;
}

.footer-logo {
    display: block !important;

    width: 190px !important;

    height: 52px !important;

    max-width: 190px !important;

    object-fit: contain !important;

    object-position:
        left center !important;

    margin: 0 !important;

    padding: 0 !important;

    position: static !important;

    transform: none !important;
}


.site-footer h6 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: .8rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.footer-copy {
    max-width: 430px;

    color: #899fb7;

    font-size: .9rem;
}


/* SOCIAL */

.social-links {
    display: flex;

    gap: 10px;

    margin-top: 24px;
}

.social-links a {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid rgba(96, 165, 250, .09);

    border-radius: 11px;

    transition: .2s ease;
}

.social-links a:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    transform:
        translateY(-2px);
}


/* FOOTER LINKS */

.footer-links,
.footer-contact {
    display: grid;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.footer-links a,
.footer-contact {
    color: #899db4;

    font-size: .88rem;
}

.footer-links a:hover {
    color: #60a5fa;
}

.footer-contact li {
    display: flex;

    gap: 11px;
}

.footer-contact i {
    color: #60a5fa;
}

.footer-bottom {
    display: flex;

    justify-content: space-between;

    margin-top: 55px;

    padding-top: 24px;

    color: #687f9a;

    border-top:
        1px solid rgba(96, 165, 250, .10);

    font-size: .78rem;
}

.footer-bottom a:hover {
    color: #60a5fa;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-float {
    position: fixed;

    z-index: 1000;

    right: 25px;
    bottom: 25px;

    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    color: #ffffff;

    background: #20bd69;

    border:
        4px solid #ffffff;

    border-radius: 50%;

    box-shadow:
        0 14px 32px rgba(4, 42, 25, .25);

    font-size: 1.5rem;

    transition: .25s ease;
}

.whatsapp-float:hover {
    color: #ffffff;

    transform:
        translateY(-3px);
}


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

.page-hero {
    position: relative;

    padding:
        185px 0 95px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(59, 130, 246, .28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06152d 0%,
            #071a33 45%,
            #0b2550 100%
        );
}

.page-hero::after {
    position: absolute;

    top: 60px;
    right: 8%;

    width: 360px;
    height: 360px;

    content: "";

    border:
        1px solid rgba(96, 165, 250, .12);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(96, 165, 250, .025),
        0 0 0 120px rgba(96, 165, 250, .015);
}

.page-hero-inner {
    position: relative;

    z-index: 1;

    max-width: 850px;
}

.page-hero h1 {
    margin-bottom: 22px;

    font-size:
        clamp(3rem, 6vw, 5.5rem);

    font-weight: 790;

    line-height: 1;

    letter-spacing: -.06em;
}

.page-hero p {
    max-width: 620px;

    margin: 0;

    color: #a5b9d0;

    font-size: 1.08rem;
}


/* =========================================================
   STORY
========================================================= */

.story-panel {
    position: relative;

    min-height: 480px;

    padding: 34px;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(59, 130, 246, .17),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #071a33,
            #0b2550
        );

    border-radius: 28px;
}

.story-number {
    position: absolute;

    top: 20px;
    right: -10px;

    color:
        rgba(96, 165, 250, .06);

    font-size: 10rem;

    font-weight: 900;

    letter-spacing: -.08em;
}

.story-grid {
    position: absolute;

    right: 34px;
    bottom: 34px;
    left: 34px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.story-grid > div {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 22px;

    background:
        rgba(255, 255, 255, .055);

    border:
        1px solid rgba(96, 165, 250, .12);

    border-radius: 16px;
}

.story-grid i {
    color: #60a5fa;

    font-size: 1.4rem;
}


/* =========================================================
   VALUES / WHY
========================================================= */

.values-section,
.why-section {
    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #f2f6fb
        );
}

.value-card {
    padding: 35px;

    background: #ffffff;

    border-radius: var(--radius);

    border:
        1px solid rgba(37, 99, 235, .07);
}

.value-card > i {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 30px;

    color: var(--brand-dark);

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    border-radius: 16px;

    font-size: 1.35rem;
}


/* WHY */

.why-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.why-grid > div {
    padding: 28px;

    background: #ffffff;

    border:
        1px solid rgba(37, 99, 235, .07);

    border-radius: 18px;
}

.why-grid span {
    color: var(--brand-dark);

    font-size: .7rem;

    font-weight: 850;
}

.why-grid strong {
    display: block;

    margin:
        20px 0 8px;
}

.why-grid p {
    margin: 0;

    color: var(--muted);

    font-size: .86rem;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding:
        90px 0 105px;

    background:
        linear-gradient(
            180deg,
            #f7faff,
            #f1f6fc
        );
}

.contact-info-panel,
.contact-form-card {
    height: 100%;

    padding: 42px;

    border-radius: 25px;
}

.contact-info-panel {
    color: #ffffff;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(59, 130, 246, .30),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #071a33,
            #0b2550
        );
}

.contact-info-panel h2,
.contact-form-card h2 {
    margin-bottom: 12px;

    font-size: 2rem;

    font-weight: 760;

    letter-spacing: -.04em;
}

.contact-info-panel > p {
    margin-bottom: 35px;

    color: #9cb1ca;
}

.contact-detail {
    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        16px 0;

    border-bottom:
        1px solid rgba(96, 165, 250, .10);
}

.contact-detail > i {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    color: #60a5fa;

    background:
        rgba(96, 165, 250, .10);

    border-radius: 12px;
}

.contact-detail > div {
    display: flex;

    flex-direction: column;
}

.contact-detail small {
    color: #8098b4;

    font-size: .7rem;
}

.contact-detail strong {
    margin-top: 3px;

    font-size: .9rem;
}

.contact-form-card {
    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(15, 54, 110, .08);
}


/* =========================================================
   FORM
========================================================= */

.form-label {
    color: #30475f;

    font-size: .82rem;

    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 48px;

    padding: .75rem .9rem;

    border-color: #dce5ef;

    border-radius: 11px;

    font-size: .9rem;
}

textarea.form-control {
    min-height: auto;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);

    box-shadow:
        0 0 0 .22rem rgba(59, 130, 246, .13);
}

.empty-state,
.table-empty {
    padding: 45px;

    color: var(--muted);

    text-align: center;

    background: var(--surface);

    border-radius: 18px;
}


/* =========================================================
   AUTHENTICATION
========================================================= */

.login-page {
    min-height: 100vh;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #040f22,
            #071a33 45%,
            #0b2550
        );
}

.login-background {
    position: fixed;

    inset: 0;

    overflow: hidden;
}

.login-shell {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 470px;

    align-items: center;

    gap: 90px;

    min-height: 100vh;

    padding:
        70px 0;
}

.login-copy h1 {
    max-width: 650px;

    margin:
        22px 0;

    font-size:
        clamp(3rem, 5.5vw, 5.5rem);

    font-weight: 800;

    line-height: .98;

    letter-spacing: -.06em;
}

.login-copy > p {
    max-width: 570px;

    color: #9aafc7;

    font-size: 1.05rem;
}

.login-card {
    padding: 44px;

    color: var(--ink);

    background: #ffffff;

    border-radius: 26px;

    box-shadow:
        0 35px 100px rgba(1, 11, 28, .35);
}

.login-card h2 {
    margin-bottom: 5px;

    font-weight: 760;

    letter-spacing: -.04em;
}

.input-icon {
    position: relative;
}

.input-icon > i {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 15px;

    color: #8395a9;

    transform:
        translateY(-50%);
}

.input-icon .form-control {
    padding-left: 43px;
}

.login-back {
    display: block;

    margin-top: 24px;

    color: var(--muted);

    font-size: .82rem;

    text-align: center;
}


/* =========================================================
   ADMIN
========================================================= */

.admin-body {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #f5f8fd,
            #f1f5fb
        );
}


/* SIDEBAR */

.admin-sidebar {
    position: fixed;

    z-index: 1100;

    top: 0;
    bottom: 0;
    left: 0;

    display: flex;

    flex-direction: column;

    width: 270px;

    padding:
        25px 18px;

    color: #cbd8e8;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(59, 130, 246, .25),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #06152d 0%,
            #071a33 45%,
            #081d3a 100%
        );

    border-right:
        1px solid rgba(96, 165, 250, .08);

    transition: .25s ease;
}


/* =========================================================
   ADMIN BRAND
   Hanya Admin Panel + SKYBRIDGE
========================================================= */

.admin-brand {
    display: flex !important;

    align-items: center !important;

    justify-content:
        flex-start !important;

    width: 100% !important;

    padding:
        12px 10px 20px !important;

    margin: 0 !important;

    text-decoration: none !important;
}

.admin-brand-text {
    display: flex !important;

    flex-direction: column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    margin: 0 !important;

    padding: 0 !important;
}

.admin-brand-text strong {
    display: block !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;

    font-weight: 750 !important;

    line-height: 1.15 !important;

    white-space: nowrap;
}

.admin-brand-text small {
    display: block !important;

    margin-top: 5px !important;

    color: #75a9f8 !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    letter-spacing: 1.6px !important;

    line-height: 1.2 !important;

    white-space: nowrap;
}


/* ADMIN NAV */

.admin-nav {
    display: grid;

    gap: 5px;

    margin-top: 35px;
}

.admin-nav-label {
    margin:
        0 13px 10px;

    color: #5d7695;

    font-size: .61rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.admin-nav a,
.admin-sidebar-bottom a,
.admin-sidebar-bottom button {
    display: flex;

    align-items: center;

    gap: 13px;

    width: 100%;

    padding:
        12px 14px;

    color: #8ca3bd;

    background: transparent;

    border: 0;

    border-radius: 11px;

    font-size: .86rem;

    font-weight: 650;

    text-align: left;

    transition: .2s ease;
}

.admin-nav a:hover,
.admin-sidebar-bottom a:hover,
.admin-sidebar-bottom button:hover {
    color: #ffffff;

    background:
        rgba(59, 130, 246, .11);
}

.admin-nav a.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, .24),
            rgba(37, 99, 235, .12)
        );

    box-shadow:
        inset 3px 0 0 #60a5fa;
}

.admin-nav a.active i {
    color: #60a5fa;
}


/* ADMIN BOTTOM */

.admin-sidebar-bottom {
    display: grid;

    gap: 4px;

    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid rgba(96, 165, 250, .10);
}


/* ADMIN MAIN */

.admin-main {
    min-height: 100vh;

    margin-left: 270px;
}


/* ADMIN TOPBAR */

.admin-topbar {
    position: sticky;

    z-index: 100;

    top: 0;

    display: flex;

    align-items: center;

    min-height: 78px;

    padding:
        0 34px;

    background:
        rgba(255, 255, 255, .94);

    border-bottom:
        1px solid #e4eaf2;

    backdrop-filter: blur(14px);
}

.admin-topbar > div:first-of-type {
    display: flex;

    flex-direction: column;
}

.admin-topbar > div:first-of-type strong {
    font-size: .93rem;
}

.admin-topbar small {
    color: var(--muted);

    font-size: .68rem;
}


/* ADMIN USER */

.admin-user {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;
}

.admin-user > span,
.message-sender > span {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        );

    border-radius: 11px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, .23);
}

.admin-user > div,
.message-sender > div {
    display: flex;

    flex-direction: column;
}

.admin-user strong {
    font-size: .78rem;
}

.admin-menu-button {
    display: none;

    margin-right: 13px;

    background: transparent;

    border: 0;

    font-size: 1.5rem;
}


/* CONTENT */

.admin-content {
    padding: 34px;
}


/* ADMIN WELCOME */

.admin-welcome,
.admin-page-head {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;

    margin-bottom: 30px;
}

.admin-welcome {
    padding: 35px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(59, 130, 246, .14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fbff
        );

    border:
        1px solid #e2e9f3;

    border-radius: 20px;
}

.admin-welcome h1,
.admin-page-head h1 {
    margin:
        0 0 7px;

    font-size:
        clamp(1.65rem, 3vw, 2.3rem);

    font-weight: 770;

    letter-spacing: -.045em;
}

.admin-welcome p,
.admin-page-head p {
    margin: 0;

    color: var(--muted);

    font-size: .88rem;
}


/* =========================================================
   STAT CARD
========================================================= */

.stat-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px;

    background: #ffffff;

    border:
        1px solid #e2e9f2;

    border-radius: 17px;

    transition: .2s ease;
}

.stat-card:hover {
    border-color:
        rgba(59, 130, 246, .28);

    box-shadow:
        0 15px 35px rgba(15, 54, 110, .09);

    transform:
        translateY(-2px);
}

.stat-icon {
    display: grid;

    place-items: center;

    width: 49px;
    height: 49px;

    border-radius: 14px;

    font-size: 1.2rem;
}

.stat-blue {
    color: #2563eb;

    background: #eaf2ff;
}

.stat-purple {
    color: #7c3aed;

    background: #f1eaff;
}

.stat-orange {
    color: #e87918;

    background: #fff1e5;
}

.stat-green {
    color: #1d4ed8;

    background: #eaf2ff;
}

.stat-card > div {
    display: flex;

    flex-direction: column;
}

.stat-card small {
    color: var(--muted);

    font-size: .7rem;
}

.stat-card strong {
    font-size: 1.5rem;
}

.stat-arrow {
    margin-left: auto;

    color: #9ba9b8;

    font-size: .75rem;
}


/* =========================================================
   ADMIN CARD
========================================================= */

.admin-card {
    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e2e9f2;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(15, 54, 110, .035);
}

.admin-card-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        25px 27px;

    border-bottom:
        1px solid #edf1f6;
}

.admin-card-header h2 {
    margin:
        0 0 4px;

    font-size: 1.03rem;

    font-weight: 750;
}

.admin-card-header p {
    margin: 0;

    color: var(--muted);

    font-size: .75rem;
}


/* =========================================================
   ADMIN TABLE
========================================================= */

.admin-table {
    font-size: .82rem;
}

.admin-table th {
    padding:
        15px 20px;

    color: #71849a;

    background: #f9fbfe;

    border-bottom-color: #e7edf5;

    font-size: .67rem;

    font-weight: 800;

    letter-spacing: .05em;

    text-transform: uppercase;

    white-space: nowrap;
}

.admin-table td {
    padding:
        16px 20px;

    border-bottom-color: #edf1f6;
}

.admin-table td > strong,
.admin-table td > small {
    display: block;
}

.admin-table td > small,
.table-title small {
    max-width: 420px;

    margin-top: 4px;

    overflow: hidden;

    color: var(--muted);

    font-size: .7rem;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.table-title {
    display: flex;

    align-items: center;

    gap: 12px;
}

.table-title > div {
    display: flex;

    min-width: 0;

    flex-direction: column;
}

.table-icon,
.order-badge {
    display: grid;

    flex: 0 0 auto;

    place-items: center;

    width: 36px;
    height: 36px;

    color: var(--brand-dark);

    background: var(--brand-soft);

    border-radius: 10px;
}

.order-badge {
    width: 30px;
    height: 30px;

    font-size: .72rem;

    font-weight: 750;
}


/* =========================================================
   STATUS
========================================================= */

.status-badge {
    display: inline-flex;

    padding:
        5px 9px;

    color: #667780;

    background: #eef2f5;

    border-radius: 20px;

    font-size: .65rem;

    font-weight: 750;
}


/* tetap hijau karena status sukses */
.status-active,
.status-read {
    color: #08734b;

    background: #ddf5eb;
}

.status-inactive {
    color: #6d7c84;

    background: #edf1f2;
}

.status-unread {
    color: #b35408;

    background: #fff0df;
}

.row-unread {
    background: #fffcf8;
}


/* =========================================================
   TABLE ACTION
========================================================= */

.table-actions {
    display: flex;

    justify-content: flex-end;

    gap: 6px;
}

.table-actions .btn {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    padding: 0;
}


/* =========================================================
   ADMIN FORM
========================================================= */

.admin-form-card {
    padding: 30px;
}

.admin-form-card .form-control,
.admin-form-card .form-select {
    background: #fbfcff;
}

.form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 30px;

    padding-top: 23px;

    border-top:
        1px solid #e9eef5;
}

.admin-pagination {
    padding:
        20px 25px;

    border-top:
        1px solid #edf1f6;
}

.admin-pagination nav > div:first-child {
    display: none;
}

.back-link {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--brand-dark);

    font-size: .78rem;

    font-weight: 700;
}


/* =========================================================
   MESSAGE
========================================================= */

.message-card {
    padding: 30px;
}

.message-sender {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 23px;

    border-bottom:
        1px solid #e9eef5;
}

.message-sender small {
    margin-top: 3px;

    color: var(--muted);
}

.message-content {
    padding:
        30px 0 10px;

    color: #42586e;

    line-height: 1.85;
}

.message-info {
    display: flex;

    flex-direction: column;

    padding:
        11px 0;

    border-bottom:
        1px solid #edf1f6;
}

.message-info small {
    color: var(--muted);

    font-size: .67rem;
}

.message-info strong {
    margin-top: 3px;

    font-size: .83rem;
}


/* =========================================================
   ADMIN OVERLAY
========================================================= */

.admin-overlay {
    display: none;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   RESPONSIVE - 1199
========================================================= */

@media (max-width: 1199.98px) {

    .hero-section {
        min-height: auto;
    }

    .display-title {
        font-size: 4.6rem;
    }

    .login-shell {
        grid-template-columns:
            1fr 430px;

        gap: 45px;
    }
}


/* =========================================================
   RESPONSIVE - 991
========================================================= */

@media (max-width: 991.98px) {

    .site-navbar {
        padding:
            10px 0;
    }

    .navbar-logo {
        height: 44px;

        max-width: 185px;
    }

    .site-navbar .navbar-collapse {
        margin-top: 14px;

        padding: 15px;

        background: #ffffff;

        border:
            1px solid var(--line);

        border-radius: 15px;

        box-shadow: var(--shadow);
    }

    .site-navbar .nav-link.active::after {
        display: none;
    }

    .site-navbar .nav-link {
        padding:
            12px 10px !important;
    }

    .btn-brand {
        width: 100%;

        text-align: center;
    }


    /* HERO */

    .hero-section {
        padding-top: 145px;
    }

    .display-title {
        font-size:
            clamp(3.2rem, 10vw, 5rem);
    }

    .network-visual {
        min-height: 440px;
    }


    /* SECTIONS */

    .section-heading,
    .cta-card {
        align-items: flex-start;

        flex-direction: column;
    }


    /* LOGIN */

    .login-shell {
        grid-template-columns:
            1fr;

        max-width: 650px;

        margin-inline: auto;
    }

    .login-copy {
        display: none;
    }


    /* ADMIN */

    .admin-sidebar {
        transform:
            translateX(-100%);
    }

    .admin-sidebar.open {
        transform:
            translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-menu-button {
        display: block;
    }

    .admin-overlay {
        position: fixed;

        z-index: 1050;

        inset: 0;

        display: block;

        visibility: hidden;

        background:
            rgba(3, 13, 30, .52);

        opacity: 0;

        transition: .2s ease;
    }

    .admin-overlay.show {
        visibility: visible;

        opacity: 1;
    }


    /* FOOTER */

    .footer-logo {
        width: 175px !important;

        height: 48px !important;

        max-width: 175px !important;
    }
}


/* =========================================================
   RESPONSIVE - 767
========================================================= */

@media (max-width: 767.98px) {

    .section-padding,
    .about-strip,
    .process-section,
    .values-section,
    .why-section {
        padding:
            75px 0;
    }

    .hero-section {
        padding-bottom: 75px;
    }

    .hero-trust {
        gap: 16px;
    }

    .hero-trust > div {
        width:
            calc(50% - 8px);

        padding-right: 0;

        border: 0;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .about-visual {
        min-height: 400px;

        padding: 30px;
    }

    .about-card-main h3 {
        font-size: 2rem;
    }

    .page-hero {
        padding:
            150px 0 75px;
    }

    .page-hero h1 {
        font-size:
            clamp(2.8rem, 12vw, 4.2rem);
    }

    .cta-card {
        padding:
            40px 30px;
    }

    .why-grid {
        grid-template-columns:
            1fr;
    }

    .contact-info-panel,
    .contact-form-card {
        padding:
            30px 24px;
    }

    .footer-bottom,
    .admin-welcome,
    .admin-page-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .admin-user > div {
        display: none;
    }

    .admin-topbar,
    .admin-content {
        padding-right: 18px;

        padding-left: 18px;
    }

    .admin-welcome {
        padding: 25px;
    }
}


/* =========================================================
   RESPONSIVE - 575
========================================================= */

@media (max-width: 575.98px) {

    .display-title {
        font-size: 3.25rem;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .network-visual {
        min-height: 390px;
    }

    .ring-three {
        width: 330px;

        height: 330px;
    }

    .visual-bottom {
        display: none;
    }

    .story-grid {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .story-grid > div {
        padding: 16px;
    }

    .story-grid span {
        font-size: .75rem;
    }

    .login-card {
        padding:
            30px 23px;
    }

    .admin-form-card,
    .message-card {
        padding: 22px;
    }

    .footer-logo {
        width: 165px !important;

        height: 45px !important;

        max-width: 165px !important;
    }
}