/* ------------------------------------------------------------------
   Paybozz landing page
   Hand-written CSS: style.css is a prebuilt Tailwind bundle with no
   build step in the repo, so the landing page carries its own styles.
   Layout follows the "Final-Version" Figma frames (light + dark).
   ------------------------------------------------------------------ */

/* ---------- tokens ---------- */

:root {
    color-scheme: light;

    --bg: #f6f7fc;
    --surface: #eef0f6;
    --surface-card: #f2f4fd;
    /* feature cards are a vertical gradient that dissolves into the page at the
       bottom, so they have no bottom edge */
    --card-top: #edf0ff;
    --surface-raised: #f8f9fe;
    --badge: #dce5ff;
    --cta-band-top: #eff1fe;
    --cta-band: #f3f5fe;
    --cta-plate: rgb(118 121 255 / 0.10);
    --cta-plate-glow: transparent;

    --text: #061244;
    --text-muted: #4a4a4a;

    --border: rgb(6 18 68 / 0.10);
    --border-strong: #061244;

    --btn-fill: #061244;
    --btn-fill-text: #ffffff;
    --btn-ghost-text: #061244;
    --btn-ghost-border: #061244;

    --accent: #425fdb;
    --check: #16c98d;

    --glow: rgb(118 121 255 / 0.16);
    /* centre colour of the big circular glows behind the hero phones and the
       dashboard — sampled off the Figma frames. */
    --glow-core: rgb(118 121 255 / 0.22);
    --glow-mid: rgb(118 121 255 / 0.10);
    /* the round plate the hero phones and the laptop sit on */
    --disc: rgb(118 121 255 / 0.13);
    --disc-fade: rgb(118 121 255 / 0);
    --shadow: 0 12px 28px rgb(6 18 68 / 0.10);
    --shadow-raised: 0 18px 40px rgb(6 18 68 / 0.08);

    --logo-light: block;
    --logo-dark: none;
    --pattern-opacity: 1;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #061244;
    --surface: #131e4e;
    --surface-card: #111d4e;
    --card-top: #1d2858;
    --surface-raised: #1a2553;
    --badge: #242f5a;
    --cta-band-top: #1c2858;
    --cta-band: #041344;
    --cta-plate: #031143;
    --cta-plate-glow: #1e2e73;

    --text: #f4f4f4;
    --text-muted: rgb(244 244 244 / 0.72);

    --border: rgb(244 244 244 / 0.12);
    --border-strong: rgb(244 244 244 / 0.55);

    --btn-fill: #f4f4f4;
    --btn-fill-text: #061244;
    --btn-ghost-text: #f4f4f4;
    --btn-ghost-border: rgb(244 244 244 / 0.55);

    --accent: #7679ff;
    --check: #2ae39c;

    --glow: rgb(118 121 255 / 0.20);
    --glow-core: #1e3279;
    --glow-mid: #121f55;
    /* The round plate is a page-coloured circle with the light sitting OUTSIDE
       its rim, not a lighter filled disc: scanning down the Figma frame beside
       the phones ramps bg -> #23357f over ~258px and then cuts straight back to
       bg at the rim, so the inside of the circle is plain background. */
    --disc: #1b2f80;
    --disc-fade: rgb(27 47 128 / 0);
    /* the halo behind the laptop is about twice the lift of the hero's: it
       peaks at #23357e some 40px above the screen, so it needs its own value */
    --disc-strong: #32479c;
    --shadow: 0 12px 28px rgb(0 0 0 / 0.35);
    --shadow-raised: 0 18px 40px rgb(0 0 0 / 0.45);

    --logo-light: none;
    --logo-dark: block;
    --pattern-opacity: 0.35;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color .25s ease, color .25s ease;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

ul {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ---------- shared ---------- */

.lp-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 80px;
}

.lp-section {
    position: relative;
}

.lp-section__head {
    max-width: 704px;
    margin-inline: auto;
    text-align: center;
}

.lp-section__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.lp-section__sub {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 34px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-btn--primary {
    padding-inline: 53px;
    background-color: var(--btn-fill);
    color: var(--btn-fill-text);
}

.lp-btn--ghost {
    border: 1px solid var(--btn-ghost-border);
    color: var(--btn-ghost-text);
}

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

.lp-btn--ghost:hover {
    background-color: var(--btn-fill);
    border-color: var(--btn-fill);
    color: var(--btn-fill-text);
}

.lp-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Green tick: the shape comes from the existing Tick.svg, the colour from
   the theme, so one asset serves both themes. */
.lp-check {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background-color: var(--check);
    -webkit-mask: url("icon/Tick.svg") center / 32px 32px no-repeat;
    mask: url("icon/Tick.svg") center / 32px 32px no-repeat;
}

.lp-ticks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-ticks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: var(--text);
}

/* Artwork that ships in two versions — only the current theme's is shown. */
.lp-only-light {
    display: var(--logo-light);
}

.lp-only-dark {
    display: var(--logo-dark);
}

/* ---------- header ---------- */

.lp-header {
    position: relative;
    z-index: 40;
    padding-block: 30px;
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.lp-logo img {
    height: 35px;
    width: auto;
}

.lp-logo .lp-logo--light {
    display: var(--logo-light);
}

.lp-logo .lp-logo--dark {
    display: var(--logo-dark);
}

.lp-header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lp-header__contact {
    min-width: 152px;
}

/* theme switch — 57x30 pill with a 26x26 knob, per Figma */
.lp-theme-toggle {
    position: relative;
    flex: 0 0 57px;
    width: 57px;
    height: 30px;
    border-radius: 999px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: background-color .25s ease, border-color .25s ease;
}

.lp-theme-toggle__knob {
    position: absolute;
    top: 1px;
    left: 1px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--btn-fill);
    color: var(--btn-fill-text);
    transition: transform .25s ease, background-color .25s ease;
}

[data-theme="dark"] .lp-theme-toggle__knob {
    transform: translateX(27px);
}

.lp-theme-toggle__knob svg {
    width: 16px;
    height: 16px;
}

.lp-theme-toggle__icon--moon {
    display: var(--logo-dark);
}

.lp-theme-toggle__icon--sun {
    display: var(--logo-light);
}

/* ---------- hero ---------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding-top: 94px;
}

/* above the glow plate, which reaches up behind the copy */
.lp-hero > .lp-container {
    position: relative;
    z-index: 4;
}

.lp-hero__title {
    max-width: 900px;
    margin-inline: auto;
    position: relative;
    font-size: 50px;
    font-weight: 700;
    line-height: 64px;
    text-align: center;
    color: var(--text);
}

.lp-hero__title span {
    font-weight: 500;
}

.lp-hero__underline {
    position: absolute;
    top: 45px;
    left: 63px;
    width: 315px;
    pointer-events: none;
    opacity: var(--pattern-opacity);
}

.lp-hero__sub {
    max-width: 712px;
    margin: 35px auto 0;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--text-muted);
}

.lp-hero .lp-btn-row {
    margin-top: 50px;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.lp-hero__art {
    position: relative;
    height: 388px;
    margin-top: 26px;
}

.lp-hero__pattern {
    position: absolute;
    bottom: 0;
    width: 345px;
    opacity: var(--pattern-opacity);
    pointer-events: none;
}

/* Every grid block dissolves on all four sides — none of them is allowed to
   stop on a visible edge. The side that meets the page or card edge fades over
   the last sliver only, so it still reads as running off the layout. */
.lp-hero__pattern--left {
    left: 0;
    -webkit-mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0.75) 0%, #000 8%, #000 28%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 30%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0.75) 0%, #000 8%, #000 28%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 30%, #000 82%, transparent 100%);
    mask-composite: intersect;
}

.lp-hero__pattern--right {
    right: 0;
    -webkit-mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.75) 0%, #000 8%, #000 28%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 30%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.75) 0%, #000 8%, #000 28%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 30%, #000 82%, transparent 100%);
    mask-composite: intersect;
}

.lp-hero__glow {
    position: absolute;
    top: -95px;
    left: 50%;
    transform: translateX(-50%);
    width: 986px;
    max-width: none;
    z-index: 1;
    opacity: var(--pattern-opacity);
}

.lp-hero__phones {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 544px;
    max-width: none;
    z-index: 2;
}

/* The glow asset is a pale disc, which reads as a grey smudge on navy — dark
   mode draws the same 654px halo as the Figma frame with a gradient instead. */
[data-theme="dark"] .lp-hero__glow {
    opacity: 0;
}

/* 654px circle of plain background with a tight blue halo on the outside of
   its rim. Walking outward from the rim in the Figma frame the lift halves by
   ~45px and is gone by ~130px, so this is a blurred shadow rather than a long
   gradient ramp — the circle's own fill hides the half of the blur that falls
   inside it. */
[data-theme="dark"] .lp-hero__art::before {
    content: "";
    position: absolute;
    top: 41px;
    left: 50%;
    transform: translateX(-50%);
    width: 654px;
    height: 654px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 190px 30px var(--disc);
    z-index: 1;
    pointer-events: none;
}

/* ---------- partners ---------- */

.lp-partners {
    padding-block: 60px;
}

.lp-partners__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.lp-partners__copy {
    max-width: 634px;
}

.lp-partners__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.lp-partners__text {
    margin-top: 28px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}

.lp-partners__logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 90px;
    flex: 0 1 auto;
}

.lp-partners__logos img {
    max-height: 54px;
    width: auto;
}

/* ---------- features ---------- */

.lp-features {
    padding-block: 100px 64px;
}

.lp-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 50px;
}

.lp-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 311px;
    padding: 50px 48px 47px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--card-top) 0%, var(--bg) 100%);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.lp-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.lp-feature__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background-color: var(--bg);
    margin-bottom: 30px;
}

.lp-feature__icon img {
    width: 40px;
    height: 40px;
}

/* The icon set is drawn in navy, so it needs flipping to read on the dark tile. */
[data-theme="dark"] .lp-feature__icon {
    background-color: rgb(244 244 244 / 0.07);
}

[data-theme="dark"] .lp-feature__icon img {
    filter: brightness(0) invert(1);
}

.lp-feature__title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.lp-feature__text {
    font-size: 14px;
    line-height: 22px;
    color: var(--text-muted);
}

/* ---------- dashboard ---------- */

.lp-dashboard {
    padding-top: 100px;
    overflow: hidden;
}

/* above the glow plate, which reaches up behind the heading */
.lp-dashboard > .lp-container {
    position: relative;
    z-index: 2;
}

.lp-dashboard__art {
    position: relative;
    margin-top: 40px;
}

/* The laptop covers nearly all of its own artwork, so the disc behind it only
   shows as the arc above and beside the screen — same as in the Figma frame. */
.lp-dashboard__glow {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 1049px;
    max-width: 112%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--disc) 0%, var(--disc) 64%, var(--disc-fade) 90%);
    pointer-events: none;
}

/* Same construction as the hero: background-coloured circle, halo outside it,
   but brighter and reaching ~145px rather than ~130px. The rim has to sit on
   the top edge of the screen — the laptop starts 10% into its own artwork — or
   the halo lands above the heading and nothing shows around the laptop. */
[data-theme="dark"] .lp-dashboard__glow {
    top: 10%;
    background: var(--bg);
    box-shadow: 0 0 230px 30px var(--disc-strong);
}

/* Capped at the design width: the mockup is drawn against a 1440 frame where it
   bleeds 22px past each edge, so letting it keep scaling with the viewport made
   the laptop far larger than the Figma frame on a wide screen. */
/* No display here: it would outrank .lp-only-light / .lp-only-dark and show
   both theme variants at once. */
.lp-dashboard__art img {
    position: relative;
    width: min(103%, 1484px);
    max-width: none;
    margin-inline: auto;
}

.lp-dashboard__fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 226px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 72%);
    pointer-events: none;
}

/* ---------- business model ---------- */

.lp-models {
    padding-block: 100px 76px;
}

.lp-models__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.lp-models__col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lp-model-card {
    position: relative;
    overflow: hidden;
    padding: 65px 66px 66px;
    border-radius: 20px;
    background-color: var(--surface);
}

.lp-model-card__title {
    margin-bottom: 40px;
    font-size: 30px;
    font-weight: 600;
    color: var(--text);
}

.lp-model-card__pattern {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: var(--pattern-opacity);
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to top, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to top, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    mask-composite: intersect;
}

.lp-model-shot {
    display: grid;
    place-items: end center;
    padding: 24px 28px 0 28px;
    border-radius: 20px;
    background-color: var(--surface);
}

/* ---------- enterprise ---------- */

.lp-enterprise {
    padding-block: 60px;
}

.lp-enterprise__inner {
    display: grid;
    grid-template-columns: 523px 1fr;
    gap: 26px;
    align-items: center;
    min-height: 554px;
}

.lp-enterprise__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
}

.lp-enterprise__text {
    margin-top: 30px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}

.lp-enterprise__stage {
    position: relative;
    height: 554px;
}

.lp-enterprise__globe {
    position: absolute;
    top: 12px;
    left: 115px;
    width: 542px;
    max-width: none;
}

/* soft halo around the sphere — peaks at #0e1c56 on its rim in the Figma frame
   and is gone about 110px out */
[data-theme="dark"] .lp-enterprise__globe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 150px 20px #132261;
    pointer-events: none;
}

.lp-enterprise__globe .lp-globe--light {
    display: var(--logo-light);
}

.lp-enterprise__globe .lp-globe--dark {
    display: var(--logo-dark);
}

.lp-stat {
    position: absolute;
    display: grid;
    place-content: center;
    gap: 6px;
    width: 269px;
    height: 114px;
    padding: 20px;
    border-radius: 14px;
    background-color: var(--badge);
    text-align: center;
    transition: background-color .25s ease;
}

.lp-stat__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.lp-stat__label {
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-muted);
}

/* positions mirror the Figma band (1280 x 554) */
.lp-stat--monitoring {
    left: 125px;
    top: 0;
}

.lp-stat--uptime {
    left: 462px;
    top: 148px;
}

.lp-stat--soc {
    left: 0;
    top: 283px;
}

.lp-stat--api {
    left: 408px;
    top: 440px;
}

/* ---------- kyc ---------- */

.lp-kyc {
    padding-block: 45px 69px;
}

.lp-kyc__inner {
    display: grid;
    grid-template-columns: 783px 1fr;
    gap: 75px;
    align-items: center;
}

.lp-kyc__media img {
    width: 100%;
    border-radius: 20px;
    /* 73px soft edge on all four sides, as in the Figma frame */
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 73px, #000 calc(100% - 73px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 73px, #000 calc(100% - 73px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 73px, #000 calc(100% - 73px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 73px, #000 calc(100% - 73px), transparent 100%);
    mask-composite: intersect;
}

/* Figma's dark frame uses a blue-graded version of this photo. Until that
   export lands, the warm original is graded here so it does not glare on navy. */
[data-theme="dark"] .lp-kyc__media img {
    filter: brightness(0.62) saturate(0.8) hue-rotate(188deg) contrast(1.08);
}

.lp-kyc__copy {
    max-width: 382px;
}

.lp-kyc__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.lp-kyc__text {
    margin-top: 36px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--text-muted);
}

/* ---------- pricing ---------- */

.lp-pricing {
    padding-block: 100px 76px;
}

.lp-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 50px;
}

.lp-price-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 624px;
    padding: 50px 30px;
    border-radius: 20px;
    background-color: var(--surface);
    border: 1px solid transparent;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .25s ease;
}

/* soft corner glow, top-left of every card */
.lp-price-card::before {
    content: "";
    position: absolute;
    top: -73px;
    left: -79px;
    width: 201px;
    height: 201px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.lp-price-card__head {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.lp-price-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 36px;
}

.lp-price-card__plan {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--text);
}

.lp-price-card__badge {
    padding: 4px 16px;
    border-radius: 40px;
    background-color: var(--badge);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.lp-price-card__for {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: var(--text);
}

.lp-price-card .lp-ticks {
    gap: 12px;
    margin-bottom: 40px;
}

.lp-price-card__cta {
    margin-top: auto;
    align-self: flex-start;
}

/* highlighted plan */
.lp-price-card--featured,
.lp-price-card:hover {
    border-color: var(--border-strong);
}

.lp-price-card--featured {
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-raised);
}

.lp-price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* hovering any card takes the highlight off the featured one */
.lp-pricing__grid:has(.lp-price-card:hover) .lp-price-card--featured:not(:hover) {
    border-color: transparent;
}

.lp-pricing__grid:has(.lp-price-card:hover) .lp-price-card--featured:not(:hover) .lp-btn--primary {
    background-color: transparent;
    border: 1px solid var(--btn-ghost-border);
    color: var(--btn-ghost-text);
}

.lp-price-card:hover .lp-btn--ghost {
    background-color: var(--btn-fill);
    border-color: var(--btn-fill);
    color: var(--btn-fill-text);
}

/* ---------- closing cta ---------- */

.lp-cta {
    padding-block: 72px;
}

.lp-cta__card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 620px;
    align-items: end;
    gap: 24px;
    min-height: 651px;
    padding-left: 80px;
    border-radius: 20px;
    /* vertical gradient, as in Figma: #1c2858 down to #041344 in dark */
    background: linear-gradient(180deg, var(--cta-band-top) 0%, var(--cta-band) 100%);
}

/* The plate behind the phones: a circle of the page colour — darker than the
   card — with the light sitting outside its rim, the same build as the hero.
   It hangs off the media column rather than the card so it stays centred on
   the phones as the column flexes: the artwork's phones sit at 47.3% / 49% of
   that box, allowing for its transparent margins. Clipped by the card. */
.lp-cta__media::before {
    content: "";
    position: absolute;
    left: 61.8%;
    top: 63%;
    transform: translate(-50%, -50%);
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cta-plate);
    /* Reaches ~115px past the rim rather than the 225px the Figma frame has —
       dialled back on request. */
    box-shadow: 0 0 130px 50px var(--cta-plate-glow);
    z-index: 0;
    pointer-events: none;
}

/* Top-aligned on the Figma rhythm (title 100, body 310, buttons 419) — centring
   it dropped the paragraph into the grid pattern behind. */
.lp-cta__copy {
    position: relative;
    z-index: 3;
    max-width: 530px;
    padding-block: 100px 60px;
    align-self: start;
}

.lp-cta__title {
    font-size: 46px;
    font-weight: 700;
    line-height: 64px;
    color: var(--text);
}

.lp-cta__text {
    max-width: 311px;
    margin-top: 70px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--text-muted);
}

.lp-cta .lp-btn-row {
    margin-top: 40px;
}

.lp-cta__pattern {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: var(--pattern-opacity);
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to top, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to top, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    mask-composite: intersect;
}

.lp-cta__media {
    position: relative;
    z-index: 2;
    align-self: end;
}

/* The artwork is transparent, so it sits straight on the card's gradient the
   way the Figma frame does — no plate, mask or blend mode behind it. It also
   carries transparent margins (the phones occupy 1200 of its 1447px and stop
   15.5% short of the bottom), so it is sized past the column and pulled down
   to put the phones at the size Figma has and let them run off the card. */
.lp-cta__media img {
    position: relative;
    width: 693px;
    max-width: none;
    margin-bottom: -158px;
    /* sits right of the plate's centre rather than on it, by eye */
    margin-left: 120px;
}

/* ---------- footer ---------- */

.lp-footer {
    position: relative;
    overflow: hidden;
    padding-block: 80px;
    background-color: var(--surface);
    transition: background-color .25s ease;
}

.lp-footer__pattern {
    position: absolute;
    top: 0;
    right: 0;
    opacity: var(--pattern-opacity);
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to bottom, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to left, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%),
        linear-gradient(to bottom, rgb(0 0 0 / 0.8) 0%, #000 10%, #000 30%, transparent 100%);
    mask-composite: intersect;
}

.lp-footer__inner {
    position: relative;
    z-index: 2;
}

.lp-footer__brand img {
    height: 54px;
    width: auto;
    margin-bottom: 42px;
}

.lp-footer__brand .lp-logo--light {
    display: var(--logo-light);
}

.lp-footer__brand .lp-logo--dark {
    display: var(--logo-dark);
}

.lp-footer__tagline {
    max-width: 487px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-muted);
}

.lp-footer__nav {
    display: flex;
    gap: 80px;
    margin-top: 80px;
}

.lp-footer__col h4 {
    margin-bottom: 28px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.lp-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-footer__col a,
.lp-footer__col p {
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    color: var(--text-muted);
    transition: color .2s ease;
}

.lp-footer__col a:hover {
    color: var(--text);
}

.lp-footer__col--contact {
    margin-left: auto;
    text-align: right;
}

.lp-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.lp-footer__bottom p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
}

.lp-footer__bottom a {
    color: var(--text);
    text-decoration: underline;
    font-weight: 600;
}

/* ---------- responsive ---------- */

@media (max-width: 1340px) {
    .lp-container {
        padding-inline: 40px;
    }

    .lp-cta__card {
        grid-template-columns: 1fr 520px;
        padding-left: 56px;
    }

    /* smaller shift than desktop so the narrower column does not cut too much
       off the right-hand phone */
    .lp-cta__media img {
        width: 627px;
        margin-left: 80px;
    }

    /* the plate tracks the phones, so it moves with the narrower artwork */
    .lp-cta__media::before {
        left: 62.5%;
    }

    .lp-enterprise__inner {
        grid-template-columns: 440px 1fr;
    }
}

@media (max-width: 1180px) {
    .lp-features__grid,
    .lp-pricing__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-price-card {
        min-height: 0;
    }

    /* globe + floating badges stop fitting — stack them */
    .lp-enterprise__inner {
        grid-template-columns: 1fr;
        gap: 56px;
        min-height: 0;
    }

    .lp-enterprise__stage {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .lp-enterprise__globe {
        position: static;
        width: min(100%, 420px);
    }

    .lp-enterprise__badges {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 269px));
        gap: 16px;
        justify-content: center;
    }

    .lp-stat {
        position: static;
        width: 100%;
    }

    .lp-kyc__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        justify-items: center;
        text-align: center;
    }

    .lp-kyc__copy {
        max-width: 560px;
    }

    .lp-cta__card {
        grid-template-columns: 1fr;
        padding: 0 40px;
        min-height: 0;
    }

    .lp-cta__copy {
        max-width: none;
        padding-block: 64px 0;
    }

    .lp-cta__media {
        justify-self: center;
    }

    .lp-cta__media img {
        width: 100%;
        max-width: 560px;
        margin-bottom: -60px;
        margin-left: 0;
    }

    /* artwork fills the column here, so the phones sit at their own 42.3% */
    .lp-cta__media::before {
        left: 42.3%;
        top: 50%;
    }
}

@media (max-width: 1024px) {
    .lp-partners__inner {
        flex-direction: column;
        text-align: center;
    }

    .lp-partners__logos {
        justify-content: center;
        gap: 56px;
    }

    .lp-models__grid {
        grid-template-columns: 1fr;
    }

    .lp-model-card {
        padding: 48px 40px;
    }

    .lp-footer__nav {
        flex-wrap: wrap;
        gap: 40px 56px;
    }

    .lp-footer__col--contact {
        margin-left: 0;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .lp-container {
        padding-inline: 24px;
    }

    .lp-header {
        padding-block: 20px;
    }

    .lp-hero {
        padding-top: 48px;
    }

    .lp-hero__title {
        font-size: 32px;
        line-height: 44px;
    }

    .lp-hero__underline {
        display: none;
    }

    .lp-hero__art {
        height: 300px;
    }

    .lp-hero__phones {
        width: 420px;
    }

    .lp-hero__glow {
        width: 760px;
        top: -60px;
    }

    .lp-hero__pattern {
        width: 200px;
    }

    .lp-section__title,
    .lp-enterprise__title,
    .lp-kyc__title,
    .lp-model-card__title {
        font-size: 24px;
    }

    .lp-features,
    .lp-models,
    .lp-pricing {
        padding-block: 64px;
    }

    .lp-dashboard {
        padding-top: 64px;
    }

    .lp-features__grid,
    .lp-pricing__grid {
        grid-template-columns: 1fr;
    }

    .lp-feature {
        padding: 40px 32px;
        min-height: 0;
    }

    .lp-enterprise__badges {
        grid-template-columns: 1fr;
    }

    /* the corner grid would run under the tick list once the card narrows */
    .lp-model-card__pattern {
        display: none;
    }

    .lp-kyc__media img {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .lp-cta__card {
        padding-inline: 24px;
    }

    .lp-cta__title {
        font-size: 32px;
        line-height: 44px;
    }

    .lp-cta .lp-btn-row,
    .lp-hero .lp-btn-row {
        justify-content: center;
    }

    .lp-cta__copy {
        text-align: center;
    }

    .lp-cta__text {
        margin-inline: auto;
    }

    .lp-footer {
        padding-block: 56px;
    }

    .lp-footer__nav {
        gap: 32px;
        margin-top: 56px;
    }

    .lp-footer__col {
        flex: 1 1 140px;
    }
}

@media (max-width: 480px) {
    .lp-header__actions {
        gap: 12px;
    }

    .lp-header__contact {
        min-width: 0;
        padding-inline: 20px;
    }

    .lp-btn--primary {
        padding-inline: 32px;
    }

    .lp-partners__logos {
        gap: 32px;
    }

    .lp-model-card {
        padding: 36px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: .01ms !important;
    }
}