:root {
    --ink: #171b1f;
    --muted: #687078;
    --line: #e2e5e7;
    --paper: #f6f6f5;
    --white: #fff;
    --red: #df1f3d;
    --red-dark: #b91631;
    --blue: #36a9e1;
    --green: #76b82a;
    --yellow: #f3c532;
    --shadow: 0 22px 60px rgba(24,28,32,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.portal-header { display: flex; width: 100%; min-height: 78px; padding: 0 max(28px,calc((100vw - 1220px)/2)); align-items: center; justify-content: space-between; gap: 24px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.portal-brand { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.portal-brand img { display: block; width: 166px; height: auto; }
.portal-brand span { padding-left: 18px; color: var(--muted); border-left: 1px solid var(--line); font-size: 12px; font-weight: 750; }
.admin-entry { display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; gap: 12px; min-width: 278px; padding: 10px 14px; align-items: center; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.admin-entry:hover { border-color: #b9c0c5; box-shadow: 0 10px 28px rgba(24,28,32,.08); transform: translateY(-1px); }
.admin-entry__icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--muted); background: var(--paper); border-radius: 10px; }
.admin-entry__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.admin-entry > span:nth-child(2) { display: grid; }
.admin-entry small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-entry strong { font-size: 13px; }
.admin-entry b { color: var(--red); }

.portal-shell { width: min(1220px,calc(100% - 56px)); min-height: calc(100vh - 170px); margin: 0 auto; padding: 64px 0 86px; }
.portal-hero { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 70px; align-items: end; margin-bottom: 44px; padding: 0 4px; }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.portal-hero h1,.coming-soon h1,.login-card h1 { max-width: 820px; margin: 0 0 18px; font-size: clamp(42px,5.4vw,72px); line-height: 1.01; letter-spacing: -.055em; }
.portal-hero > div > p:last-child,.coming-soon > p,.login-card > p { max-width: 760px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.62; }
.portal-proof { display: grid; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(24,28,32,.045); }
.portal-proof span { display: flex; gap: 12px; padding: 13px 16px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.portal-proof span + span { border-top: 1px solid var(--line); }
.portal-proof b { display: grid; width: 28px; height: 28px; place-items: center; color: var(--ink); background: #fff3c8; border-radius: 50%; font-size: 9px; }

.portal-grid { display: grid; grid-template-columns: 1.25fr .82fr .82fr; gap: 16px; }
.portal-card { position: relative; display: flex; min-height: 410px; padding: 26px; flex-direction: column; overflow: hidden; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 20px; text-decoration: none; box-shadow: 0 10px 35px rgba(24,28,32,.035); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.portal-card::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: var(--blue); }
.portal-card:nth-child(3)::before { background: var(--yellow); }
.portal-card:hover { border-color: #bfc5c9; box-shadow: var(--shadow); transform: translateY(-4px); }
.portal-card--smart { color: white; background: #20252a; border-color: #20252a; }
.portal-card--smart::before { height: 5px; background: linear-gradient(90deg,var(--green) 0 33%,var(--red) 33% 66%,var(--blue) 66%); }
.card-topline { display: flex; gap: 13px; align-items: center; }
.card-topline > small { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.portal-card--smart .card-topline > small { color: #b9c0c4; }
.card-icon { display: grid; width: 56px; height: 56px; place-items: center; color: var(--ink); background: var(--paper); border-radius: 15px; }
.card-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-icon--smart { color: var(--red); background: #fff; }
.card-icon--video { color: #097898; background: #eaf8fc; }
.card-icon--camera { color: #836300; background: #fff7da; }
.card-state { position: absolute; top: 24px; right: 24px; padding: 6px 10px; color: #146b48; background: #e4f6ec; border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.card-state--soon { color: var(--muted); background: var(--paper); }
.portal-card h2 { margin: 34px 0 12px; font-size: clamp(27px,2.5vw,37px); line-height: 1.05; letter-spacing: -.04em; }
.portal-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.portal-card--smart p { color: #c3c8cc; }
.smart-areas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 24px 0; }
.smart-areas span { display: flex; gap: 8px; align-items: center; color: #e8eaeb; font-size: 12px; font-weight: 700; }
.smart-areas span::before { display: grid; width: 17px; height: 17px; place-items: center; content: "✓"; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 9px; font-weight: 900; }
.card-action { display: flex; margin-top: auto; padding-top: 20px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-size: 13px; }
.portal-card--smart .card-action { border-color: #41474c; }
.card-action b { color: var(--red); font-size: 18px; transition: transform .18s ease; }
.portal-card--smart .card-action b { color: var(--yellow); }
.portal-card:hover .card-action b { transform: translateX(4px); }

.portal-footer { display: flex; width: min(1220px,calc(100% - 56px)); margin: 0 auto; padding: 26px 0 34px; align-items: center; justify-content: space-between; gap: 22px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; }
.portal-footer img { width: 112px; }
.portal-footer a { color: var(--red); font-weight: 800; text-decoration: none; }
.coming-soon { position: relative; max-width: 820px; margin: 50px auto; padding: 58px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.coming-soon::before { position: absolute; inset: 0 auto 0 0; width: 5px; content: ""; background: linear-gradient(var(--green) 0 33%,var(--red) 33% 66%,var(--blue) 66%); }
.portal-button,.login-back { display: inline-flex; margin-top: 18px; color: var(--red); font-weight: 800; text-decoration: none; }

.login-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; }
.login-card { width: min(470px,100%); padding: 40px; background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.login-card .portal-brand { margin-bottom: 46px; }
.login-card .portal-brand img { width: 175px; }
.login-card h1 { font-size: 42px; }
.login-card form { display: grid; gap: 10px; margin: 28px 0; }
.login-card label { font-size: 12px; font-weight: 800; }
.login-card input { height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 24px; letter-spacing: .25em; }
.login-card input:focus { outline: 3px solid rgba(54,169,225,.22); border-color: var(--blue); }
.login-card button { height: 52px; color: white; background: var(--red); border: 0; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 800; }
.login-card button:hover { background: var(--red-dark); }
.login-error { padding: 12px 14px; color: #a03221; background: #fff0ed; border-radius: 10px; font-weight: 700; }

@media(max-width:900px) {
    .portal-hero { grid-template-columns: 1fr; gap: 28px; }
    .portal-proof { grid-template-columns: repeat(3,1fr); }
    .portal-proof span + span { border-top: 0; border-left: 1px solid var(--line); }
    .portal-grid { grid-template-columns: 1fr 1fr; }
    .portal-card--smart { grid-column: 1/-1; }
}
@media(max-width:620px) {
    .portal-header { min-height: 68px; padding: 0 16px; }
    .portal-brand img { width: 132px; }
    .portal-brand span,.admin-entry > span:nth-child(2) { display: none; }
    .admin-entry { grid-template-columns: 34px 16px; min-width: 0; padding: 8px 10px; }
    .admin-entry__icon { width: 34px; height: 34px; }
    .portal-shell { width: min(100% - 28px,1220px); padding: 42px 0 62px; }
    .portal-hero h1 { font-size: 42px; }
    .portal-proof { grid-template-columns: 1fr; }
    .portal-proof span + span { border-top: 1px solid var(--line); border-left: 0; }
    .portal-grid { grid-template-columns: 1fr; }
    .portal-card--smart { grid-column: auto; }
    .portal-card { min-height: 360px; padding: 22px; }
    .portal-footer { width: min(100% - 28px,1220px); align-items: flex-start; flex-direction: column; }
    .coming-soon { padding: 40px 26px; }
}

/* BONMARIO SMART CARD LIGHT START */


/* ==========================================================
   FEATURED SMART HOME CARD
   ========================================================== */

.portal-card--smart {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    color: #202833 !important;

    background:
        radial-gradient(
            circle at 94% 87%,
            rgba(49, 157, 218, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 100%,
            rgba(43, 175, 112, .08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 64%,
            #f2f9fd 100%
        ) !important;

    border:
        1px solid #d8e3e7 !important;

    box-shadow:
        0 18px 45px
        rgba(26, 45, 57, .08) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


/* ==========================================================
   BONMARIO TOP STRIPE
   green + blue dominate, red smaller
   ========================================================== */

.portal-card--smart::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: auto !important;
    height: 4px !important;

    background:
        linear-gradient(
            90deg,

            #6fbd2a 0%,
            #6fbd2a 32%,

            #e51f3f 32%,
            #e51f3f 50%,

            #27a6d9 50%,
            #27a6d9 100%
        ) !important;

    z-index: 4 !important;
}


/* ==========================================================
   DECORATIVE HOUSE
   no HTML needed
   ========================================================== */

.portal-card--smart::after {
    content: "" !important;

    position: absolute !important;

    right: -4px !important;
    bottom: 48px !important;

    width: 205px !important;
    height: 170px !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Ccircle cx='142' cy='102' r='78' fill='%23dff2fc' fill-opacity='.75'/%3E%3Cpath d='M55 92L119 39L183 92' fill='none' stroke='%23ffffff' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M70 83V151H169V83' fill='%23d9effb' stroke='%23ffffff' stroke-width='7' stroke-linejoin='round'/%3E%3Crect x='104' y='111' width='30' height='40' rx='3' fill='%236cbce8' stroke='%23ffffff' stroke-width='5'/%3E%3Crect x='79' y='99' width='20' height='23' rx='2' fill='%2392cfee' stroke='%23ffffff' stroke-width='4'/%3E%3Crect x='142' y='99' width='20' height='23' rx='2' fill='%2392cfee' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M184 151V125' stroke='%23599935' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M184 88C168 104 164 118 170 129C174 136 181 139 184 139C188 139 195 136 199 129C205 118 200 104 184 88Z' fill='%2376b82a'/%3E%3C/svg%3E") !important;

    opacity: .88 !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


/* ==========================================================
   KEEP CONTENT ABOVE ILLUSTRATION
   ========================================================== */

.portal-card--smart > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   ICON BOX
   ========================================================== */

.portal-card--smart .card-icon,
.portal-card--smart .card-icon--smart {
    color: #e51f3f !important;

    background:
        #ffffff !important;

    border:
        1px solid #dce5e8 !important;

    box-shadow:
        0 7px 18px
        rgba(25, 43, 55, .07) !important;
}


/* ==========================================================
   SMALL LABEL
   ========================================================== */

.portal-card--smart .card-topline small,
.portal-card--smart .card-topline span:not(.card-state) {
    color: #56636c !important;
}


/* ==========================================================
   AVAILABLE BADGE
   ========================================================== */

.portal-card--smart .card-state {
    color: #106b46 !important;

    background:
        #e3f7eb !important;

    border:
        1px solid #caead8 !important;
}


/* ==========================================================
   TITLE
   ========================================================== */

.portal-card--smart h2,
.portal-card--smart h3 {
    color:
        #171d24 !important;

    text-shadow:
        none !important;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.portal-card--smart > p,
.portal-card--smart .card-description {
    position: relative;

    max-width: 88%;

    color:
        #606c75 !important;

    z-index: 3;
}


/* ==========================================================
   SMART AREAS
   ========================================================== */

.portal-card--smart .smart-areas {
    position: relative;

    max-width: 390px;

    z-index: 4;
}

.portal-card--smart .smart-areas span {
    color:
        #26313a !important;
}


/* Existing check circles */

.portal-card--smart
.smart-areas span::before {
    color:
        #ffffff !important;

    background:
        #71bc2b !important;

    border:
        0 !important;

    box-shadow:
        0 2px 7px
        rgba(113, 188, 43, .16) !important;
}


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

.portal-card--smart .card-action {
    position: relative;

    z-index: 5;

    min-height: 56px;

    padding:
        0 20px !important;

    color:
        #1287c2 !important;

    background:
        rgba(255, 255, 255, .97) !important;

    border:
        1px solid #d9e3e7 !important;

    border-radius:
        14px !important;

    box-shadow:
        0 6px 18px
        rgba(27, 47, 60, .06) !important;
}


/* CTA arrow */

.portal-card--smart .card-action b,
.portal-card--smart .card-action span:last-child {
    color:
        #e51f3f !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

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

    border-color:
        #bcd9e6 !important;

    box-shadow:
        0 24px 58px
        rgba(26, 45, 57, .12) !important;
}

.portal-card--smart:hover .card-action {
    border-color:
        #c4dce6 !important;

    background:
        #ffffff !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .portal-card--smart::after {
        right:
            -34px !important;

        bottom:
            55px !important;

        width:
            165px !important;

        height:
            140px !important;

        opacity:
            .58 !important;
    }

    .portal-card--smart > p,
    .portal-card--smart .card-description {
        max-width:
            100%;
    }
}


/* BONMARIO SMART CARD LIGHT END */

/* SMART CARD STATUS FIX START */

/* Badge DOST?PNY ma by? ma?? pastylk? w prawym g?rnym rogu */
.portal-card--smart > .card-state {
    position: absolute !important;

    top: 22px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;

    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;

    padding: 6px 11px !important;

    color: #126b48 !important;
    background: #e3f7eb !important;

    border: 1px solid #caead8 !important;
    border-radius: 999px !important;

    box-shadow: none !important;

    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;

    z-index: 8 !important;
}

/* Pozosta?e elementy karty mog? by? relative, ale NIE status */
.portal-card--smart > .card-topline,
.portal-card--smart > h2,
.portal-card--smart > p,
.portal-card--smart > .smart-areas,
.portal-card--smart > .card-action {
    position: relative;
    z-index: 2;
}

/* SMART CARD STATUS FIX END */