/*
 * The home page, and only the home page.
 *
 * This lived in four <style> blocks inside the markup — 42 KB re-sent on
 * every single request, unminified and uncacheable, because a style element
 * in the body is part of the document. As a file it is fetched once and then
 * served from cache for as long as the mtime in its URL does not change,
 * which for a marketing page is months.
 *
 * Scoped by the .lp- prefix throughout, so nothing here can reach the app.
 */


/* ==================================================================
   Tokens, layout, hero, features, workflow, testimonials, FAQ, contact
   ================================================================== */

/* Body copy sits at 14px, in a slightly darker grey.

   Card text was 0.82rem in #5a6e82 - 5.3:1 on white, which passes, but at
   13px on a screen at arm's length it read as washed out rather than quiet.
   14px and #4b6076 is 6.5:1: still unmistakably secondary to the headings,
   legible without leaning in. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    --ink:   #0d2137;
    --muted: #4b6076;
    --line:  rgba(13,33,55,0.09);
    --teal:  #0d9488;
    --blue:  #2563eb;
    --gold:  #f59e0b;
    --surf:  #f4f8fc;
}

/* ── Scope reset ─────────────────────────────────────────────────────────── */
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp { color: var(--ink); font-family: Montserrat, Roboto, sans-serif; }
.lp h1,.lp h2,.lp h3,.lp h4 { margin:0; }
.lp p { margin:0; }
.lp ul { margin:0; padding:0; list-style:none; }
.lp a { text-decoration:none; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.lp-wrap { width:100%; max-width:1140px; margin:0 auto; padding:0 1.5rem; }
.lp-sec  { padding:90px 0; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.lp-eye {
    display:inline-flex; align-items:center; gap:0.5rem;
    margin-bottom:1rem;
    color:var(--teal); font-size:0.68rem; font-weight:800;
    letter-spacing:0.14em; text-transform:uppercase;
}
.lp-eye::before {
    content:''; width:0.4rem; height:0.4rem; border-radius:999px;
    background:var(--gold); box-shadow:0 0 0 5px rgba(245,158,11,0.14);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.lp-h2 {
    font-size: clamp(1.9rem,3.5vw,3rem);
    font-weight:800; line-height:1.08; letter-spacing:-0.035em; color:var(--ink);
}
.lp-body {
    font-size:1rem; line-height:1.8; color:var(--muted); margin-top:1rem;
}
.lp-sec-head { max-width:660px; margin:0 auto 3.5rem; text-align:center; }

/* Hover moves a control, never a card.

   Nineteen rules used to lift or scale on hover, so running the pointer down
   the page made the whole thing twitch. A button may answer the pointer,
   because a button is a thing you press. A feature card is text to read, and
   text that jumps when the mouse crosses it is harder to read, not livelier.
   Cards answer with their border and a softer shadow, and hold still. */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lp-btn {
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.82rem 1.55rem; border-radius:999px;
    font-size:0.88rem; font-weight:800; line-height:1;
    transition:transform 0.18s, box-shadow 0.18s, filter 0.18s;
    border:none; cursor:pointer;
}
.lp-btn:hover { transform:translateY(-2px); }
.lp-btn--primary {
    background:linear-gradient(135deg,var(--teal),var(--blue));
    color:#fff !important; box-shadow:0 14px 30px rgba(13,148,136,0.26);
}
.lp-btn--primary:hover { filter:saturate(1.1); box-shadow:0 20px 36px rgba(13,148,136,0.32); }
.lp-btn--outline {
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3);
    color:#fff !important; backdrop-filter:blur(6px);
}
.lp-btn--outline:hover { background:rgba(255,255,255,0.22); }
.lp-btn--light {
    background:#fff; border:1px solid var(--line);
    color:var(--ink) !important; box-shadow:0 12px 28px rgba(13,33,55,0.08);
}
.lp-btn--ghost {
    background:#fff; border:1px solid rgba(13,148,136,0.4);
    color:var(--teal) !important;
}
.lp-btn--ghost:hover { background:rgba(13,148,136,0.06); box-shadow:0 12px 26px rgba(13,148,136,0.18); }
.lp-btn-row { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.75rem; }

/* ══ HERO ════════════════════════════════════════════════════════════════════ */
.lp-hero {
    position: relative;
    padding: 130px 0 100px;
    overflow: hidden;
    background: #070f1c;
}
/* Subtle grid */
.lp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(13,148,136,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,148,136,0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
/* Glow blobs */
.lp-hero::after {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    right: -100px; top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,148,136,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.lp-hero__glow2 {
    position: absolute;
    width: 500px; height: 500px;
    left: -80px; bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, transparent 65%);
    pointer-events: none;
}

.lp-hero__grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

/* Left column */
.lp-hero__left { color: #fff; }

.lp-hero__tag {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.32rem 0.85rem; border-radius: 999px;
    border: 1px solid rgba(13,148,136,0.35);
    background: rgba(13,148,136,0.1);
    font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #5eead4; margin-bottom: 1.4rem;
}
.lp-hero__tag-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.3);
    animation: heroDot 1.8s ease-in-out infinite;
}
@keyframes heroDot { 0%,100%{opacity:1} 50%{opacity:0.4} }

.lp-hero__title {
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    font-weight: 900; line-height: 1.06;
    letter-spacing: -0.04em; color: #f0f9ff;
    margin-bottom: 1.3rem;
}
.lp-hero__title em {
    font-style: normal;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-hero__lead {
    font-size: 1rem; line-height: 1.8;
    color: rgba(203,229,245,0.75);
    max-width: 480px; margin-bottom: 2rem;
}

.lp-hero__divider {
    width: 40px; height: 2px;
    background: linear-gradient(90deg, #0d9488, #2563eb);
    border-radius: 999px; margin-bottom: 2rem;
}

.lp-hero__stats {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.lp-hstat strong { display: block; font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.04em; }
.lp-hstat span   { display: block; margin-top: 0.2rem; font-size: 0.7rem; font-weight: 700; color: rgba(203,229,245,0.55); text-transform: uppercase; letter-spacing: 0.08em; }

/* Right column — real product screenshot in a browser frame */
.lp-hero__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Browser-chrome wrapper */
.lp-browser {
    position: relative;
    width: 100%;
    max-width: 620px;
    border-radius: 14px;
    overflow: visible; /* allow floating chip + stat to escape */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.3),
        0 30px 80px -20px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.08);
    transform: translateY(0) rotate(-0.4deg);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.lp-browser:hover { transform: translateY(-4px) rotate(0deg); }

.lp-browser__chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lp-browser__btn {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-browser__btn--r { background: #ff5f57; }
.lp-browser__btn--y { background: #febc2e; }
.lp-browser__btn--g { background: #28c840; }

.lp-browser__addr {
    flex: 1;
    margin-left: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    max-width: 280px;
}
.lp-browser__addr .fa-lock { font-size: 0.65rem; color: #5eead4; }

.lp-browser__screen {
    background: #0f172a;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.lp-browser__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Floating "Live" chip overlaid on the top-left of the screenshot */
.lp-browser__chip {
    position: absolute;
    top: -14px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(13,148,136,0.45);
    z-index: 2;
}
.lp-browser__chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
    animation: heroDot 1.4s ease-in-out infinite;
}

/* Floating trip-stat card overlapping the bottom-right corner */
.lp-browser__stat {
    position: absolute;
    bottom: -22px;
    right: -16px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.05rem;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.1),
        0 20px 40px -10px rgba(0,0,0,0.4);
    z-index: 2;
}
.lp-browser__stat-icon {
    width: 2.2rem; height: 2.2rem;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.lp-browser__stat > div { display: flex; flex-direction: column; line-height: 1.1; }
.lp-browser__stat strong {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.lp-browser__stat span {
    font-size: 0.66rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.15rem;
}

@media (max-width: 991px) {
    .lp-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
    .lp-hero { padding: 120px 0 80px; }
    .lp-browser { transform: none; max-width: 560px; }
    .lp-browser:hover { transform: translateY(-3px); }
}
@media (max-width: 600px) {
    .lp-hero { padding: 110px 0 60px; }
    .lp-hero__stats { gap: 1.25rem; }
    .lp-browser__addr { display: none; }
    .lp-browser__chip { font-size: 0.66rem; padding: 0.32rem 0.7rem; left: 16px; top: -12px; }
    .lp-browser__stat { right: -8px; bottom: -16px; padding: 0.65rem 0.85rem; }
    .lp-browser__stat strong { font-size: 1rem; }
    .lp-browser__stat span { font-size: 0.6rem; }
}

/* ══ TRUST BAR (light) ═══════════════════════════════════════════════════════ */
.lp-trust {
    padding: 24px 0;
    background: linear-gradient(180deg, #fff, #f7fbfc);
    border-bottom: 1px solid var(--line);
}
.lp-trust__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.6rem;
    flex-wrap: wrap;
}
.lp-tstat {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    transition: transform 0.18s;
}
.lp-tstat:hover { color: #0f766e; }
.lp-tstat__ico {
    position: relative; display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: 12px; flex-shrink: 0;
    background: rgba(13,148,136,0.09); color: var(--teal); font-size: 0.98rem;
}
.lp-tstat--live .lp-tstat__ico::after {
    content: ''; position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px; border-radius: 50%; background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2); animation: lpPulse 1.8s ease-in-out infinite;
}
.lp-tstat strong {
    display: block; font-size: 1.3rem; font-weight: 900; line-height: 1;
    letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lp-tstat span { display: block; margin-top: 0.22rem; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.lp-trust__div { display: none; }
@keyframes lpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 600px) {
    .lp-trust { padding: 20px 0; }
    .lp-trust__inner { gap: 1.1rem 1.6rem; }
    .lp-tstat strong { font-size: 1.15rem; }
    .lp-tstat__ico { width: 2.2rem; height: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { .lp-tstat, .lp-tstat--live .lp-tstat__ico::after { transition: none; animation: none; } }

/* ══ FEATURES ════════════════════════════════════════════════════════════════ */
.lp-features { background:var(--surf); }
.lp-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.lp-feat {
    background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem 1.5rem;
    box-shadow:0 1px 4px rgba(13,33,55,0.04), 0 4px 16px rgba(13,33,55,0.04);
    transition:transform 0.2s, box-shadow 0.2s;
    position:relative; overflow:hidden;
}
.lp-feat::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    border-radius:20px 20px 0 0;
    background:var(--feat-accent, linear-gradient(90deg,#0d9488,#2563eb));
    opacity:0; transition:opacity 0.2s;
}
.lp-feat:hover { border-color:rgba(13,148,136,0.34); box-shadow:0 6px 20px rgba(13,33,55,0.07); }
.lp-feat:hover::before { opacity:1; }

.lp-feat__icon {
    display:grid; place-items:center;
    width:3rem; height:3rem; border-radius:14px;
    font-size:1.2rem; margin-bottom:1rem;
    background:var(--feat-bg, rgba(13,148,136,0.09));
    color:var(--feat-color, #0d9488);
}
.lp-feat h3 { font-size:0.97rem; font-weight:800; color:var(--ink); margin-bottom:0.45rem; line-height:1.3; }
.lp-feat p  { font-size:0.875rem; color:var(--muted); line-height:1.72; }

/* One accent, not six.

   These six cards carried six different hues - blue, teal, green, amber, rose
   and indigo - so the grid read as a chart legend rather than as one product.
   The modifier classes stay, so the markup does not change and a card can
   still be given its own colour if there is ever a reason to; they simply all
   resolve to the brand teal now. What tells the cards apart is the icon and
   the words, which is what should tell them apart. */
.lp-feat--blue,
.lp-feat--teal,
.lp-feat--green,
.lp-feat--amber,
.lp-feat--rose,
.lp-feat--indigo { --feat-bg:rgba(13,148,136,0.08); --feat-color:#0d9488; --feat-accent:linear-gradient(90deg,#0d9488,#14b8a6); }

/* ══ PRODUCT ═════════════════════════════════════════════════════════════════ */
.lp-product { background:#fff; }
.lp-product__grid { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
.lp-img-wrap { position:relative; }
/* Soft green glow behind the transparent tablet PNG (blurred radial, no card). */
.lp-img-wrap::before {
    content:''; position:absolute; z-index:0; pointer-events:none;
    inset:10% 8%; border-radius:50%;
    background:radial-gradient(circle, rgba(16,185,129,0.32), rgba(13,148,136,0.12) 50%, transparent 70%);
    filter:blur(46px);
}
/* Transparent PNG mockup — a drop-shadow follows the tablet shape (no card/border). */
.lp-img-wrap img { position:relative; z-index:1; width:100%; filter: drop-shadow(0 26px 38px rgba(13,33,55,0.22)); }
.lp-img-badge {
    position:absolute; right:-1rem; bottom:1.5rem; max-width:250px; z-index:2;
    display:flex; gap:0.7rem; align-items:flex-start;
    padding:0.95rem 1.05rem; border-radius:16px;
    background:rgba(255,255,255,0.45);
    border:1px solid rgba(255,255,255,0.45);
    color:#0d2137; text-shadow:0 1px 2px rgba(255,255,255,0.6);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 20px 46px rgba(13,33,55,0.2);
}
.lp-img-badge__ico { display:grid; place-items:center; width:2rem; height:2rem; border-radius:9px; flex-shrink:0; background:rgba(13,148,136,0.1); color:#0d9488; font-size:0.8rem; }
.lp-img-badge strong { display:block; font-size:0.86rem; font-weight:800; color:#0d2137; }
.lp-img-badge span   { display:block; margin-top:0.25rem; font-size:0.75rem; color:#5a6e82; line-height:1.55; }
.lp-checks { display:grid; gap:0.7rem; margin-top:1.5rem; }
.lp-check { display:flex; gap:0.7rem; align-items:flex-start; font-size:0.9rem; color:#42566a; line-height:1.65; }
.lp-check i {
    display:grid; place-items:center; flex:0 0 1.45rem; width:1.45rem; height:1.45rem;
    margin-top:0.1rem; border-radius:999px;
    background:rgba(13,148,136,0.1); color:var(--teal); font-size:0.7rem;
}

/* ══ WORKFLOW (dark) ═════════════════════════════════════════════════════════ */
.lp-workflow {
    background: linear-gradient(135deg, #041426, #064854);
    color:#fff;
}
.lp-workflow .lp-h2   { color:#fff; }
.lp-workflow .lp-body { color:rgba(240,249,255,0.72); }
.lp-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.lp-step {
    padding:1.4rem; border:1px solid rgba(255,255,255,0.1); border-radius:20px;
    background:rgba(255,255,255,0.07); backdrop-filter:blur(8px);
}
.lp-step__num {
    display:inline-flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:999px;
    background:var(--gold); color:#1f2937; font-size:0.875rem; font-weight:900;
    margin-bottom:1rem;
}
.lp-step h3 { font-size:1rem; font-weight:800; color:#fff; margin-bottom:0.5rem; }
.lp-step p  { font-size:0.875rem; color:rgba(240,249,255,0.68); line-height:1.65; }

/* ══ TESTIMONIALS ════════════════════════════════════════════════════════════ */
.lp-testimonials { background:var(--surf); }
.lp-testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.lp-testi {
    background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.6rem;
    box-shadow:0 2px 10px rgba(13,33,55,0.04);
    display:flex; flex-direction:column; gap:1rem;
}
.lp-testi__stars { color:#f59e0b; font-size:0.875rem; letter-spacing:0.04em; }
.lp-testi__body  { font-size:0.88rem; color:var(--muted); line-height:1.75; flex:1; font-style:italic; }
.lp-testi__body::before { content:'\201C'; font-size:1.2rem; color:var(--teal); font-style:normal; line-height:0; vertical-align:-0.2rem; margin-right:0.2rem; }
.lp-testi__footer { display:flex; align-items:center; gap:0.75rem; padding-top:1rem; border-top:1px solid var(--line); }
.lp-testi__avatar {
    flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    color:#fff; font-size:0.75rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    letter-spacing:0.04em;
}
.lp-testi__name  { font-size:0.875rem; font-weight:800; color:var(--ink); }
.lp-testi__role  { font-size:0.75rem; color:var(--muted); }

/* ══ PRICING ═════════════════════════════════════════════════════════════════ */
.lp-pricing { background:#fff; }
.lp-plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start; }
.lp-plan {
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.65rem;
    box-shadow:0 4px 18px rgba(13,33,55,0.05);
}
.lp-plan--hot {
    border-color:rgba(13,148,136,0.3);
    box-shadow:0 22px 54px rgba(13,148,136,0.14);
    transform:translateY(-10px);
}
.lp-plan__badge {
    display:inline-flex; margin-bottom:0.75rem;
    padding:0.22rem 0.65rem; border-radius:999px;
    background:rgba(13,148,136,0.1); color:var(--teal);
    font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
}
.lp-plan h3  { font-size:1.1rem; font-weight:800; color:var(--ink); margin-bottom:0.3rem; }
.lp-plan > p { font-size:0.875rem; color:var(--muted); }
.lp-plan__price { display:flex; align-items:flex-end; gap:0.28rem; margin:1.1rem 0; }
.lp-plan__price strong { font-size:2.4rem; font-weight:900; line-height:1; color:var(--ink); }
.lp-plan__price span   { font-size:0.875rem; color:var(--muted); font-weight:600; padding-bottom:0.2rem; }
.lp-plan ul    { display:grid; gap:0.52rem; margin-top:1.1rem; }
.lp-plan li    { display:flex; gap:0.5rem; align-items:flex-start; font-size:0.875rem; color:var(--muted); line-height:1.4; }
.lp-plan li i  { color:var(--teal); margin-top:0.15rem; flex-shrink:0; }
.lp-plan__cta  { display:block; margin-top:1.35rem; padding:0.72rem; border-radius:999px; text-align:center; font-size:0.875rem; font-weight:800; transition:transform 0.15s, box-shadow 0.15s; }
.lp-plan__cta--outline {
    border:1px solid var(--line); color:var(--ink) !important;
    background:#fff;
}
.lp-plan__cta--outline:hover { border-color:var(--teal); color:var(--teal) !important; }
.lp-plan__cta--solid {
    background:linear-gradient(135deg,var(--teal),var(--blue));
    color:#fff !important; box-shadow:0 12px 28px rgba(13,148,136,0.24);
}
.lp-plan__cta--solid:hover { transform:translateY(-1px); box-shadow:0 18px 34px rgba(13,148,136,0.3); }

/* ══ DEVICES ═════════════════════════════════════════════════════════════════ */
.lp-devices { background:var(--surf); }
.lp-dev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.lp-dev {
    background:#fff; border:1px solid var(--line); border-radius:22px; padding:1.5rem;
    text-align:center; box-shadow:0 2px 10px rgba(13,33,55,0.04);
    transition:transform 0.18s, box-shadow 0.18s;
    display:flex; flex-direction:column;
}
.lp-dev:hover { border-color:rgba(13,148,136,0.34); box-shadow:0 6px 20px rgba(13,33,55,0.08); }
.lp-dev img   { width:130px; height:130px; object-fit:contain; margin:0 auto 1rem; display:block; }
.lp-dev h3    { font-size:0.95rem; font-weight:800; color:var(--ink); margin-bottom:0.4rem; }
.lp-dev p     { font-size:0.875rem; color:var(--muted); line-height:1.68; flex:1; }
.lp-dev__tag  {
    display:inline-flex; justify-content:center; margin-top:1rem;
    padding:0.32rem 0.8rem; border-radius:999px;
    background:rgba(37,99,235,0.08); color:var(--blue); font-size:0.78rem; font-weight:800;
}

/* ══ FAQ ═════════════════════════════════════════════════════════════════════ */
.lp-faq { background:#fff; }
.lp-faq-list { max-width:760px; margin:0 auto; display:grid; gap:0.75rem; }
.lp-faq-item { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(13,33,55,0.04); transition:border-color 0.18s, box-shadow 0.18s; }
.lp-faq-item:hover { border-color:rgba(13,148,136,0.3); box-shadow:0 8px 22px rgba(13,33,55,0.07); }
.lp-faq-item:has(.lp-faq-item__q[aria-expanded="true"]) { border-color:rgba(13,148,136,0.4); box-shadow:0 10px 26px rgba(13,148,136,0.12); }
.lp-faq-item__q {
    width:100%; padding:1.15rem 1.3rem;
    background:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    font-size:0.95rem; font-weight:700; color:var(--ink);
    font-family:Montserrat,Roboto,sans-serif; text-align:left;
    transition:color 0.15s;
}
.lp-faq-item__q:hover, .lp-faq-item__q[aria-expanded="true"] { color:#0f766e; }
.lp-faq-item__q i {
    display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%;
    font-size:0.7rem; color:var(--teal); background:rgba(13,148,136,0.1); flex-shrink:0;
    transition:transform 0.25s, background 0.2s;
}
.lp-faq-item__q[aria-expanded="true"] i { transform:rotate(180deg); background:rgba(13,148,136,0.18); }
.lp-faq-item__a {
    padding:0 1.3rem 1.2rem;
    font-size:0.88rem; color:var(--muted); line-height:1.75;
}

/* ══ CONTACT ═════════════════════════════════════════════════════════════════ */
.lp-contact { background:var(--surf); }
.lp-contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.lp-contact__info { display:grid; gap:1rem; }
.lp-cinfo {
    position:relative; overflow:hidden;
    display:flex; gap:1rem; align-items:flex-start;
    padding:1.2rem 1.2rem 1.2rem 1.35rem; background:#fff; border:1px solid var(--line);
    border-radius:16px; box-shadow:0 2px 8px rgba(13,33,55,0.04);
    transition:transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.lp-cinfo::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg,var(--teal),var(--blue));
    transform:scaleY(0); transform-origin:top; transition:transform 0.22s ease;
}
.lp-cinfo:hover::before { transform:scaleY(1); }
.lp-cinfo:hover { border-color:rgba(13,148,136,0.34); box-shadow:0 6px 20px rgba(13,33,55,0.08); }
.lp-cinfo__icon {
    flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:12px;
    background:rgba(13,148,136,0.09); color:var(--teal);
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    transition:background 0.2s, color 0.2s;
}
.lp-cinfo:hover .lp-cinfo__icon { background:linear-gradient(135deg,var(--teal),var(--blue)); color:#fff; }
.lp-cinfo__label { font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:0.22rem; }
.lp-cinfo__val   { font-size:0.9rem; font-weight:700; color:var(--ink); line-height:1.45; }

/* Contact form */
.lp-form { background:#fff; border:1px solid var(--line); border-radius:22px; padding:2rem; box-shadow:0 4px 18px rgba(13,33,55,0.05); }
.lp-form__head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem 1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.lp-form h3 { font-size:1.1rem; font-weight:800; color:var(--ink); margin:0; }
.lp-form__status { display:inline-flex; align-items:center; gap:0.45rem; font-size:0.72rem; font-weight:700; color:#0f766e; background:rgba(13,148,136,0.08); border:1px solid rgba(13,148,136,0.16); padding:0.34rem 0.7rem; border-radius:999px; }
.lp-form__dot { width:0.5rem; height:0.5rem; border-radius:999px; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.18); animation:lpPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lp-form__dot { animation:none; } }
.lp-field { margin-bottom:1rem; }
.lp-field label { display:block; font-size:0.76rem; font-weight:700; color:var(--muted); margin-bottom:0.35rem; letter-spacing:0.05em; text-transform:uppercase; }
.lp-field input, .lp-field textarea, .lp-field select {
    width:100%; padding:0.72rem 1rem;
    border:1px solid var(--line); border-radius:10px;
    background:#fff; font-size:0.9rem; color:var(--ink);
    font-family:Montserrat,Roboto,sans-serif;
    transition:border-color 0.15s, box-shadow 0.15s; outline:none;
}
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus {
    border-color:rgba(13,148,136,0.5);
    box-shadow:0 0 0 3px rgba(13,148,136,0.08);
}
.lp-field textarea { min-height:110px; resize:vertical; }
.lp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lp-form__submit {
    width:100%; padding:0.82rem;
    border-radius:999px; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--teal),var(--blue));
    color:#fff; font-size:0.9rem; font-weight:800;
    font-family:Montserrat,Roboto,sans-serif;
    box-shadow:0 12px 28px rgba(13,148,136,0.24);
    transition:transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.lp-form__submit:hover { transform:translateY(-1px); filter:saturate(1.1); box-shadow:0 18px 34px rgba(13,148,136,0.3); }

/* ══ FINAL CTA ═══════════════════════════════════════════════════════════════ */
.lp-cta {
    padding:90px 0; color:#fff;
    background: linear-gradient(110deg, #041223 0%, #064854 100%);
}
.lp-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; }
.lp-cta h2 {
    font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:900;
    letter-spacing:-0.04em; line-height:1.1; color:#fff; max-width:580px;
}
.lp-cta p { margin-top:0.7rem; font-size:1rem; color:rgba(240,249,255,0.74); max-width:540px; line-height:1.75; }

/* ── Scroll offset for sticky navbar ─────────────────────────────────────── */
.lp section[id] { scroll-margin-top: 72px; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .lp-feat-grid,
    .lp-plan-grid,
    .lp-dev-grid,
    .lp-testi-grid { grid-template-columns:repeat(2,1fr); }
    .lp-steps { grid-template-columns:repeat(2,1fr); }
    .lp-product__grid,
    .lp-contact__grid { grid-template-columns:1fr; gap:2.5rem; }
    .lp-plan--hot { transform:none; }
    .lp-console__body { grid-template-columns:1fr; }
}

@media (max-width: 767px) {
    .lp-sec { padding:64px 0; }
    .lp-hero { padding:120px 0 72px; min-height:auto; }
    .lp-hero__stats { grid-template-columns:1fr 1fr; }
    .lp-feat-grid,
    .lp-plan-grid,
    .lp-dev-grid,
    .lp-testi-grid,
    .lp-steps { grid-template-columns:1fr; }
    .lp-trust__div { display:none; }
    .lp-trust__inner { gap:1.5rem; }
    .lp-console__map { min-height:200px; }
    .lp-img-badge { position:static; max-width:none; margin-top:1rem; }
    .lp-cta__inner { flex-direction:column; align-items:flex-start; }
    .lp-form-row { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-console__dot,.lp-console__ring { animation:none; }
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.rv, .lp-sec-head {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
    will-change: opacity, transform;
}
.rv.in, .lp-sec-head.in { opacity: 1; transform: none; }

.lp-feat-grid .rv:nth-child(2) { transition-delay: 0.09s; }
.lp-feat-grid .rv:nth-child(3) { transition-delay: 0.18s; }
.lp-feat-grid .rv:nth-child(4) { transition-delay: 0.09s; }
.lp-feat-grid .rv:nth-child(5) { transition-delay: 0.18s; }
.lp-feat-grid .rv:nth-child(6) { transition-delay: 0.27s; }
.lp-steps      .rv:nth-child(2) { transition-delay: 0.10s; }
.lp-steps      .rv:nth-child(3) { transition-delay: 0.20s; }
.lp-steps      .rv:nth-child(4) { transition-delay: 0.30s; }
.lp-testi-grid .rv:nth-child(2) { transition-delay: 0.12s; }
.lp-testi-grid .rv:nth-child(3) { transition-delay: 0.24s; }
.lp-plan-grid  .rv:nth-child(2) { transition-delay: 0.12s; }
.lp-plan-grid  .rv:nth-child(3) { transition-delay: 0.24s; }
.lp-dev-grid   .rv:nth-child(2) { transition-delay: 0.12s; }
.lp-dev-grid   .rv:nth-child(3) { transition-delay: 0.24s; }
.lp-faq-list   .rv:nth-child(2) { transition-delay: 0.06s; }
.lp-faq-list   .rv:nth-child(3) { transition-delay: 0.12s; }
.lp-faq-list   .rv:nth-child(4) { transition-delay: 0.18s; }
.lp-faq-list   .rv:nth-child(5) { transition-delay: 0.24s; }
.lp-faq-list   .rv:nth-child(6) { transition-delay: 0.30s; }
.lp-contact__info .rv:nth-child(2) { transition-delay: 0.10s; }
.lp-contact__info .rv:nth-child(3) { transition-delay: 0.20s; }
.lp-contact__info .rv:nth-child(4) { transition-delay: 0.30s; }
.lp-new-grid .rv:nth-child(2) { transition-delay: 0.08s; }
.lp-new-grid .rv:nth-child(3) { transition-delay: 0.14s; }
.lp-new-grid .rv:nth-child(4) { transition-delay: 0.20s; }
.lp-new-grid .rv:nth-child(5) { transition-delay: 0.26s; }
.lp-new-grid .rv:nth-child(6) { transition-delay: 0.32s; }

.lp-plan--hot.in { transform: translateY(-10px); }
@media (max-width: 991px) { .lp-plan--hot.in { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .rv, .lp-sec-head { opacity: 1; transform: none; transition: none; }
}

/* ── Card hover lifts (workflow steps & testimonials) ───────────────────── */
.lp-steps .lp-step,
.lp-testi-grid .lp-testi {
    transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.26s ease,
                border-color 0.26s ease,
                background-color 0.26s ease,
                opacity 0.6s cubic-bezier(0.22,1,0.36,1);
}
.lp-step__num, .lp-testi__avatar { transition: transform 0.26s ease, box-shadow 0.26s ease; }

.lp-step:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(245,158,11,0.45);
    box-shadow: 0 20px 42px rgba(0,0,0,0.3);
}
.lp-step:hover .lp-step__num { box-shadow: 0 0 0 6px rgba(245,158,11,0.18); }

.lp-testi:hover {
    border-color: rgba(13,148,136,0.28);
    box-shadow: 0 18px 38px rgba(13,33,55,0.1);
}
.lp-testi:hover .lp-testi__avatar { box-shadow: 0 6px 16px rgba(13,148,136,0.28); }

@media (prefers-reduced-motion: reduce) {
    .lp-step:hover, .lp-testi:hover { transform: none; }
}

/* ── Device highlight ───────────────────────────────────────────────────── */
.lp-dev { position: relative; }
.lp-dev--pick {
    border-color: rgba(13,148,136,0.45);
    box-shadow: 0 0 0 4px rgba(13,148,136,0.08), 0 20px 52px rgba(13,148,136,0.18);
}
.lp-dev--pick:hover {
    box-shadow: 0 0 0 5px rgba(13,148,136,0.11), 0 28px 60px rgba(13,148,136,0.22);
}
.lp-dev__badge {
    position: absolute;
    top: -13px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; padding: 0.22rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #2563eb);
    color: #fff; font-size: 0.63rem; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(13,148,136,0.38);
}

/* ── Section edges ──────────────────────────────────────────────────────── */
.lp-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(13,148,136,0.18) 35%, rgba(37,99,235,0.13) 65%, transparent);
}

/* ══ WHAT'S NEW ══════════════════════════════════════════════════════════════ */
.lp-new { background: #fff; }
.lp-new-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.lp-new-item {
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    border-left: 3px solid var(--feat-color, #0d9488);
    background: #fff;
    box-shadow: 0 2px 10px rgba(13,33,55,0.04);
    transition: transform 0.18s, box-shadow 0.18s;
    align-items: flex-start;
}
.lp-new-item:hover { border-color: rgba(13,148,136,0.34); box-shadow: 0 6px 18px rgba(13,33,55,0.07); }
.lp-new-item__icon {
    flex-shrink: 0;
    width: 2.6rem; height: 2.6rem;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    background: var(--feat-bg, rgba(13,148,136,0.09));
    color: var(--feat-color, #0d9488);
}
.lp-new-item__body { flex: 1; min-width: 0; }
.lp-new-item__head {
    display: flex; align-items: center; gap: 0.55rem;
    margin-bottom: 0.3rem; flex-wrap: wrap;
}
.lp-new-item__head h3 {
    font-size: 0.92rem; font-weight: 800; color: var(--ink); margin: 0;
}
.lp-new-badge {
    display: inline-flex;
    padding: 0.14rem 0.55rem; border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #2563eb);
    color: #fff; font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap;
}
.lp-new-item p {
    font-size:0.875rem; color: var(--muted); line-height: 1.7; margin: 0;
}

/* And the same on the left rule of every "new in Dhuveli" card, so the eye
   reads one list rather than six categories. */
.lp-new-item { --feat-bg: rgba(13,148,136,0.08); --feat-color: #0d9488; }

@media (max-width: 767px) {
    .lp-new-grid { grid-template-columns: 1fr; }
}


/* ==================================================================
   Developers / API
   ================================================================== */

.lp-api { background: #fff; }
.lp-api__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.75rem; align-items: center; }
.lp-api__list { list-style: none; margin: 1.8rem 0 2.9rem; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.lp-api__list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--ink); line-height: 1.5; }
.lp-api__list li i { color: #0d9488; margin-top: .2rem; flex-shrink: 0; }
.lp-api__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.lp-code { background: #0b1220; border-radius: 16px; overflow: hidden; border: 1px solid rgba(148, 163, 184, .14); box-shadow: 0 28px 60px -30px rgba(13, 33, 55, .55); }
.lp-code__bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(148, 163, 184, .12); }
.lp-code__dot { width: 11px; height: 11px; border-radius: 50%; }
.lp-code__title { margin-left: .55rem; color: #8aa0b6; font-size: .72rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.lp-code pre { margin: 0; padding: 1.15rem 1.25rem; overflow-x: auto; }
.lp-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.7; color: #cbd5e1; white-space: pre; }
.lp-code .t-cmd { color: #5eead4; }
.lp-code .t-key { color: #7dd3fc; }
.lp-code .t-str { color: #a7f3d0; }
.lp-code .t-num { color: #fcd34d; }
@media (max-width: 880px) { .lp-api__grid { grid-template-columns: 1fr; gap: 2rem; } }


/* ==================================================================
   Atlas
   ================================================================== */

.lp-atlas { background: linear-gradient(180deg, #f7fbfc 0%, #ffffff 65%); }
.lp-atlas__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.75rem; align-items: center; }
.lp-atlas__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1.6rem 0 1.9rem; }
.lp-atlas__stat { padding: .75rem .4rem; border: 1px solid rgba(126, 151, 173, .22); border-radius: 12px; background: #fff; text-align: center; }
.lp-atlas__stat b { display: block; font-family: Montserrat, sans-serif; font-size: 1.22rem; font-weight: 800; color: #0d2137; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lp-atlas__stat span { display: block; margin-top: .15rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6b8199; }
.lp-atlas__btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.lp-atlas__note { margin: 1.5rem 0 0; font-size: .82rem; color: #5a6e82; }

/* The proof panel. Real tide for a real island, rendered on the server, so
   the section demonstrates the atlas instead of describing it. */
.lp-atlas__card { border: 1px solid rgba(126, 151, 173, .22); border-radius: 16px; background: #fff; box-shadow: 0 28px 60px -34px rgba(13, 33, 55, .45); overflow: hidden; }
.lp-atlas__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border-bottom: 1px solid #eef2f6; }
.lp-atlas__card-head strong { font-family: Montserrat, sans-serif; font-size: .96rem; color: #0d2137; }
.lp-atlas__card-head span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0d9488; }
.lp-atlas__rows { padding: .35rem 1.1rem .9rem; }
.lp-atlas__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .42rem 0; border-bottom: 1px solid #f4f7fa; font-size: .85rem; }
.lp-atlas__row:last-child { border-bottom: 0; }
.lp-atlas__tag { display: inline-flex; align-items: center; gap: .3rem; min-width: 4.1rem; padding: .1rem .45rem; border-radius: 999px; background: #eef2f6; color: #33506c; font-size: .68rem; font-weight: 800; }
.lp-atlas__tag.is-high { background: #d7f2ee; color: #0f766e; }
.lp-atlas__time { font-weight: 700; color: #0d2137; font-variant-numeric: tabular-nums; }
.lp-atlas__h { color: #6b8199; font-variant-numeric: tabular-nums; font-size: .8rem; }
.lp-atlas__foot { padding: .7rem 1.1rem .95rem; background: #fafcfd; border-top: 1px solid #eef2f6; font-size: .7rem; color: #6b8199; }
@media (max-width: 880px) {
    .lp-atlas__grid { grid-template-columns: 1fr; gap: 2rem; }
    .lp-atlas__stats { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================================
   Clients strip
   ================================================================== */

.lp-clients { margin-top: 2.25rem; }
.lp-clients__eye {
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 1.2rem;
}
.lp-clients__eye::before, .lp-clients__eye::after {
    content: ""; height: 1px; width: clamp(20px, 8vw, 64px);
    background: linear-gradient(90deg, transparent, var(--line));
}
.lp-clients__eye::after { background: linear-gradient(90deg, var(--line), transparent); }
.lp-clients__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
}
.lp-clients__list li {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .62rem 1.15rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--ink);
    font-weight: 600; font-size: .9rem;
    box-shadow: 0 1px 2px rgba(13, 33, 55, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.lp-clients__list li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--teal); opacity: .5;
    transition: opacity .18s ease, transform .18s ease;
}
.lp-clients__list li:hover {
    border-color: rgba(13, 148, 136, .4); color: #0f766e;
    box-shadow: 0 12px 24px -14px rgba(13, 148, 136, .5);
}
.lp-clients__list li:hover::before { opacity: 1; }
@media (max-width: 480px) {
    .lp-clients__list li { font-size: .82rem; padding: .5rem .95rem; }
}

/* ── Operators strip (2026-09-30) ─────────────────────────────────────────
   The companies with a vessel in service and "show on website" ticked, under
   the hero. Names only: the counts are in the hero and are computed there. */
.lp-ops { padding: 1.5rem 0; background: #fff; border-bottom: 1px solid var(--line); }
.lp-ops__eye {
    margin-bottom: .7rem; text-align: center;
    color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
/* A logo wall: five across in two even rows, each logo at one height and in
   grey until pointed at. Ten brands in ten palettes would shout over the
   page, and the strip is a roll-call, not an advert. */
.lp-ops { padding: 1.9rem 0 2.1rem; }
.lp-ops__eye { margin-bottom: 1.7rem; }
.lp-ops__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem 1.5rem; }
/* Five to a row; a shorter last row sits centred rather than ragged. */
.lp-ops__item { display: flex; align-items: center; justify-content: center; flex: 0 0 calc(20% - 1.2rem); min-height: 52px; }
.lp-ops__item img {
    display: block; height: 48px; width: auto; max-width: 100%; object-fit: contain;
    filter: grayscale(1); opacity: .68;
    transition: filter .2s ease, opacity .2s ease;
}
.lp-ops__item:hover img { filter: none; opacity: 1; }
.lp-ops__item span { color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; opacity: .62; text-align: center; }
@media (max-width: 900px) { .lp-ops__item { flex-basis: calc(33.333% - 1rem); } }
@media (max-width: 560px) {
    .lp-ops__list { gap: 1rem 1rem; }
    .lp-ops__item { flex-basis: calc(50% - .5rem); }
    .lp-ops__item img { height: 36px; }
    .lp-ops__item span { font-size: .88rem; }
}

/* ── The map, as it is: screenshot rows ───────────────────────────────────
   Real captures of the app, one per row, copy beside them. No hover motion:
   the pictures are the point. */
.lp-show { background: #fff; }
.lp-row {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: center;
    padding: 2.75rem 0;
}
.lp-row + .lp-row { border-top: 1px solid var(--line); }
.lp-row--flip .lp-row__media { order: 2; }
.lp-row__copy .lp-eye { margin-bottom: .55rem; }
.lp-row__copy .lp-body { margin-top: .75rem; }
.lp-row__copy .lp-checks { margin-top: 1.25rem; }
.lp-h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.15;
    letter-spacing: -.02em; color: var(--ink);
}
.lp-shot {
    margin: 0; border-radius: 14px; overflow: hidden; background: #0b1626;
    box-shadow: 0 1px 2px rgba(13,33,55,.08), 0 24px 60px -24px rgba(13,33,55,.35), 0 0 0 1px var(--line);
}
.lp-shot img { display: block; width: 100%; height: auto; }
.lp-phone {
    width: 250px; margin: 0 auto; padding: 10px; border-radius: 38px; background: #0b1626;
    box-shadow: 0 30px 70px -28px rgba(13,33,55,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.lp-phone img { display: block; width: 100%; height: auto; border-radius: 28px; }
@media (max-width: 860px) {
    .lp-row { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 0; }
    .lp-row--flip .lp-row__media { order: 0; }
    .lp-phone { width: 210px; }
}