/* ==========================================================================
   Protrip landing page (redesign 2026-10-08, Marex: "far better, more graphic,
   more B2B SaaS-like"). Everything is .lp-* and scoped to body.landing-page;
   colours come from Bootstrap / Able Pro variables so dark mode follows.
   Photos: public/images/landing (Unsplash licence, see README there).
   ========================================================================== */

.landing-page {
    --lp-radius: 20px;
    --lp-ink: var(--pc-heading-color, #1d2630);
    --lp-line: var(--bs-border-color);
    --lp-card: var(--bs-card-bg, #fff);
    --lp-soft: rgba(var(--bs-primary-rgb), .06);
    --lp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .14);
    --lp-shadow-lg: 0 30px 80px -20px rgba(16, 24, 40, .35), 0 12px 24px -12px rgba(16, 24, 40, .2);
    background: var(--bs-body-bg);
}
[data-pc-theme="dark"].landing-page {
    --lp-card: #1b1b1d;
    --lp-soft: rgba(255, 255, 255, .04);
    --lp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
}
.landing-page section { padding: 110px 0; }
.landing-page h1, .landing-page h2, .landing-page h3 { letter-spacing: -.02em; }

/* section openings: eyebrow + big title + one line */
.lp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--bs-primary); margin-bottom: .9rem; }
.lp-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.lp-h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 700; line-height: 1.12; margin-bottom: 1rem; }
.lp-sub { font-size: 1.125rem; color: var(--bs-secondary-color); max-width: 620px; }
.lp-head { margin-bottom: 56px; }
.lp-head.text-center .lp-sub { margin-inline: auto; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.landing-page header.lp-hero { position: relative; overflow: hidden; padding: 150px 0 120px; min-height: 0; background: none; }
.landing-page header.lp-hero > .container { position: relative; z-index: 5; }
.lp-hero h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; line-height: 1.04; margin-bottom: 1.4rem; }
.lp-hero .lead { font-size: 1.2rem; line-height: 1.6; max-width: 540px; margin-bottom: 1.75rem; }
.lp-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
    font-size: .85rem; font-weight: 600; backdrop-filter: blur(8px); margin-bottom: 1.5rem; }
.lp-pill b { background: #fff; color: var(--bs-primary); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; }
.lp-ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 0 0 2rem; color: #fff; font-weight: 600; font-size: .95rem; }
.lp-ticks i { margin-right: .4rem; }
.lp-btn-white { background: #fff; color: var(--bs-primary); border: 0; font-weight: 700; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.lp-btn-white:hover, .lp-btn-white:focus { background: #fff; color: var(--bs-primary); transform: translateY(-1px); }
.lp-btn-glass { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .45); font-weight: 600; backdrop-filter: blur(8px); }
.lp-btn-glass:hover, .lp-btn-glass:focus { background: rgba(255, 255, 255, .24); color: #fff; }
.landing-page .btn-lg { border-radius: 14px; padding: .85rem 1.6rem; transition: transform .15s ease, background-color .15s ease; }

/* the product window */
.lp-stage { position: relative; }
.lp-app { position: relative; border-radius: 18px; background: var(--lp-card); box-shadow: var(--lp-shadow-lg);
    border: 1px solid rgba(255, 255, 255, .5); overflow: hidden; color: var(--bs-body-color); }
[data-pc-theme="dark"] .lp-app { border-color: rgba(255, 255, 255, .08); }
.lp-app-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--lp-line); }
.lp-app-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-line); }
.lp-app-bar span:nth-child(1) { background: #ff6058; } .lp-app-bar span:nth-child(2) { background: #ffbd2e; } .lp-app-bar span:nth-child(3) { background: #29c840; }
.lp-app-bar em { margin-left: .9rem; flex: 1; max-width: 300px; font-style: normal; font-size: .75rem; color: var(--bs-secondary-color);
    background: var(--lp-soft); border-radius: 8px; padding: .25rem .7rem; }
.lp-app-body { padding: 1.1rem; }
.lp-query { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .55rem .55rem .9rem; border-radius: 12px;
    border: 1px solid var(--lp-line); font-size: .82rem; font-weight: 600; margin-bottom: .85rem; }
.lp-query > span:not(.btn) { display: inline-flex; align-items: center; gap: .35rem; color: var(--lp-ink); }
.lp-query > span:not(.btn) i { color: var(--bs-primary); }
.lp-query .sep { width: 1px; height: 18px; background: var(--lp-line); }
.lp-query .btn { margin-left: auto; padding: .35rem .9rem; font-size: .8rem; border-radius: 9px; }
.lp-ops { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.lp-ops span { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .2rem .55rem .2rem .2rem;
    border-radius: 999px; background: var(--lp-soft); border: 1px solid var(--lp-line); }
.lp-ops img { height: 18px; width: 52px; object-fit: contain; background: #fff; border-radius: 999px; padding: 1px 4px; }
.lp-ops small { color: var(--bs-secondary-color); font-weight: 500; }
.lp-row { display: grid; grid-template-columns: 92px 1fr auto; gap: .9rem; align-items: center; padding: .6rem; border-radius: 14px;
    border: 1px solid var(--lp-line); margin-bottom: .6rem; background: var(--lp-card); }
.lp-row:last-child { margin-bottom: 0; }
.lp-row > img { width: 92px; height: 70px; object-fit: cover; border-radius: 10px; }
.lp-row h6 { margin: 0 0 .15rem; font-size: .9rem; color: var(--lp-ink); }
.lp-row .stars { color: #f5b300; font-size: .62rem; margin-left: .3rem; letter-spacing: 1px; }
.lp-row .meta { font-size: .75rem; color: var(--bs-secondary-color); }
.lp-row .tags { display: flex; gap: .3rem; margin-top: .35rem; }
.lp-row .tags span { font-size: .66rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px; background: var(--lp-soft); }
.lp-row .tags .ok { background: rgba(44, 168, 127, .12); color: #2ca87f; }
.lp-row .tags .rq { background: rgba(229, 138, 0, .12); color: #e58a00; }
.lp-row .price { text-align: right; }
.lp-row .price img { height: 16px; width: 48px; object-fit: contain; display: block; margin: 0 0 .25rem auto; }
.lp-row .price strong { display: block; font-size: 1.05rem; color: var(--lp-ink); }
.lp-row .price small { display: block; font-size: .66rem; color: var(--bs-secondary-color); margin-bottom: .3rem; }
.lp-row .price .btn { padding: .22rem .9rem; font-size: .72rem; border-radius: 8px; }

/* floating cards around the window */
.lp-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; border-radius: 14px;
    background: var(--lp-card); box-shadow: var(--lp-shadow-lg); font-size: .8rem; color: var(--bs-body-color); white-space: nowrap; }
.lp-float strong { display: block; color: var(--lp-ink); font-size: .85rem; }
.lp-float .ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.lp-float-a { left: -46px; bottom: -28px; }
.lp-float-b { right: -22px; top: -26px; }

/* ── Operator strip ───────────────────────────────────────────────────── */
.landing-page section.lp-logos { padding: 54px 0; border-bottom: 1px solid var(--lp-line); }
.lp-logos p { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1.6rem; }
.lp-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lp-logo-row span { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 64px; border-radius: 14px; background: #fff;
    border: 1px solid var(--lp-line); padding: 10px 16px; box-shadow: var(--lp-shadow); transition: transform .2s ease; }
.lp-logo-row span { width: 170px; height: 76px; }
.lp-logo-row span:hover { transform: translateY(-2px); }
.lp-logo-row img { max-width: 100%; max-height: 48px; }
[data-pc-theme="dark"] .lp-logo-row span { border-color: transparent; }

/* the integrations under the operators */
.lp-integrations { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lp-integration { position: relative; display: flex; align-items: center; gap: .8rem; min-width: 240px; padding: 12px 18px 12px 12px;
    border-radius: 16px; background: var(--lp-card); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-integration strong { display: block; color: var(--lp-ink); font-size: .95rem; }
.lp-integration span:not(.lp-int-logo) { font-size: .8rem; color: var(--bs-secondary-color); }
.lp-int-logo { width: 72px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--lp-line); display: inline-flex;
    align-items: center; justify-content: center; padding: 5px 8px; flex: 0 0 auto; }
.lp-int-logo img { max-width: 100%; max-height: 100%; }
.lp-int-logo i { font-size: 1.3rem; color: var(--bs-primary); }
[data-pc-theme="dark"] .lp-int-logo { border-color: transparent; }
.lp-integration em { position: absolute; top: -9px; right: 12px; font-style: normal; font-size: .66rem; font-weight: 700; padding: .1rem .5rem;
    border-radius: 999px; background: rgba(229, 138, 0, .14); color: #e58a00; backdrop-filter: blur(6px); }

/* ── Bento grid ───────────────────────────────────────────────────────── */
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-tile { position: relative; border-radius: var(--lp-radius); background: var(--lp-card); border: 1px solid var(--lp-line); padding: 28px;
    overflow: hidden; box-shadow: var(--lp-shadow); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; min-height: 300px; }
.lp-tile:hover { transform: translateY(-3px); }
.lp-tile.wide { grid-column: span 2; }
.lp-tile h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.lp-tile p { color: var(--bs-secondary-color); margin-bottom: 0; max-width: 420px; }
.lp-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.1rem; }
.lp-tile .lp-visual { margin-top: auto; padding-top: 1.4rem; }

.lp-tile.photo { color: #fff; border: 0; justify-content: flex-end; min-height: 380px; background-size: cover; background-position: center; }
.lp-tile.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 40, 0) 15%, rgba(10, 20, 40, .35) 45%, rgba(10, 20, 40, .88) 100%); }
.lp-tile.photo > * { position: relative; }
.lp-tile.photo h3, .lp-tile.photo p { color: #fff; }
.lp-tile.photo p { opacity: .88; }
.lp-glass { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px); border-radius: 14px; color: #fff; }

/* mini UI bits inside tiles */
.lp-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.lp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.lp-flow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lp-flow i.fa-arrow-right { font-size: .7rem; color: var(--bs-secondary-color); }
.lp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lp-list li { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 12px; background: var(--lp-soft); font-size: .84rem; font-weight: 600; }
.lp-list li .lp-new { margin-left: auto; font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: rgba(44, 168, 127, .14); color: #2ca87f; }
.lp-bar { height: 10px; border-radius: 99px; background: var(--lp-soft); overflow: hidden; display: flex; }
.lp-bar span { display: block; height: 100%; }
.lp-legend { display: flex; justify-content: space-between; font-size: .76rem; color: var(--bs-secondary-color); margin-top: .5rem; }
.lp-legend b { color: var(--lp-ink); }
.lp-avatars { display: flex; }
.lp-avatars span { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem;
    font-weight: 700; color: #fff; border: 3px solid var(--lp-card); margin-left: -10px; }
.lp-avatars span:first-child { margin-left: 0; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: lp-step; }
.lp-step { position: relative; border-radius: var(--lp-radius); overflow: hidden; background: var(--lp-card); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-step-photo { height: 200px; background-size: cover; background-position: center; position: relative; }
.lp-step-photo::after { content: counter(lp-step, decimal-leading-zero); counter-increment: lp-step; position: absolute; left: 20px; bottom: -22px;
    width: 52px; height: 52px; border-radius: 16px; background: var(--bs-primary); color: #fff; font-weight: 800; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(var(--bs-primary-rgb), .7); }
.lp-step-body { padding: 38px 24px 26px; }
.lp-step-body h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .45rem; }
.lp-step-body p { color: var(--bs-secondary-color); margin: 0; }

/* ── Offers split ─────────────────────────────────────────────────────── */
.lp-collage { position: relative; height: 480px; }
.lp-collage > div { position: absolute; border-radius: 22px; background-size: cover; background-position: center; box-shadow: var(--lp-shadow-lg); }
.lp-collage .c1 { left: 0; top: 0; width: 62%; height: 74%; }
.lp-collage .c2 { right: 0; top: 12%; width: 42%; height: 46%; }
.lp-collage .c3 { right: 6%; bottom: 0; width: 50%; height: 40%; }
.lp-collage .lp-offer { position: absolute; left: 6%; bottom: 4%; width: 270px; padding: 16px; border-radius: 18px; background: var(--lp-card);
    box-shadow: var(--lp-shadow-lg); color: var(--bs-body-color); z-index: 2; }
.lp-offer h6 { margin: 0 0 .15rem; color: var(--lp-ink); }
.lp-offer .btn { border-radius: 10px; }
.lp-checks { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .9rem; }
.lp-checks li { display: flex; gap: .85rem; align-items: flex-start; }
.lp-checks li > i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; margin-top: .1rem; }
.lp-checks strong { display: block; color: var(--lp-ink); }
.lp-checks span { color: var(--bs-secondary-color); font-size: .95rem; }

/* ── Facts band ───────────────────────────────────────────────────────── */
.lp-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 24px; background: var(--lp-card); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-facts > div { padding: 34px 30px; }
.lp-facts > div + div { border-left: 1px solid var(--lp-line); }
.lp-facts strong { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-bottom: .55rem;
    background: linear-gradient(120deg, var(--bs-primary), #8451fb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-facts span { color: var(--bs-secondary-color); font-weight: 500; }

/* ── Closing call ─────────────────────────────────────────────────────── */
.lp-cta { position: relative; border-radius: 28px; overflow: hidden; padding: 72px 64px; color: #fff; background-size: cover; background-position: center; }
.lp-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 54, 140, .94) 0%, rgba(70, 60, 220, .82) 50%, rgba(70, 60, 220, .25) 100%); }
.lp-cta > * { position: relative; }
.lp-cta h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; margin-bottom: .8rem; }
.lp-cta p { font-size: 1.15rem; opacity: .9; max-width: 520px; margin-bottom: 2rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.landing-page footer.lp-footer { padding: 70px 0 34px; border-top: 1px solid var(--lp-line); }
.lp-footer h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin-bottom: 1rem; }
.lp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.lp-footer a { color: var(--bs-body-color); }
.lp-footer a:hover { color: var(--bs-primary); }

/* ── Reveal on scroll: fade + soft blur, no movement (Marex's pt-focus taste) ── */
.js .lp-reveal { opacity: 0; filter: blur(6px); transition: opacity .45s ease, filter .45s ease; }
.js .lp-reveal.is-in { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
    .js .lp-reveal { opacity: 1; filter: none; transition: none; }
    .lp-tile:hover, .landing-page .btn-lg:hover { transform: none; }
}

/* ── Smaller screens (desktop-first; just keep it tidy) ───────────────── */
@media (max-width: 1199.98px) {
    .lp-float-a { left: -12px; } .lp-float-b { right: -8px; }
}
@media (max-width: 991.98px) {
    .landing-page section { padding: 80px 0; }
    .landing-page header.lp-hero { padding: 120px 0 90px; }
    .lp-stage { margin-top: 56px; }
    .lp-bento, .lp-steps { grid-template-columns: 1fr 1fr; }
    .lp-facts { grid-template-columns: 1fr 1fr; }
    .lp-facts > div:nth-child(3) { border-left: 0; }
    .lp-facts > div:nth-child(n+3) { border-top: 1px solid var(--lp-line); }
    .lp-collage { margin-bottom: 48px; }
}
@media (max-width: 767.98px) {
    .lp-bento, .lp-steps { grid-template-columns: 1fr; }
    .lp-tile.wide { grid-column: auto; }
    .lp-float { display: none; }
    .lp-row { grid-template-columns: 64px 1fr; }
    .lp-row > img { width: 64px; height: 56px; }
    .lp-row .price { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
    .lp-row .price img, .lp-row .price small { display: none; }
    .lp-cta { padding: 48px 26px; }
    .lp-collage { height: 380px; }
}
.lp-int-logo:has(> i) { background: var(--lp-soft); }