/* mCloud — Landing page sections (homepage only; tokens and chrome live in site.css) */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px);
    background: var(--bg);
}
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 60% at 75% 40%, #000 0%, transparent 70%);
    opacity: .7;
    pointer-events: none;
}

.lp-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}

.lp-hero__title {
    margin: 0;
    font-size: clamp(2.5rem, 1.55rem + 3.5vw, 4.25rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
}
.lp-hero__title span { color: var(--brand); }

.lp-hero__lead {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    line-height: 1.55;
    color: var(--fg-3);
    text-wrap: pretty;
}

/* Domain search */
.lp-search { margin-top: 40px; max-width: 620px; }
.lp-search__label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
}
.lp-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-sm), 0 8px 24px -12px rgba(16, 24, 40, .12);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-search__field:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint);
}
.lp-search__icon {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--fg-3);
    stroke-width: 1.75;
    stroke-linecap: round;
}
.lp-search__field input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font);
    font-size: 17px;
    color: var(--fg);
}
.lp-search__field input::placeholder { color: var(--fg-3); opacity: .8; }
.lp-search__field input:focus-visible { outline: 0; }
.lp-search__actions { display: flex; gap: 4px; flex: none; }
.lp-search__actions .lp-btn { height: 48px; padding: 0 22px; }

.lp-search__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 16px;
}
.lp-tlds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--fg-3);
}
.lp-tlds strong { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--fg); }

/* Product mock */
.lp-hero__visual { position: relative; padding: 24px 0 40px 24px; }
.lp-hero__visual::before {
    content: "";
    position: absolute;
    inset: 0 32px 16px 0;
    border-radius: 16px;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 35%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
        var(--brand-tint);
}
.lp-mock {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateX(32px);
}
.lp-mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.lp-mock__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.lp-mock__url {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    height: 28px;
    margin-left: 12px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-3);
    white-space: nowrap;
    overflow: hidden;
}
.lp-mock__url svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--ok); stroke-width: 2; }
.lp-mock__body { padding: 24px; }
.lp-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--line-2);
}
.lp-mock__domain { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--fg); }
.lp-mock__steps { margin: 0; padding: 8px 0 0; list-style: none; }
.lp-mock__steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 14.5px;
    color: var(--fg);
}
.lp-mock__steps li + li { border-top: 1px solid var(--line); }
.lp-mock__steps i {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ok);
}
.lp-mock__steps i::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.lp-mock__steps code {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-3);
}

/* Trust strip */
.lp-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.lp-trust__inner {
    display: flex;
    align-items: center;
    gap: 16px 48px;
    min-height: 88px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.lp-trust__label { flex: none; margin: 0; font-size: 14px; color: var(--fg-3); }
.lp-trust__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 40px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Plans
   -------------------------------------------------------------------------- */

.lp-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    overflow: hidden;
}
.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
}
.lp-plan + .lp-plan { border-left: 1px solid var(--line); }
.lp-plan--featured { background: color-mix(in srgb, var(--brand) 4%, var(--bg)); }
.lp-plan--featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--brand);
}
.lp-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.lp-plan__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.lp-plan__price {
    display: flex;
    align-items: flex-start;
    margin: 24px 0 4px;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.lp-plan__cur { margin: 7px 4px 0 0; font-size: 16px; font-weight: 500; color: var(--fg-3); }
.lp-plan__amt { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.lp-plan__dec { margin-top: 5px; font-size: 17px; font-weight: 500; color: var(--fg-3); }
.lp-plan__cycle { margin: 6px 0 24px; font-size: 14px; color: var(--fg-3); }
.lp-plan__features {
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.lp-plan__features li {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--fg-2);
}
.lp-plan__features svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-plans__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
    margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Domains
   -------------------------------------------------------------------------- */

.lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 7vw, 96px);
}
.lp-split__aside {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.lp-table { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lp-table th, .lp-table td { padding: 14px 24px; border-bottom: 1px solid var(--line); text-align: left; }
.lp-table thead th {
    padding-top: 16px;
    padding-bottom: 12px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fg-3);
    background: var(--bg-2);
}
.lp-table thead th:last-child, .lp-table td { text-align: right; }
.lp-table tbody th { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--fg); }
.lp-table td { font-size: 15px; font-weight: 500; color: var(--fg); }
.lp-table td span { font-size: 13px; font-weight: 400; color: var(--fg-3); }
.lp-table__more { padding: 16px 24px; }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.lp-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--line);
    list-style: none;
    overflow: hidden;
}
.lp-service {
    position: relative;
    display: block;
    height: 100%;
    padding: 32px 32px 36px;
    background: var(--bg);
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.lp-service:hover { background: var(--bg-2); }
.lp-service::after {
    content: "\2192";
    position: absolute;
    top: 30px;
    right: 32px;
    color: var(--fg-3);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
}
.lp-service:hover::after { opacity: 1; transform: none; }
.lp-service svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-service h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.lp-service p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Why (inverse)
   -------------------------------------------------------------------------- */

.lp-section--ink { background: var(--inv-bg); color: var(--inv-fg-2); }
.lp-section--ink .lp-h2,
.lp-section--ink h3 { color: var(--inv-fg); }
.lp-section--ink .lp-eyebrow { color: var(--brand-bright); }
.lp-section--ink .lp-lead { color: var(--inv-fg-2); }

.lp-why {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: start;
}
.lp-why__head { position: sticky; top: 112px; }
.lp-why__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-why__list li { padding: 28px 0 32px; border-top: 1px solid var(--inv-line); }
.lp-why__num { font-family: var(--mono); font-size: 13px; color: var(--brand-bright); }
.lp-why__list h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.lp-why__list p { margin: 0; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   News (inside #main-body)
   -------------------------------------------------------------------------- */

.lp-home #main-body.lp-news { min-height: 0; padding: 0; background: var(--bg); }
.lp-home #main-body.lp-news > .container {
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.lp-home #main-body.lp-news .primary-content { padding: 0; }
.lp-news__inner {
    padding: var(--section) 0 0;
}
.lp-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.lp-post {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.lp-post time { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
.lp-post h3 { margin: 12px 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.lp-post h3 a { color: var(--fg); text-decoration: none; }
.lp-post h3 a:hover { color: var(--brand); }
.lp-post p { margin: 0; font-size: 15px; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.lp-faq {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: start;
}
.lp-faq__head { position: sticky; top: 112px; }
.lp-faq__head .lp-link { margin-top: 24px; }
.lp-faq__list { border-top: 1px solid var(--line); }
.lp-faq__item { border-bottom: 1px solid var(--line); }
.lp-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.lp-faq__item summary:hover h3 { color: var(--brand); }
.lp-faq__item summary svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--fg-3);
    stroke-width: 1.75;
    stroke-linecap: round;
    transition: transform .2s ease;
}
.lp-faq__item[open] summary svg { transform: rotate(45deg); }
.lp-faq__item p { margin: -6px 0 0; padding: 0 48px 28px 0; font-size: 16px; line-height: 1.65; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.lp-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 96px) 0;
    background: #0e6fb5;
    color: rgba(255, 255, 255, .82);
}
[data-bs-theme="dark"] .lp-home .lp-cta { background: #0a4f82; }
.lp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
    mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.lp-cta__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px 64px;
}
.lp-cta__title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff !important;
}
.lp-cta__lead { margin: 16px 0 0; max-width: 48ch; font-size: 17px; }
.lp-cta .lp-actions { margin-top: 0; }
.lp-cta .lp-btn { height: 48px; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Plans — short description
   -------------------------------------------------------------------------- */

.lp-plan__desc { margin: 12px 0 0; min-height: 4.5em; font-size: 14.5px; line-height: 1.5; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.lp-section--compact { padding-bottom: 0; }
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 48px;
    margin: 0;
    padding: 0 0 var(--section);
    list-style: none;
    counter-reset: none;
}
.lp-step { position: relative; padding-top: 32px; border-top: 1px solid var(--line); }
.lp-step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--brand);
}
.lp-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg);
}
.lp-step h3 { margin: 20px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.lp-step p { margin: 0; max-width: 36ch; font-size: 15.5px; line-height: 1.6; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Feature rows + product UI illustrations
   -------------------------------------------------------------------------- */

.lp-features { display: grid; gap: clamp(80px, 10vw, 128px); }
.lp-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(40px, 7vw, 96px);
}
.lp-feature--reverse .lp-feature__copy { order: 2; }
.lp-feature__copy .lp-lead { max-width: 48ch; }

.lp-checks { margin: 28px 0 0; padding: 0; list-style: none; }
.lp-checks li {
    position: relative;
    padding: 10px 0 10px 32px;
    border-top: 1px solid var(--line);
    font-size: 15.5px;
    color: var(--fg);
}
.lp-checks li:last-child { border-bottom: 1px solid var(--line); }
.lp-checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--brand-tint);
}
.lp-checks li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 4px;
    height: 8px;
    margin-top: -6px;
    border: solid var(--brand);
    border-width: 0 1.75px 1.75px 0;
    transform: rotate(45deg);
}

/* Visual stage: dotted brand panel behind a product window */
.lp-feature__visual { position: relative; padding: 32px; }
.lp-feature__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand) 30%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
        var(--brand-tint);
}
.lp-ui {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-size: 14px;
}
.lp-ui__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}
.lp-ui__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.lp-ui__bar .lp-mock__url { margin-left: 12px; }
.lp-ui__title { margin-left: 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ui__title b { font-weight: 500; color: #ff6c2c; }
.lp-ui svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* cPanel */
.lp-ui__cpanel { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.lp-ui__stats { padding: 20px; border-right: 1px solid var(--line); background: var(--bg); }
.lp-meter + .lp-meter { margin-top: 18px; }
.lp-meter span { display: block; font-size: 12px; color: var(--fg-3); }
.lp-meter b { display: block; margin: 2px 0 8px; font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.lp-meter i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.lp-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 3px; background: var(--brand); }
.lp-ui__tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 20px;
    list-style: none;
}
.lp-ui__tools li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
}
.lp-ui__tools svg {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 8px;
    background: var(--brand-tint);
    color: var(--brand);
}

/* Email */
.lp-ui__mail { padding: 8px 0; }
.lp-ui__mailhead { display: flex; align-items: center; gap: 8px; padding: 12px 20px 14px; }
.lp-ui__mailhead b { font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-ui__mailhead span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 11.5px;
    font-weight: 600;
}
.lp-mail {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
}
.lp-mail > div { flex: 1; min-width: 0; }
.lp-mail b { display: block; font-size: 14px; font-weight: 500; color: var(--fg); }
.lp-mail p { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mail time { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.lp-mail--unread b { font-weight: 600; }
.lp-mail--unread::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--brand);
}
.lp-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: hsl(var(--h) 70% 92%);
    color: hsl(var(--h) 55% 30%);
    font-size: 12px;
    font-weight: 600;
}
[data-bs-theme="dark"] .lp-home .lp-avatar { background: hsl(var(--h) 40% 22%); color: hsl(var(--h) 70% 80%); }

/* SSL */
.lp-ui__ssl { position: relative; padding: 150px 28px 28px; }
.lp-ui__skeleton i { display: block; height: 10px; margin-bottom: 14px; border-radius: 5px; background: var(--bg-2); }
.lp-ui__skeleton div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.lp-ui__skeleton div i { height: 72px; margin: 0; border-radius: 8px; }
.lp-ui__pop {
    position: absolute;
    top: 14px;
    left: 20px;
    width: min(300px, calc(100% - 40px));
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
}
.lp-ui__pop p { margin: 0; }
.lp-ui__pophead { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-ui__pophead svg { width: 18px; height: 18px; color: var(--ok); stroke-width: 2; }
.lp-ui__popline { display: flex; align-items: center; gap: 8px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--fg-2); }
.lp-tick { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); }
.lp-tick::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
.lp-ui__pop dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 12.5px; }
.lp-ui__pop dt { font-weight: 400; color: var(--fg-3); }
.lp-ui__pop dd { margin: 0; font-family: var(--mono); color: var(--fg); text-align: right; }

/* Support chat */
.lp-chat { display: grid; gap: 16px; padding: 24px; }
.lp-chat__msg { display: flex; align-items: flex-end; gap: 10px; }
.lp-chat__msg p { margin: 0; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.lp-chat__msg--client p { max-width: 80%; border-bottom-left-radius: 4px; background: var(--bg-2); color: var(--fg); }
.lp-chat__msg--team { flex-direction: column; align-items: flex-end; gap: 6px; }
.lp-chat__msg--team p { max-width: 85%; border-bottom-right-radius: 4px; background: var(--brand); color: var(--on-brand); }
.lp-chat__by { font-size: 12px; color: var(--fg-3); }

/* Support channels */
.lp-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.lp-channel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.lp-channel:hover { border-color: var(--line-2); background: var(--bg-2); }
.lp-channel svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-channel b { display: block; font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-channel span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   Who it's for
   -------------------------------------------------------------------------- */

.lp-uses {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-use {
    display: flex;
    gap: 16px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    text-decoration: none !important;
    transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-use:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.lp-use svg {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 10px;
    background: var(--brand-tint);
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-use h3 { margin: 2px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.lp-use p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-3); }

/* --------------------------------------------------------------------------
   CTA photo
   -------------------------------------------------------------------------- */

.lp-cta { padding-bottom: 0; }
.lp-cta__inner { align-items: flex-end; flex-wrap: nowrap; }
.lp-cta__copy { flex: 1; padding-bottom: clamp(64px, 8vw, 96px); }
.lp-cta .lp-actions { margin-top: 32px; }
.lp-cta__photo { flex: none; display: block; width: 440px; height: auto; margin: -24px 0 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
    .lp-hero__grid,
    .lp-split,
    .lp-why,
    .lp-faq { grid-template-columns: minmax(0, 1fr); }

    .lp-hero__visual { max-width: 520px; }
    .lp-why__head,
    .lp-faq__head { position: static; }

    .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plan + .lp-plan { border-left: 0; }
    .lp-plan:nth-child(even) { border-left: 1px solid var(--line); }
    .lp-plan:nth-child(n+3) { border-top: 1px solid var(--line); }

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

    .lp-trust__inner { flex-direction: column; align-items: flex-start; }
    .lp-trust__list { justify-content: flex-start; }


    .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-feature { grid-template-columns: minmax(0, 1fr); }
    .lp-feature--reverse .lp-feature__copy { order: 0; }
    .lp-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lp-cta__inner { flex-wrap: wrap; }
    .lp-cta__copy { flex-basis: 100%; padding-bottom: 0; }
    .lp-cta__photo { width: 280px; margin: 8px auto 0; }
}

@media (max-width: 639.98px) {
    .lp-search__field { flex-wrap: wrap; padding: 6px; }
    .lp-search__icon { margin-left: 10px; }
    .lp-search__field input { flex-basis: calc(100% - 40px); }
    .lp-search__actions { width: 100%; }
    .lp-search__actions .lp-btn { flex: 1; }
    .lp-search__actions .lp-btn--ghost { border-color: var(--line); }

    .lp-hero__visual { padding-left: 0; }
    .lp-mock { transform: none; }
    .lp-hero__visual::before { inset: 0 -8px 16px 24px; }

    .lp-plans { grid-template-columns: minmax(0, 1fr); }
    .lp-plan:nth-child(even) { border-left: 0; }
    .lp-plan + .lp-plan { border-top: 1px solid var(--line); }

    .lp-services { grid-template-columns: minmax(0, 1fr); }
    .lp-service { padding: 28px 24px; }
    .lp-why__list { grid-template-columns: minmax(0, 1fr); }
    .lp-head--row { flex-direction: column; align-items: flex-start; }

    .lp-table th, .lp-table td { padding-left: 20px; padding-right: 20px; }
    .lp-faq__item p { padding-right: 0; }


    .lp-feature__visual { padding: 16px; margin: 0 calc(var(--gutter) * -0.5); }
    .lp-ui__cpanel { grid-template-columns: minmax(0, 1fr); }
    .lp-ui__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .lp-meter + .lp-meter { margin-top: 0; }
    .lp-ui__tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; gap: 8px; }
    .lp-ui__tools li { padding: 8px; font-size: 12px; }
    .lp-ui__tools svg { width: 28px; height: 28px; padding: 6px; }
    .lp-channels, .lp-uses { grid-template-columns: minmax(0, 1fr); }
}


/* Plans: on phones, show the first five features and let people expand the rest */
.lp-plan__toggle { display: none; }

@media (max-width: 639.98px) {
    .lp-plan:not(.is-open) .lp-plan__extra { display: none; }
    .lp-plan__toggle {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 6px 0;
        border: 0;
        background: none;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 500;
        color: var(--brand);
        cursor: pointer;
    }
    .lp-plan__toggle svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }
    .lp-plan.is-open .lp-plan__toggle svg { transform: rotate(180deg); }
    .lp-plan__toggle:focus:not(:focus-visible) { outline: none; }
}

/* --------------------------------------------------------------------------
   Full-bleed photo band (Maputo)
   -------------------------------------------------------------------------- */

.lp-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 720px);
    overflow: hidden;
    background: #0b1220;
    isolation: isolate;
}
.lp-band__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}
.lp-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, .78) 100%),
        linear-gradient(90deg, rgba(11, 18, 32, .55) 0%, rgba(11, 18, 32, 0) 60%);
}
.lp-band__inner { padding-top: 160px; padding-bottom: clamp(56px, 7vw, 96px); color: rgba(255, 255, 255, .85); }
.lp-band .lp-eyebrow { color: #8fd3f5; }
.lp-band__title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff !important;
    text-wrap: balance;
}
.lp-band__lead { max-width: 52ch; margin: 20px 0 32px; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Two photos, edge to edge
   -------------------------------------------------------------------------- */

.lp-duo { display: grid; grid-template-columns: 1fr 1fr; background: #0b1220; }
.lp-duo__item { position: relative; margin: 0; min-height: clamp(480px, 46vw, 680px); overflow: hidden; isolation: isolate; }
.lp-duo__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.lp-duo__img--top { object-position: center 20%; }
.lp-duo__img--right { object-position: 62% center; }
.lp-duo__item:hover .lp-duo__img { transform: scale(1.03); }
.lp-duo__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0) 30%, rgba(11, 18, 32, .55) 55%, rgba(11, 18, 32, .92) 100%);
}
.lp-duo__caption {
    position: absolute;
    inset: auto 0 0;
    padding: clamp(28px, 4vw, 56px);
    color: rgba(255, 255, 255, .85);
}
.lp-duo__caption .lp-eyebrow { margin-bottom: 12px; color: #8fd3f5; }
.lp-duo__caption h2 {
    margin: 0;
    font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff !important;
}
.lp-duo__caption p:not(.lp-eyebrow) { max-width: 40ch; margin: 12px 0 24px; font-size: 16px; line-height: 1.55; }

@media (max-width: 1023.98px) {
    .lp-trust__list.lp-paylogos { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
    .lp-duo { grid-template-columns: 1fr; }
    .lp-duo__item { min-height: 520px; }
    .lp-band { min-height: 560px; }
    .lp-band::after { background: linear-gradient(180deg, rgba(11, 18, 32, .1) 0%, rgba(11, 18, 32, .85) 75%); }
}
@media (max-width: 639.98px) {
    .lp-paylogos { gap: 8px; }
    .lp-paylogos li { min-width: 0; height: 42px; padding: 0 12px; }
    .lp-paylogos img { height: 18px; }
    .lp-paylogos__square img { height: 26px !important; }
}

/* --------------------------------------------------------------------------
   Hosting types
   -------------------------------------------------------------------------- */

.lp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-type {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
}
.lp-type > svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 10px;
    background: var(--brand-tint);
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lp-type h3 { margin: 24px 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.lp-type > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.lp-type .lp-checks { flex: 1; margin: 24px 0 28px; }
.lp-type .lp-checks li { font-size: 14.5px; }

.lp-type--dark { border-color: transparent; background: var(--inv-bg); }
.lp-type--dark h3 { color: var(--inv-fg); }
.lp-type--dark > p { color: var(--inv-fg-2); }
.lp-type--dark > svg { background: rgba(41, 169, 225, .14); stroke: var(--brand-bright); }
.lp-type--dark .lp-checks li { border-color: var(--inv-line); color: var(--inv-fg); }
.lp-type--dark .lp-checks li::before { background: rgba(41, 169, 225, .16); }
.lp-type--dark .lp-checks li::after { border-color: var(--brand-bright); }
[data-bs-theme="dark"] .lp-home .lp-type--dark { border-color: var(--line-2); }

/* --------------------------------------------------------------------------
   Apps (developers)
   -------------------------------------------------------------------------- */

.lp-apps {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}
.lp-apps__head .lp-actions { margin-top: 32px; }

.lp-term {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: #060a12;
    box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .6);
}
.lp-term__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}
.lp-term__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.lp-term__bar b { margin-left: 12px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.lp-term__body {
    margin: 0;
    padding: 22px 24px 26px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.85;
    color: #d6deeb;
    white-space: pre;
    background: none;
    border: 0;
}
.lp-term .c-p { color: var(--brand-bright); }
.lp-term .c-m { color: #6b7895; }
.lp-term .c-ok { color: #3bd08f; }
.lp-term__cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 6px;
    vertical-align: -3px;
    background: #d6deeb;
    animation: lp-blink 1.1s steps(1) infinite;
}
@keyframes lp-blink { 50% { opacity: 0; } }

.lp-apps__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    margin-top: clamp(56px, 7vw, 88px);
}
.lp-apps__col { padding-top: 28px; border-top: 1px solid var(--inv-line); }
.lp-apps__col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.lp-apps__col h3 svg { width: 22px; height: 22px; fill: none; stroke: var(--brand-bright); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-apps__col ul { margin: 0; padding: 0; list-style: none; }
.lp-apps__col li { position: relative; padding: 7px 0 7px 22px; font-size: 15.5px; line-height: 1.55; color: var(--inv-fg-2); }
.lp-apps__col li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 16px;
    width: 8px;
    height: 2px;
    background: var(--brand-bright);
}

/* --------------------------------------------------------------------------
   Domain transfer (inside the domains section)
   -------------------------------------------------------------------------- */

.lp-transfer {
    position: relative;
    margin-top: clamp(64px, 8vw, 104px);
    padding-top: clamp(48px, 6vw, 72px);
}
.lp-transfer::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--gutter);
    right: var(--gutter);
    border-top: 1px solid var(--line);
}
.lp-transfer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
}
.lp-transfer__head > div { max-width: 640px; }
.lp-transfer__head .lp-h2 { font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem); }
.lp-transfer__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.lp-transfer__steps li {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.lp-transfer__steps .lp-step__num { background: var(--brand-tint); border-color: transparent; color: var(--brand); font-weight: 500; }
.lp-transfer__steps h4 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.lp-transfer__steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-3); }
.lp-transfer__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.lp-transfer__notes li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.lp-transfer__notes svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-transfer__notes a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023.98px) {
    .lp-types { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .lp-apps { grid-template-columns: minmax(0, 1fr); }
    .lp-transfer__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-transfer__notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
    .lp-apps__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-transfer__steps { grid-template-columns: minmax(0, 1fr); }
    .lp-term__body { font-size: 12px; padding: 18px; }
    .lp-type { padding: 24px; }
}

/* --------------------------------------------------------------------------
   Systems development — dashboard illustration, teaser and page
   -------------------------------------------------------------------------- */

.lp-pill--warn { background: #fff4e0; color: #9a5b00; }
[data-bs-theme="dark"] .lp-pill--warn { background: rgba(245, 180, 60, .14); color: #f5cf86; }
.lp-eyebrow .lp-pill { height: 22px; margin-right: 8px; padding: 0 8px; font-family: var(--font); font-size: 11.5px; letter-spacing: 0; text-transform: none; vertical-align: 1px; }

.lp-dash__body { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 340px; }
.lp-dash__nav { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; border-right: 1px solid var(--line); background: var(--bg-2); }
.lp-dash__nav i { width: 22px; height: 22px; border-radius: 6px; background: var(--line); }
.lp-dash__nav i.is-active { background: var(--brand); }
.lp-dash__main { padding: 20px 22px 22px; }
.lp-dash__h { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-dash__kpis div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.lp-dash__kpis span { display: block; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dash__kpis b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-dash__kpis em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ok); }
.lp-dash__chart { display: flex; align-items: flex-end; gap: 8px; height: 78px; margin: 16px 0; padding: 0 2px; border-bottom: 1px solid var(--line); }
.lp-dash__chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, transparent)); }
.lp-dash__table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lp-dash__table th { padding: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); text-align: left; }
.lp-dash__table td { padding: 8px 0; border-top: 1px solid var(--line); color: var(--fg); }
.lp-dash__table th:nth-child(2), .lp-dash__table td:nth-child(2) { text-align: right; padding-right: 16px; }
.lp-dash__table th:last-child, .lp-dash__table td:last-child { text-align: right; }
.lp-dash__table .lp-pill { height: 22px; font-size: 11.5px; }

.lp-hero--dev .lp-hero__title--dev { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); }
.lp-hero--dev .lp-actions { margin-top: 36px; }
.lp-dev-steps h3 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.lp-dev-steps { margin-top: 0; }
.lp-dev-page .lp-service { cursor: default; }
.lp-dev-page .lp-service::after { display: none; }
.lp-cta--plain { padding-bottom: clamp(64px, 8vw, 96px); }
.lp-cta--plain .lp-cta__copy { padding-bottom: 0; }

@media (max-width: 639.98px) {
    .lp-dash__body { grid-template-columns: minmax(0, 1fr); }
    .lp-dash__nav { display: none; }
    .lp-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-dash__kpis div:last-child { display: none; }
}

/* --------------------------------------------------------------------------
   Hero — sky gradient with plan "packs" on both sides
   -------------------------------------------------------------------------- */

.lp-hero--sky {
    --sky-a: #8ccdf0;
    --sky-b: #cfeaf9;
    padding: clamp(72px, 9vw, 128px) 0 clamp(80px, 9vw, 136px);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 48%, var(--bg) 100%);
}
[data-bs-theme="dark"] .lp-hero--sky { --sky-a: #0d3a5c; --sky-b: #0b2238; }
.lp-hero--sky::before { display: none; }

.lp-hero__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hero--sky .lp-hero__title { max-width: 14ch; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem); }
.lp-hero--sky .lp-hero__lead { max-width: 46ch; margin-left: auto; margin-right: auto; color: var(--fg-2); }
.lp-hero--sky .lp-search { width: 100%; max-width: 600px; margin: 36px auto 0; text-align: left; }
.lp-hero--sky .lp-search__label { text-align: center; }
.lp-hero--sky .lp-search__field { border-color: transparent; box-shadow: 0 24px 48px -20px rgba(14, 80, 140, .45); }
.lp-hero--sky .lp-search__meta { justify-content: center; }

/* Side packs */
.lp-packs { position: absolute; top: clamp(56px, 7vw, 96px); z-index: 1; width: 280px; height: 470px; }
.lp-packs--left { left: max(24px, calc(50% - 700px)); }
.lp-packs--right { right: max(24px, calc(50% - 700px)); }
.lp-pack {
    position: absolute;
    inset: 0 0 auto;
    padding: 22px 22px 20px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 18px;
    background: var(--bg);
    box-shadow: 0 30px 60px -28px rgba(14, 80, 140, .45);
    text-align: left;
}
[data-bs-theme="dark"] .lp-pack { border-color: var(--line); }
.lp-pack--front { z-index: 2; }
.lp-pack--ghost { z-index: 1; opacity: .5; filter: blur(1.5px); pointer-events: none; }
.lp-packs--left .lp-pack--front { transform: rotate(-4deg); }
.lp-packs--left .lp-pack--ghost { transform: translate(-46px, 48px) rotate(-11deg); }
.lp-packs--right .lp-pack--front { top: 70px; transform: rotate(4deg); }
.lp-packs--right .lp-pack--ghost { top: 70px; transform: translate(46px, 48px) rotate(11deg); }

.lp-pack__name { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
.lp-pack__price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 0; font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lp-pack__price span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.lp-pack__price small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.lp-pack__list { margin: 16px 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.lp-pack__list li { position: relative; padding: 4px 0 4px 24px; font-size: 13.5px; color: var(--fg-2); }
.lp-pack__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6fb5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.lp-pack .lp-btn { height: 40px; font-size: 14px; }

@media (max-width: 1279.98px) {
    .lp-packs { display: none; }
}
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .lp-packs { transform: scale(.82); }
    .lp-packs--left { left: 56px; transform-origin: left top; }
    .lp-packs--right { right: 56px; transform-origin: right top; }
}
.lp-hero--sky { background: var(--bg); }
.lp-hero--sky .lp-search__field { border-color: var(--line-2); box-shadow: var(--shadow-sm), 0 18px 40px -20px rgba(16, 24, 40, .25); }
.lp-pack { border-color: var(--line); box-shadow: 0 24px 48px -24px rgba(16, 24, 40, .28); }
.lp-hero--sky { background: linear-gradient(180deg, #e3f2fc 0%, #f3f9fe 35%, #ffffff 65%); }
[data-bs-theme="dark"] .lp-hero--sky { background: linear-gradient(180deg, #0d2238 0%, var(--bg) 65%); }
.lp-hero--sky { background: linear-gradient(180deg, #ffffff 0%, #e3f2fc 45%, #e3f2fc 55%, #ffffff 100%); }
[data-bs-theme="dark"] .lp-hero--sky { background: linear-gradient(180deg, var(--bg) 0%, #0d2238 50%, var(--bg) 100%); }

/* --------------------------------------------------------------------------
   Feature illustrations v2 — real-world objects instead of fake app windows
   -------------------------------------------------------------------------- */

.lp-vis { display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 48px 32px; }
.lp-vis::before { background: var(--bg-2) !important; border-radius: 24px; }
.lp-section--tint .lp-vis::before { background: var(--bg) !important; }

/* 1. Storage gauge with tools in orbit */
.lp-gauge { position: relative; width: 340px; height: 340px; max-width: 100%; }
.lp-gauge__ring { position: absolute; inset: 50px; width: calc(100% - 100px); height: calc(100% - 100px); transform: rotate(-90deg); }
.lp-gauge__track { fill: var(--bg); stroke: var(--line); stroke-width: 14; }
.lp-gauge__fill { fill: none; stroke: var(--brand); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 24 100; }
.lp-gauge__value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lp-gauge__value b { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lp-gauge__value b span { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--fg-3); }
.lp-gauge__value small { margin-top: 6px; font-size: 13px; color: var(--fg-3); }
.lp-orbit {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    box-shadow: 0 6px 16px -8px rgba(16, 24, 40, .2);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg);
    white-space: nowrap;
    transform: translate(-50%, -50%);
}
.lp-orbit svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--brand-tint); fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-orbit--1 { left: 50%; top: 2%; }
.lp-orbit--2 { left: 96%; top: 26%; }
.lp-orbit--3 { left: 96%; top: 74%; }
.lp-orbit--4 { left: 50%; top: 98%; }
.lp-orbit--5 { left: 4%; top: 74%; }
.lp-orbit--6 { left: 4%; top: 26%; }

/* 2. Business cards */
.lp-vis--cards { flex-direction: column; }
.lp-bcard {
    position: relative;
    width: 360px;
    max-width: 100%;
    aspect-ratio: 85 / 55;
    padding: 26px 28px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 24px 40px -20px rgba(16, 24, 40, .3);
    color: #0b1220;
}
.lp-bcard p { margin: 0; }
.lp-bcard--old { z-index: 1; margin-bottom: -150px; transform: translate(-36px, 0) rotate(-6deg); background: #f2f2ee; opacity: .85; }
.lp-bcard--old .lp-bcard__co { font-family: Georgia, "Times New Roman", serif; font-size: 18px; color: #555; }
.lp-bcard--old .lp-bcard__mail { position: absolute; left: 28px; bottom: 26px; font-size: 14px; color: #777; }
.lp-bcard--old s { text-decoration-color: #d14343; text-decoration-thickness: 2px; }
.lp-bcard--new { z-index: 2; display: flex; flex-direction: column; justify-content: space-between; transform: translate(28px, 0) rotate(3deg); }
.lp-bcard__mark { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.lp-bcard__mark i { width: 18px; height: 18px; border-radius: 5px; background: var(--brand); }
.lp-bcard__role { font-size: 12px; color: #6b7280; }
.lp-bcard__mail { margin-top: 4px !important; font-size: 17px; font-weight: 600; color: #0b1220; }
.lp-bcard__web { margin-top: 2px !important; font-size: 12.5px; color: #6b7280; }
.lp-bcard__tag { position: absolute; top: -11px; right: 18px; padding: 3px 10px; border-radius: 999px; background: #e5e7eb; font-size: 11.5px; font-weight: 600; color: #4b5563; }
.lp-bcard__tag--ok { background: var(--ok); color: #fff; }

/* 3. Address bar close-up */
.lp-vis--bar { flex-direction: column; align-items: stretch; gap: 14px; }
.lp-addr { display: flex; align-items: center; gap: 14px; padding: 0 22px; border-radius: 999px; background: var(--bg); white-space: nowrap; overflow: hidden; }
.lp-addr--bad { height: 50px; margin: 0 28px; opacity: .55; font-size: 15px; color: var(--fg-3); }
.lp-addr__warn { padding: 3px 9px; border-radius: 999px; background: #fdecec; font-size: 12.5px; font-weight: 600; color: #b42318; }
.lp-addr--good { height: 84px; padding: 0 28px; border: 1px solid var(--line); box-shadow: 0 30px 50px -24px rgba(16, 24, 40, .35); font-size: clamp(20px, 1.2rem + 1vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.lp-addr--good em { font-style: normal; font-weight: 500; color: var(--ok); }
.lp-addr__lock { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ok-tint); }
.lp-addr__lock svg { width: 22px; height: 22px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-addr__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--fg-2); }

@media (max-width: 639.98px) {
    .lp-vis { min-height: 0; padding: 40px 16px; }
    .lp-gauge { width: 300px; height: 300px; }
    .lp-orbit { font-size: 11.5px; padding: 5px 9px 5px 6px; }
    .lp-orbit--2, .lp-orbit--3 { left: 88%; }
    .lp-orbit--5, .lp-orbit--6 { left: 12%; }
    .lp-bcard { width: 280px; padding: 20px; }
    .lp-bcard--old { margin-bottom: -120px; transform: translate(-16px, 0) rotate(-6deg); }
    .lp-bcard--new { transform: translate(12px, 0) rotate(3deg); }
    .lp-bcard__mail { font-size: 15px; }
    .lp-addr--good { height: 64px; padding: 0 16px; font-size: 17px; }
    .lp-addr--bad { margin: 0 12px; }
}
.lp-bcard--old { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: -132px; }
.lp-bcard--old .lp-bcard__mail { position: static; margin-top: 4px; }
.lp-bcard--old .lp-bcard__tag { right: auto; left: 18px; }
.lp-vis > * { position: relative; z-index: 1; }
@media (max-width: 639.98px) {
    .lp-bcard--old { flex-direction: column; gap: 2px; }
    .lp-bcard--old .lp-bcard__co { font-size: 15px; }
    .lp-bcard--old .lp-bcard__mail { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Illustrations v2 — receipt + sticky note, phone call, price menu
   -------------------------------------------------------------------------- */

/* Receipt printed by the client's system, with a sticky note */
.lp-desk { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: 8px 0 24px; }
.lp-rcpt {
    position: relative;
    width: 270px;
    padding: 26px 24px 34px;
    background: #fff;
    color: #1f2328;
    font-family: var(--mono);
    font-size: 12.5px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 28px 40px -22px rgba(16, 24, 40, .35);
    transform: rotate(-2.5deg);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.lp-rcpt p { margin: 0; }
.lp-rcpt__brand { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font); font-size: 15px; font-weight: 700; }
.lp-rcpt__brand i { width: 14px; height: 14px; border-radius: 4px; background: var(--brand); }
.lp-rcpt__meta { margin-top: 4px !important; text-align: center; color: #6b7280; }
.lp-rcpt__rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed #c8ccd2; }
.lp-rcpt__rows dt { font-weight: 400; color: #6b7280; }
.lp-rcpt__rows dd { margin: 0; text-align: right; }
.lp-rcpt__rows--items dt { color: #1f2328; }
.lp-rcpt__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px !important; padding-top: 12px; border-top: 1px dashed #c8ccd2; }
.lp-rcpt__total b { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.lp-rcpt__stamp {
    position: absolute;
    right: 18px;
    top: 128px;
    padding: 4px 12px;
    border: 2px solid #12805c;
    border-radius: 6px;
    color: #12805c;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    transform: rotate(-12deg);
}
.lp-rcpt__thanks { margin-top: 18px !important; text-align: center; color: #6b7280; }
.lp-rcpt__code { height: 30px; margin-top: 12px; background: repeating-linear-gradient(90deg, #1f2328 0 2px, transparent 2px 4px, #1f2328 4px 5px, transparent 5px 8px, #1f2328 8px 11px, transparent 11px 12px); opacity: .85; }
.lp-note {
    position: absolute;
    right: calc(50% - 250px);
    bottom: 0;
    z-index: 2;
    width: 160px;
    padding: 16px 16px 14px;
    background: #fde68a;
    color: #3d2f00;
    box-shadow: 0 18px 28px -16px rgba(16, 24, 40, .4);
    transform: rotate(5deg);
}
.lp-note p { margin: 0; }
.lp-note__label { font-size: 12px; font-weight: 600; opacity: .75; }
.lp-note__value { margin-top: 2px !important; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.lp-note__spark { display: block; width: 100%; height: 34px; margin-top: 6px; fill: none; stroke: #8a6a00; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-note__delta { margin-top: 2px !important; font-size: 12px; font-weight: 700; color: #12805c; }
.lp-hero__visual .lp-desk { padding: 24px 0 40px; }

/* Phone mid-call */
.lp-vis--phone { padding: 40px 24px; }
.lp-phone {
    width: 260px;
    padding: 10px;
    border-radius: 42px;
    background: #111827;
    box-shadow: 0 0 0 2px #2b3446, 0 40px 60px -28px rgba(16, 24, 40, .55);
}
.lp-phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 470px;
    padding: 46px 22px 28px;
    border-radius: 34px;
    background: linear-gradient(180deg, #16324f 0%, #0b1a2c 100%);
    color: #fff;
    text-align: center;
}
.lp-phone__screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 76px; height: 22px; border-radius: 999px; background: #05080d; transform: translateX(-50%); }
.lp-phone__screen p { margin: 0; }
.lp-phone__status { font-size: 13px; color: rgba(255, 255, 255, .7); }
.lp-phone__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin: 22px 0 14px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 10px rgba(41, 169, 225, .14), 0 0 0 22px rgba(41, 169, 225, .07);
}
.lp-phone__avatar img { width: 58px; height: auto; }
.lp-phone__name { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.lp-phone__num { margin-top: 4px !important; font-size: 14px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.lp-phone__place { margin-top: 2px !important; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.lp-phone__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: auto; padding-top: 34px; }
.lp-phone__keys span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255, 255, 255, .7); }
.lp-phone__keys svg { width: 50px; height: 50px; padding: 14px; border-radius: 50%; background: rgba(255, 255, 255, .12); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-phone__keys span:nth-child(2) svg { fill: #fff; stroke: none; }
.lp-phone__end { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-top: 22px; border-radius: 50%; background: #e5484d; }
.lp-phone__end svg { width: 28px; height: 28px; fill: #fff; }

/* Domain price menu */
.lp-split__aside--menu { padding: 12px 32px 20px; border: 0; background: transparent; box-shadow: none; }
.lp-menu { margin: 0; padding: 0; list-style: none; }
.lp-menu li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.lp-menu__ext { font-size: clamp(22px, 1.1rem + .8vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.lp-menu li:first-child .lp-menu__ext { color: var(--brand); }
.lp-menu__dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line-2); transform: translateY(-6px); }
.lp-menu__price { font-size: 17px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-menu__price small { margin-right: 3px; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.lp-menu__price em { margin-left: 3px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
.lp-split__aside--menu .lp-table__more { display: inline-block; padding: 14px 0 0; }

@media (max-width: 639.98px) {
    .lp-note { right: 0; }
    .lp-rcpt { width: 240px; }
    .lp-split__aside--menu { padding: 0; }
    .lp-menu__price em { display: none; }
}
.lp-rcpt__stamp { top: auto; right: auto; left: 50%; bottom: 74px; transform: translateX(-50%) rotate(-10deg); background: rgba(255, 255, 255, .6); }
.lp-rcpt__thanks { visibility: hidden; }
@media (max-width: 639.98px) {
    .lp-menu li { gap: 8px; padding: 9px 0; }
    .lp-menu__ext { font-size: 19px; }
    .lp-menu__dots { min-width: 10px; }
    .lp-menu__price { font-size: 15px; }
    .lp-note { width: 132px; padding: 12px; right: -4px; bottom: -8px; }
    .lp-note__value { font-size: 16px; }
}
.lp-feature__visual.lp-vis { overflow: hidden; }
@media (max-width: 639.98px) {
    .lp-orbit--2, .lp-orbit--3 { left: 78%; }
    .lp-orbit--5, .lp-orbit--6 { left: 22%; }
}
@media (max-width: 639.98px) { .lp-orbit--3 { left: 70%; } }

/* Hero background — dotted map of Mozambique, Maputo marked */
.lp-hero--sky { position: relative; overflow: hidden; }
.lp-mzmap {
    position: absolute;
    left: 50%;
    top: 4%;
    z-index: 0;
    height: 104%;
    aspect-ratio: 612 / 1000;
    transform: translateX(-38%);
    pointer-events: none;
}
.lp-mzmap img { display: block; width: 100%; height: 100%; max-width: none; opacity: .11; }
[data-bs-theme="dark"] .lp-mzmap img { opacity: .22; filter: brightness(1.8); }
.lp-mzmap__pin {
    position: absolute;
    left: 22.65%;
    top: 95.3%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent);
    opacity: .7;
}
.lp-mzmap__pin::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    animation: lp-ping 2.8s ease-out infinite;
}
@keyframes lp-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp-mzmap__pin::after { animation: none; opacity: 0; } }
.lp-hero--sky .lp-hero__center, .lp-packs { z-index: 2; }
@media (max-width: 639.98px) { .lp-mzmap { height: 92%; transform: translateX(-30%); } }
.lp-mzmap { top: 5%; height: 88%; transform: translateX(-34%); }

/* Hero background — discreet dotted world map */
.lp-mzmap { display: none; }
.lp-worldmap {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(1500px, 110%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
}
.lp-worldmap img { display: block; width: 100%; height: auto; max-width: none; opacity: .07; }
[data-bs-theme="dark"] .lp-worldmap img { opacity: .14; filter: brightness(1.8); }
@media (max-width: 639.98px) { .lp-worldmap { width: 220%; } }
.lp-hero--sky { background: linear-gradient(180deg, #ffffff 0%, #f1f8fe 45%, #f1f8fe 55%, #ffffff 100%); }
.lp-phone__screen { background: linear-gradient(180deg, #1a86cf 0%, #0e6fb5 55%, #0a5a94 100%); }
.lp-phone__avatar { background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .16), 0 0 0 22px rgba(255, 255, 255, .08); }
.lp-phone__avatar img { width: 62px; }
.lp-phone__status, .lp-phone__keys span { color: rgba(255, 255, 255, .85); }
.lp-phone__place { color: rgba(255, 255, 255, .7); }
.lp-phone__keys svg { background: rgba(255, 255, 255, .18); }

/* TEST-BLUE-HERO start — primary blue hero background (remove block to roll back) */
.lp-hero--sky { background: linear-gradient(180deg, #1279c2 0%, #0e6fb5 60%, #0b62a3 100%); }
[data-bs-theme="dark"] .lp-hero--sky { background: linear-gradient(180deg, #0c4f82 0%, #0a416c 100%); }
.lp-hero--sky .lp-hero__title, .lp-hero--sky .lp-hero__title span { color: #fff; }
.lp-hero--sky .lp-hero__title span { color: #9fdcfb; }
.lp-hero--sky .lp-hero__lead { color: rgba(255, 255, 255, .85); }
.lp-hero--sky .lp-search__label { color: #fff; }
.lp-hero--sky .lp-search__field { border-color: transparent; box-shadow: 0 24px 48px -20px rgba(4, 30, 60, .55); }
.lp-hero--sky .lp-tlds { color: rgba(255, 255, 255, .75); }
.lp-hero--sky .lp-tlds strong { color: #fff; }
.lp-hero--sky .lp-search__meta .lp-link { color: #fff !important; }
.lp-hero--sky .lp-worldmap img { opacity: .14; filter: brightness(0) invert(1); }
.lp-hero--sky .lp-pack { border-color: rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -24px rgba(4, 30, 60, .6); }
.lp-hero--sky .lp-pack--ghost { opacity: .45; }
/* TEST-BLUE-HERO end */

/* --------------------------------------------------------------------------
   Development page — portfolio: project list + live site inside a phone
   -------------------------------------------------------------------------- */

.lp-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: clamp(40px, 6vw, 96px); }
.lp-work__list { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.lp-work__list li { position: relative; }
.lp-work__item {
    display: block;
    width: 100%;
    padding: 18px 20px 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.lp-work__item:hover { border-color: var(--line-2); }
.lp-work__item.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.lp-work__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-work__head b { font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--fg); }
.lp-work__type { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--bg-2); font-size: 12.5px; font-weight: 500; color: var(--fg-3); }
.lp-work__item.is-active .lp-work__type { background: var(--bg); color: var(--brand); }
.lp-work__desc { display: block; margin-top: 6px; padding-right: 120px; font-size: 14.5px; line-height: 1.5; color: var(--fg-3); }
.lp-work__visit { position: absolute; right: 20px; bottom: 18px; font-size: 13px; font-weight: 500; color: var(--brand) !important; }

.lp-work__stage { display: flex; flex-direction: column; align-items: center; }
.lp-device {
    width: 320px;
    max-width: 100%;
    padding: 12px;
    border-radius: 48px;
    background: #111827;
    box-shadow: 0 0 0 2px #2b3446, 0 40px 70px -30px rgba(16, 24, 40, .55);
}
.lp-device__screen { position: relative; overflow: hidden; border-radius: 38px; background: #fff; }
.lp-device__bar { display: flex; align-items: flex-end; justify-content: center; height: 54px; padding-bottom: 8px; background: #f3f4f6; }
.lp-device__bar::before { content: ""; position: absolute; top: 10px; left: 50%; width: 84px; height: 24px; border-radius: 999px; background: #05080d; transform: translateX(-50%); }
.lp-device__host { padding: 3px 12px; border-radius: 999px; background: #e5e7eb; font-size: 11.5px; color: #4b5563; }
/* The site renders at a real phone width (390px) and is scaled to fit the frame */
.lp-device__viewport { position: relative; height: 560px; overflow: hidden; }
.lp-device__frame { position: absolute; top: 0; left: 0; width: 390px; height: 738px; border: 0; transform: scale(.759); transform-origin: 0 0; background: #fff; }
.lp-work__hint { margin: 16px 0 0; font-size: 13px; color: var(--fg-3); text-align: center; }

@media (max-width: 1023.98px) {
    .lp-work { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
    .lp-work__desc { padding-right: 0; }
    .lp-work__visit { position: static; display: inline-block; margin: 8px 0 0 22px; }
}
.lp-device__bar { height: 66px; padding-bottom: 9px; }
.lp-device__host { display: none; }
.lp-device__bar { height: 46px; padding: 0; background: #fff; }
.lp-work__item.is-active { box-shadow: none; }