:root {
    --butigal-yellow: #f6c915;
    --butigal-yellow-soft: #fff8d7;
    --butigal-yellow-pale: #fffdf3;
    --butigal-green: #116b3a;
    --butigal-green-dark: #094a29;
    --butigal-green-soft: #e8f4ed;

    --ink: #17201b;
    --ink-soft: #536059;
    --surface: #ffffff;
    --surface-soft: #f7f8f7;
    --border: #e5e9e6;

    --shadow-soft:
        0 16px 40px rgba(19, 37, 28, 0.08);

    --shadow-card:
        0 12px 28px rgba(19, 37, 28, 0.06);

    --radius-large: 28px;
    --radius-medium: 20px;
    --radius-small: 12px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.butigal-portal {
    margin: 0;

    color: var(--ink);

    background:
        var(--surface);

    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;
}

.portal-page {
    min-height: 100vh;
}

.portal-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}


/* ==========================================================
   HEADER
========================================================== */

.portal-header {
    position: sticky;
    z-index: 50;
    top: 0;

    border-bottom:
        1px solid rgba(17, 107, 58, 0.08);

    background:
        rgba(255, 249, 218, 0.94);

    backdrop-filter: blur(18px);
}

.portal-header-inner {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        auto
        minmax(180px, 1fr);

    align-items: center;

    width: min(1240px, calc(100% - 36px));
    min-height: 76px;

    margin-inline: auto;

    gap: 28px;
}

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

    justify-self: start;

    gap: 10px;

    min-width: 0;
}

.brand-logo {
    display: block;

    width: auto;
    max-width: 142px;
    height: 42px;

    object-fit: contain;
}

.brand-wordmark {
    color: var(--butigal-green-dark);

    font-size: 20px;
    font-weight: 850;

    letter-spacing: 0.08em;
}

.desktop-nav {
    display: flex;
    align-items: center;

    padding: 7px;

    border:
        1px solid rgba(17, 107, 58, 0.08);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 5px 18px rgba(35, 63, 47, 0.04);

    gap: 2px;
}

.desktop-nav a {
    padding: 9px 15px;

    border-radius: 10px;

    color: #33413a;

    font-size: 13px;
    font-weight: 700;

    transition:
        background 160ms ease,
        color 160ms ease;
}

.desktop-nav a:hover {
    color: var(--butigal-green-dark);
    background: var(--butigal-green-soft);
}

.header-actions {
    display: flex;
    align-items: center;

    justify-self: end;

    gap: 10px;
}

.account-link {
    padding: 9px 12px;

    color: var(--butigal-green-dark);

    font-size: 13px;
    font-weight: 750;
}

.header-primary {
    padding: 11px 16px;

    border-radius: 12px;

    color: white;
    background: var(--butigal-green);

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(17, 107, 58, 0.17);

    transition:
        transform 150ms ease,
        background 150ms ease;
}

.header-primary:hover {
    transform: translateY(-1px);

    background:
        var(--butigal-green-dark);
}


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

.hero {
    position: relative;

    overflow: hidden;

    padding:
        96px 0 92px;

    background:
        linear-gradient(
            115deg,
            #fffdf4 0%,
            #fff9d9 45%,
            #f5f8f5 100%
        );
}

.hero::before {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -280px;
    bottom: -380px;

    border:
        1px solid rgba(17, 107, 58, 0.09);

    border-radius: 999px;

    content: "";
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(440px, 0.98fr);

    align-items: center;

    gap: 80px;
}

.eyebrow,
.section-kicker,
.cta-kicker {
    display: inline-flex;

    color: var(--butigal-green);

    font-size: 12px;
    font-weight: 850;

    letter-spacing: 0.14em;
}

.hero h1 {
    max-width: 720px;

    margin:
        17px 0 22px;

    color: #15251b;

    font-size: clamp(48px, 6.4vw, 78px);
    font-weight: 840;

    line-height: 0.98;

    letter-spacing: -0.047em;
}

.hero h1 span {
    display: block;

    margin-top: 7px;

    color: var(--butigal-green);
}

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

    margin: 0;

    color: var(--ink-soft);

    font-size: 18px;

    line-height: 1.7;
}

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

    margin-top: 31px;

    gap: 12px;
}

.button {
    display: inline-flex;

    min-height: 50px;

    align-items: center;
    justify-content: center;

    padding: 0 21px;

    border-radius: 13px;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #fff;

    background:
        var(--butigal-green);

    box-shadow:
        0 12px 24px rgba(17, 107, 58, 0.18);
}

.button-primary:hover {
    background:
        var(--butigal-green-dark);
}

.button-secondary {
    border:
        1px solid rgba(17, 107, 58, 0.16);

    color:
        var(--butigal-green-dark);

    background:
        rgba(255, 255, 255, 0.78);
}

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

    margin-top: 31px;

    gap: 17px 22px;
}

.trust-item {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #425148;

    font-size: 12px;
    font-weight: 650;
}

.trust-check {
    display: inline-grid;

    width: 22px;
    height: 22px;

    place-items: center;

    border-radius: 50%;

    color: var(--butigal-green);
    background: var(--butigal-green-soft);

    font-size: 12px;
    font-weight: 900;
}


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

.ecosystem-visual {
    position: relative;

    min-height: 500px;

    border:
        1px solid rgba(17, 107, 58, 0.08);

    border-radius:
        40px;

    background:
        rgba(255, 255, 255, 0.56);

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

.ecosystem-visual::before,
.ecosystem-visual::after {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px dashed rgba(17, 107, 58, 0.18);

    border-radius: 999px;

    content: "";

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

.ecosystem-visual::before {
    width: 340px;
    height: 340px;
}

.ecosystem-visual::after {
    width: 235px;
    height: 235px;
}

.ecosystem-center {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: column;

    width: 162px;
    height: 162px;

    align-items: center;
    justify-content: center;

    border:
        7px solid rgba(246, 201, 21, 0.95);

    border-radius: 50%;

    background:
        var(--butigal-green);

    color: white;

    box-shadow:
        0 18px 45px rgba(17, 107, 58, 0.24);

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

.ecosystem-b {
    font-size: 42px;
    font-weight: 900;

    line-height: 1;
}

.ecosystem-center strong {
    margin-top: 5px;

    font-size: 14px;

    letter-spacing: 0.08em;
}

.ecosystem-center small {
    margin-top: 5px;

    opacity: 0.7;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.13em;
}

.orbit-card {
    position: absolute;
    z-index: 5;

    display: flex;

    min-width: 155px;

    align-items: center;

    padding:
        12px 14px;

    border:
        1px solid rgba(17, 107, 58, 0.08);

    border-radius:
        17px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 12px 26px rgba(28, 54, 40, 0.10);

    gap: 10px;
}

.orbit-icon {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    border-radius:
        12px;

    color: var(--butigal-green);

    background:
        var(--butigal-yellow-soft);

    font-size: 17px;
    font-weight: 900;
}

.orbit-card strong {
    display: block;

    font-size: 12px;
}

.orbit-card small {
    display: block;

    margin-top: 2px;

    color: #829087;

    font-size: 9px;
    font-weight: 650;
}

.orbit-air {
    top: 44px;
    left: 50%;

    transform:
        translateX(-50%);
}

.orbit-ocean {
    top: 165px;
    right: 17px;
}

.orbit-food {
    right: 56px;
    bottom: 45px;
}

.orbit-trucking {
    left: 48px;
    bottom: 45px;
}

.orbit-pay {
    top: 165px;
    left: 17px;
}


/* ==========================================================
   SERVICES
========================================================== */

.services-section {
    padding:
        96px 0;

    background:
        #fff;
}

.section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.68fr);

    align-items: end;

    margin-bottom:
        38px;

    gap: 50px;
}

.section-heading h2,
.account-copy h2,
.model-intro h2 {
    margin:
        10px 0 0;

    color:
        #16231b;

    font-size:
        clamp(32px, 4vw, 48px);

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}

.section-heading p {
    margin:
        0;

    color:
        var(--ink-soft);

    font-size:
        15px;

    line-height:
        1.7;
}

.services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 350px;

    padding:
        25px;

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

    border-radius:
        var(--radius-medium);

    background:
        var(--surface);

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

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

.service-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(17, 107, 58, 0.20);

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

.service-card.featured {
    border-color:
        rgba(17, 107, 58, 0.18);

    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #f2faf5 100%
        );
}

.service-card.pay-card {
    background:
        linear-gradient(
            160deg,
            #fff 0%,
            #fff9df 100%
        );
}

.service-card.account-card {
    background:
        #17251d;

    color:
        #fff;
}

.service-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.service-icon {
    display: grid;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius:
        15px;

    color:
        var(--butigal-green);

    background:
        var(--butigal-yellow-soft);

    font-size:
        22px;
    font-weight:
        900;
}

.status {
    display: inline-flex;

    padding:
        6px 9px;

    border:
        1px solid #dfe5e1;

    border-radius:
        999px;

    color:
        #6e7c74;

    background:
        #f7f9f8;

    font-size:
        8px;
    font-weight:
        850;

    letter-spacing:
        0.08em;
}

.status-active {
    border-color:
        #cde7d8;

    color:
        var(--butigal-green);

    background:
        var(--butigal-green-soft);
}

.status-core {
    border-color:
        rgba(246, 201, 21, 0.35);

    color:
        #ffdc3f;

    background:
        rgba(246, 201, 21, 0.08);
}

.service-card h3 {
    margin:
        25px 0 10px;

    color:
        #17241c;

    font-size:
        21px;

    letter-spacing:
        -0.02em;
}

.account-card h3 {
    color:
        #fff;
}

.service-card p {
    margin:
        0;

    color:
        #647068;

    font-size:
        13px;

    line-height:
        1.7;
}

.account-card p {
    color:
        rgba(255, 255, 255, 0.65);
}

.service-tags {
    display: flex;
    flex-wrap: wrap;

    margin-top:
        22px;

    gap:
        6px;
}

.service-tags span {
    padding:
        6px 8px;

    border-radius:
        8px;

    color:
        #68756d;

    background:
        #f3f5f4;

    font-size:
        9px;
    font-weight:
        700;
}

.account-card .service-tags span {
    color:
        rgba(255, 255, 255, 0.72);

    background:
        rgba(255, 255, 255, 0.08);
}

.service-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top:
        auto;

    padding-top:
        25px;

    color:
        var(--butigal-green);

    font-size:
        12px;
    font-weight:
        800;
}

.service-link span {
    font-size:
        18px;
}

.account-card .service-link {
    color:
        #ffdc3f;
}


/* ==========================================================
   ACCOUNT / ECOSYSTEM
========================================================== */

.account-section {
    padding:
        34px 0 96px;
}

.account-panel {
    display: grid;
    grid-template-columns:
        1fr 0.88fr;

    align-items: center;

    overflow: hidden;

    padding:
        58px;

    border-radius:
        var(--radius-large);

    background:
        var(--butigal-yellow-soft);

    gap:
        70px;
}

.account-copy p {
    max-width:
        620px;

    margin:
        21px 0 27px;

    color:
        #536058;

    font-size:
        15px;

    line-height:
        1.75;
}

.button-dark {
    color:
        #fff;

    background:
        #17251d;
}

.account-diagram {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap:
        25px;
}

.account-user {
    display: flex;
    flex-direction: column;

    width:
        min(100%, 330px);

    align-items: center;

    padding:
        31px 24px;

    border:
        1px solid rgba(17, 107, 58, 0.11);

    border-radius:
        22px;

    background:
        #fff;

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

.account-user > span {
    display: grid;

    width:
        58px;
    height:
        58px;

    place-items:
        center;

    margin-bottom:
        13px;

    border:
        5px solid var(--butigal-yellow);

    border-radius:
        50%;

    color:
        #fff;

    background:
        var(--butigal-green);

    font-size:
        25px;
    font-weight:
        900;
}

.account-user strong {
    font-size:
        16px;
}

.account-user small {
    margin-top:
        4px;

    color:
        #87938c;

    font-size:
        10px;
}

.account-services {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px;
}

.account-services span {
    padding:
        9px 12px;

    border:
        1px solid rgba(17, 107, 58, 0.09);

    border-radius:
        999px;

    color:
        var(--butigal-green-dark);

    background:
        rgba(255, 255, 255, 0.74);

    font-size:
        10px;
    font-weight:
        800;
}


/* ==========================================================
   OPERATING MODEL
========================================================== */

.model-section {
    padding:
        96px 0;

    background:
        #f7f9f7;
}

.model-grid {
    display:
        grid;

    grid-template-columns:
        0.88fr 1.12fr;

    gap:
        90px;
}

.model-intro h2 {
    max-width:
        520px;
}

.model-points {
    display:
        grid;

    gap:
        13px;
}

.model-point {
    display:
        grid;

    grid-template-columns:
        auto 1fr;

    padding:
        22px;

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

    border-radius:
        16px;

    background:
        #fff;

    gap:
        18px;
}

.point-number {
    display:
        grid;

    width:
        43px;
    height:
        43px;

    place-items:
        center;

    border-radius:
        12px;

    color:
        var(--butigal-green);

    background:
        var(--butigal-green-soft);

    font-size:
        10px;
    font-weight:
        900;
}

.model-point h3 {
    margin:
        1px 0 5px;

    font-size:
        15px;
}

.model-point p {
    margin:
        0;

    color:
        #69766e;

    font-size:
        12px;

    line-height:
        1.6;
}


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

.portal-cta {
    padding:
        73px 0;

    color:
        #fff;

    background:
        var(--butigal-green);
}

.cta-inner {
    display:
        flex;

    align-items:
        center;
    justify-content:
        space-between;

    gap:
        50px;
}

.cta-kicker {
    color:
        #ffe05b;
}

.cta-inner h2 {
    margin:
        9px 0 8px;

    font-size:
        clamp(29px, 3.5vw, 43px);

    letter-spacing:
        -0.03em;
}

.cta-inner p {
    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        13px;

    line-height:
        1.7;
}

.button-light {
    flex:
        0 0 auto;

    color:
        var(--butigal-green-dark);

    background:
        #fff;
}


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

.portal-footer {
    padding:
        35px 0;

    color:
        #cad4ce;

    background:
        #111c16;
}

.footer-inner {
    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        28px;
}

.footer-brand {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}

.footer-brand strong {
    color:
        #fff;

    font-size:
        16px;

    letter-spacing:
        0.08em;
}

.footer-brand span,
.footer-copy {
    font-size:
        9px;
}

.footer-services {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        16px;

    font-size:
        9px;
}


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

@media (max-width: 1040px) {

    .portal-header-inner {
        grid-template-columns:
            1fr auto;
    }

    .desktop-nav {
        display:
            none;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

    .hero-copy {
        max-width:
            760px;
    }

    .ecosystem-visual {
        width:
            min(100%, 650px);

        margin-inline:
            auto;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .account-panel {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .model-grid {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

}

@media (max-width: 720px) {

    .portal-container {
        width:
            min(100% - 28px, 1180px);
    }

    .portal-header-inner {
        width:
            min(100% - 24px, 1240px);

        min-height:
            66px;

        gap:
            10px;
    }

    .brand-logo {
        max-width:
            104px;

        height:
            34px;
    }

    .brand-wordmark {
        font-size:
            16px;
    }

    .account-link {
        display:
            none;
    }

    .header-primary {
        padding:
            9px 12px;

        font-size:
            11px;
    }

    .hero {
        padding:
            68px 0 67px;
    }

    .hero h1 {
        font-size:
            clamp(45px, 15vw, 62px);
    }

    .hero-lead {
        font-size:
            15px;
    }

    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .button {
        width:
            100%;
    }

    .hero-trust {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            10px;
    }

    .ecosystem-visual {
        min-height:
            425px;
    }

    .ecosystem-visual::before {
        width:
            270px;
        height:
            270px;
    }

    .ecosystem-visual::after {
        width:
            185px;
        height:
            185px;
    }

    .ecosystem-center {
        width:
            130px;
        height:
            130px;
    }

    .orbit-card {
        min-width:
            128px;

        padding:
            9px 10px;
    }

    .orbit-icon {
        width:
            31px;
        height:
            31px;

        flex-basis:
            31px;
    }

    .orbit-air {
        top:
            25px;
    }

    .orbit-ocean {
        top:
            132px;
        right:
            6px;
    }

    .orbit-food {
        right:
            17px;
        bottom:
            31px;
    }

    .orbit-trucking {
        left:
            17px;
        bottom:
            31px;
    }

    .orbit-pay {
        top:
            132px;
        left:
            6px;
    }

    .services-section,
    .model-section {
        padding:
            70px 0;
    }

    .section-heading {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

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

    .service-card {
        min-height:
            325px;
    }

    .account-section {
        padding:
            16px 0 70px;
    }

    .account-panel {
        width:
            min(100% - 28px, 1180px);

        padding:
            34px 22px;

        border-radius:
            22px;
    }

    .cta-inner {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-inner {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .footer-brand {
        align-items:
            center;
    }

    .footer-services {
        justify-content:
            center;
    }

}

@media (max-width: 430px) {

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

    .ecosystem-center {
        width:
            118px;
        height:
            118px;
    }

    .ecosystem-b {
        font-size:
            34px;
    }

    .orbit-card {
        min-width:
            115px;
    }

    .orbit-card strong {
        font-size:
            10px;
    }

    .orbit-card small {
        font-size:
            8px;
    }

    .orbit-ocean {
        top:
            122px;
    }

    .orbit-pay {
        top:
            122px;
    }

}