/*
 * 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--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; }

/* 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__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);
}

@media (max-width: 991px) {
    .lp-browser { transform: none; max-width: 560px; }
    .lp-browser:hover { transform: translateY(-3px); }
}
@media (max-width: 600px) {
    .lp-browser__addr { display: none; }
    .lp-browser__chip { font-size: 0.66rem; padding: 0.32rem 0.7rem; left: 16px; top: -12px; }
}

@keyframes lpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ══ PRODUCT ═════════════════════════════════════════════════════════════════ */
.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; }
/* The tick sits in a tinted disc. The icon is an inline <svg class="ic">
   (App\Support\Icons): the svg is the disc, and its padding sets the glyph. */
.lp-check .ic {
    width:1.45rem; height:1.45rem; padding:0.375rem; box-sizing:border-box;
    margin-top:0.1rem; border-radius:999px;
    background:rgba(13,148,136,0.1); color:var(--teal);
}

/* ══ 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); }

/* ══ PRICING ═════════════════════════════════════════════════════════════════ */
.lp-pricing { background:#fff; }

/* ══ 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 { overflow:hidden; 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%;
    background:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    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 .ic {
    width:1.7rem; height:1.7rem; padding:0.5rem; box-sizing:border-box;
    border-radius:50%; background:rgba(13,148,136,0.1); color:var(--teal);
    transition:transform 0.25s, background 0.2s;
}
.lp-faq-item__q[aria-expanded="true"] .ic { transform:rotate(180deg); background:rgba(13,148,136,0.18); }
.lp-faq-item__a {
    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; }

/* 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); }

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

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .lp-dev-grid { grid-template-columns:repeat(2,1fr); }
    .lp-contact__grid { grid-template-columns:1fr; gap:2.5rem; }
}

@media (max-width: 767px) {
    .lp-sec { padding:64px 0; }
    .lp-dev-grid { grid-template-columns:1fr; }
    .lp-form-row { grid-template-columns:1fr; }
}

/* ── 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-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; }

@media (prefers-reduced-motion: reduce) {
    .rv, .lp-sec-head { opacity: 1; transform: none; transition: 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; }


/* ==================================================================
   Developers / API: one line and a link; the pitch lives on /developers
   ================================================================== */

.lp-sec.lp-api--slim { background: #fff; padding: 2.4rem 0; border-top: 1px solid rgba(13, 33, 55, .08); }
.lp-api__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.lp-api__row .lp-eye { display: block; margin-bottom: .45rem; }
.lp-api__row .lp-body { max-width: 58ch; font-size: .95rem; }
.lp-api__row .lp-btn { flex-shrink: 0; }
@media (max-width: 720px) { .lp-api__row { flex-direction: column; align-items: flex-start; gap: 1.1rem; } }


/* ==================================================================
   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); }
}


/* ── 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; }
@media (max-width: 860px) {
    .lp-row { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 0; }
    .lp-row--flip .lp-row__media { order: 0; }
}

/* ══ The office: a bento of what the app shows (2026-10-01) ══════════════
   Small, honest vignettes of the real screens — a Telegram group filling
   up, the trip log, an arrival time, document expiries — in place of six
   identical icon cards. The boats are examples; the layouts are the app's. */
.lp-office { background: var(--surf); }
.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.lp-tile {
    min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px;
    padding: 1.5rem 1.5rem 1.4rem;
}
.lp-tile--wide { grid-column: span 2; }
.lp-tile__head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.lp-tile__icon {
    display: grid; place-items: center; flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem;
    border-radius: 12px; background: rgba(13,148,136,.1); color: var(--teal); font-size: 1rem;
}
.lp-tile h3 { font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--ink); margin-bottom: .3rem; }
.lp-tile p { font-size: .875rem; line-height: 1.7; color: var(--muted); }
.lp-tile--quiet .lp-tile__icon { margin-bottom: .9rem; }

/* The trip log's rows. */
.lp-log { width: 100%; border-collapse: collapse; font-size: .82rem; }
.lp-log th {
    padding: 0 .5rem .45rem 0; border-bottom: 1px solid var(--line); text-align: left;
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.lp-log td { padding: .55rem .5rem .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-log tr:last-child td { border-bottom: 0; }
.lp-log td:first-child { font-weight: 700; }

/* Document expiries, nearest first. */
.lp-docs { display: grid; gap: .6rem; }
.lp-docs li { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--ink); }
.lp-docs li i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.lp-docs li i.is-soon { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.lp-docs li i.is-ok { background: #0d9488; }
.lp-docs li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-docs li b { font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .lp-bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .lp-bento { grid-template-columns: 1fr; }
    .lp-tile--wide { grid-column: span 1; }
    .lp-log th:nth-child(5), .lp-log td:nth-child(5),
    .lp-log th:nth-child(6), .lp-log td:nth-child(6) { display: none; }
    .lp-log td:nth-child(2) { white-space: normal; }
}

/* ══ What's new: a timeline, newest first ═══════════════════════════════ */
.lp-new__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3.5rem; align-items: start; }
.lp-new__intro .lp-btn { margin-top: 1.4rem; }
.lp-timeline { list-style: none; margin: .3rem 0 0; padding: 0; border-left: 2px solid var(--line); }
.lp-timeline li { position: relative; display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; padding: 0 0 1.7rem 1.6rem; }
.lp-timeline li:last-child { padding-bottom: .2rem; }
.lp-timeline li::before {
    content: ''; position: absolute; left: -7px; top: .3rem; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; border: 3px solid var(--teal);
}
.lp-timeline time { padding-top: .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.lp-timeline h3 { font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: .3rem; line-height: 1.3; }
.lp-timeline p { font-size: .875rem; line-height: 1.7; color: var(--muted); }
@media (max-width: 860px) {
    .lp-new__grid { grid-template-columns: 1fr; gap: 2rem; }
    .lp-timeline li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ══ Atlas: the real page beside the words, the live tide over it ═══════ */
.lp-atlas__media { position: relative; padding-bottom: 3rem; }
.lp-atlas__media > .rv { position: absolute; left: -1.5rem; bottom: 0; width: min(300px, 82%); }
.lp-atlas__media .lp-atlas__card { background: #fff; box-shadow: 0 24px 50px -20px rgba(13,33,55,.45); }
.lp-atlas__media .lp-atlas__foot { display: none; }
@media (max-width: 860px) {
    .lp-atlas__media { padding-bottom: 0; }
    .lp-atlas__media > .rv { position: static; width: auto; margin-top: 1rem; }
}

/* ══ How it fits together: one line, four stops ═════════════════════════ */
.lp-flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.lp-flow::before {
    content: ''; position: absolute; left: 1.3rem; right: 1.3rem; top: 1.3rem; height: 2px;
    background: linear-gradient(90deg, rgba(94,234,212,.55), rgba(94,234,212,.1));
}
.lp-flow li { position: relative; }
.lp-flow__icon {
    position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
    border-radius: 50%; background: #0b1626; border: 2px solid rgba(94,234,212,.55); color: #5eead4;
}
.lp-flow h3 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: .35rem; }
.lp-flow p { font-size: .86rem; line-height: 1.7; color: rgba(240,249,255,.72); }
.lp-flow code {
    display: inline-block; margin-top: .8rem; padding: .3rem .6rem; border-radius: 8px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: #ccfbf1;
}
@media (max-width: 860px) { .lp-flow { grid-template-columns: 1fr 1fr; } .lp-flow::before { display: none; } }
@media (max-width: 520px) { .lp-flow { grid-template-columns: 1fr; } }

/* ══ FAQ as rows, contact as a list ═════════════════════════════════════ */
.lp-faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.lp-faq-item:first-child { border-top: 1px solid var(--line); }
.lp-faq-item__q { padding: 1.05rem .2rem; font-size: 1rem; }
.lp-faq-item__a { padding: 0 .2rem 1.1rem; }

.lp-contact__list { margin: 0; display: grid; gap: 1.15rem; }
.lp-contact__list dt {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
    font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
}
.lp-contact__list dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.lp-contact__list dd a { color: inherit; text-decoration: none; }
.lp-contact__list dd a:hover { color: var(--teal); }
/* The Atlas sits on a light background, where the outline button's white ink vanished. */
.lp-atlas__btns .lp-btn--outline { color: var(--ink) !important; background: transparent; border-color: rgba(13,33,55,.18); backdrop-filter: none; }
.lp-atlas__btns .lp-btn--outline:hover { background: rgba(13,33,55,.05); }

/* ── Vehicle tracking banner (partials/vehicles-banner) ───────────────────────
   An advert, on purpose: one big linked card with the app's vehicles driving
   Malé's real streets behind the copy (public/js/vehicle-drive.js). */
.lp-vb { padding: 46px 0 6px; background: #fff; }
.lp-vb__card {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    min-height: 470px; border-radius: 30px; color: #f8fafc;
    background: #364761;
    box-shadow: 0 44px 90px -40px rgba(7,15,28,.75), 0 0 0 1px rgba(13,33,55,.08);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.lp-vb__card:hover { transform: translateY(-4px); box-shadow: 0 54px 100px -40px rgba(7,15,28,.85), 0 0 0 1px rgba(13,148,136,.35); }
.lp-vb__map, .lp-vb__map img, .lp-vb__drive { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-vb__map { z-index: -2; transition: transform 1.4s cubic-bezier(.22,1,.36,1); transform-origin: 70% 50%; }
.lp-vb__map img { object-fit: cover; object-position: 62% 50%; }
.lp-vb__card:hover .lp-vb__map { transform: scale(1.04); }
.lp-vb__shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,15,28,.95) 0%, rgba(7,15,28,.86) 34%, rgba(7,15,28,.25) 62%, rgba(7,15,28,.05) 80%),
        radial-gradient(60% 90% at 0% 100%, rgba(13,148,136,.35), transparent 60%);
}
.lp-vb__copy { position: relative; max-width: 560px; padding: 3.2rem 3rem 5.6rem; }
.lp-vb__new {
    display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .95rem .4rem .7rem; border-radius: 999px;
    background: #fbbf24; color: #0b1526; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 10px 26px -8px rgba(251,191,36,.7);
}
.lp-vb__new i { width: .5rem; height: .5rem; border-radius: 50%; background: #0b1526; animation: lp-vb-blink 1.2s ease-in-out infinite; }
.lp-vb h2 {
    margin-top: 1.1rem; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; color: #f8fafc !important;
}
.lp-vb h2 em {
    font-style: normal; background: linear-gradient(90deg, #5eead4, #4ade80 50%, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-vb p { margin-top: 1rem; max-width: 44ch; font-size: 1.02rem; line-height: 1.65; color: #cfe0ee; }
.lp-vb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.8rem; }
.lp-vb__price { font-size: .86rem; font-weight: 700; color: #cbd5e1; }
.lp-vb__price b { font-size: 1.35rem; font-weight: 900; color: #fbbf24; margin-right: .3rem; }
.lp-vb__icons {
    position: absolute; left: 3rem; bottom: 1.6rem; display: flex; gap: 1.1rem;
    padding: .55rem .9rem; border-radius: 16px; background: rgba(15,23,42,.6); border: 1px solid rgba(255,255,255,.08);
}
.lp-vb__icons svg { transform: rotate(90deg); filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.lp-vb__icons svg:nth-child(odd) { animation: lp-vb-bob 2.4s ease-in-out infinite; }
.lp-vb__icons svg:nth-child(even) { animation: lp-vb-bob 2.4s ease-in-out .6s infinite; }
@keyframes lp-vb-blink { 50% { opacity: .25; } }
@keyframes lp-vb-bob { 0%, 100% { transform: rotate(90deg) translateY(0); } 50% { transform: rotate(90deg) translateY(-4px); } }

.lp-timeline p a { color: var(--teal); font-weight: 700; }
.lp-timeline p a:hover { text-decoration: underline; }

/* The svg labels the vehicle-drive script draws, as on the vehicle page. */
.lp-vb .vd-label rect { fill: rgba(15,23,42,.9); stroke: rgba(255,255,255,.14); stroke-width: 1; }
.lp-vb .vd-label text { font: 700 12.5px Montserrat, Roboto, sans-serif; fill: #f8fafc; }
.lp-vb .vd-label .vd-speed { fill: #4ade80; font-weight: 800; }
.lp-vb .vd-label.is-stopped .vd-speed { fill: #94a3b8; }
.lp-vb .vd-vehicle use { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }

@media (max-width: 760px) {
    .lp-vb__card { min-height: 560px; }
    .lp-vb__shade { background: linear-gradient(180deg, rgba(7,15,28,.94) 0%, rgba(7,15,28,.82) 52%, rgba(7,15,28,.2) 82%, rgba(7,15,28,.1) 100%); }
    .lp-vb__copy { padding: 2.2rem 1.5rem 7rem; }
    .lp-vb__icons { left: 1.5rem; gap: .7rem; }
    .lp-vb .vd-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-vb__new i, .lp-vb__icons svg { animation: none; }
    .lp-vb__card, .lp-vb__map { transition: none; }
}

/* ══ 2026-10-05 redesign: image-first and moving (the owner's wish for
   marketing pages), as /vehicle-tracking. Boats sail the fleet's real lanes
   over Dhuveli Midnight captures (public/js/boat-lanes.js, vehicle-drive.js). */

/* The hero's vessel, exactly as the live map draws one (VehicleDrive.voyage):
   the route layer's fading white track, the sky-blue dashed arrival line,
   and below, copies of the map's own .device-label and .eta-pin rules from
   resources/css/app.css, which marketing pages do not load. */
.hp-trail { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hp-eta-line { fill: none; stroke: #38bdf8; stroke-opacity: .95; stroke-width: 2.75; stroke-dasharray: 3.3 2.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hp-vessel { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease .4s; }
.hp-vessel.is-ready { opacity: 1; }
.hp-vessel > * { position: absolute; left: 0; top: 0; }
.hp-vessel__icon { width: 40px; height: 40px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.hp-vessel .device-label { display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
.hp-vessel .device-label__name {
    display: inline-flex; align-items: center; gap: 5px; max-width: 130px; overflow: hidden;
    padding: 2px 8px 2px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(2,10,24,.76); box-shadow: 0 1px 6px rgba(0,0,0,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font: 700 11px/1.45 Roboto, Montserrat, sans-serif; letter-spacing: .02em; color: #fff;
}
.hp-vessel .device-label__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgba(148,163,184,.6); }
.hp-vessel .device-label__dot.is-moving { background: #4ade80; animation: hp-dot 2s ease-out infinite; }
.hp-vessel .device-label__speed { font: 700 10px/1 Roboto, Montserrat, sans-serif; letter-spacing: .04em; color: rgba(204,251,241,.92); text-shadow: 0 1px 4px rgba(0,0,0,.95); }
.hp-vessel .eta-pin { width: 0; height: 0; }
.hp-vessel .eta-pin__pulse { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; border-radius: 999px; background: rgba(245,158,11,.45); animation: hp-eta-pulse 1.8s ease-out infinite; }
.hp-vessel .eta-pin__dot {
    position: absolute; top: -11px; left: -11px; display: grid; place-items: center; width: 22px; height: 22px;
    border: 2px solid #fff; border-radius: 999px; background: #f59e0b; color: #1c1917; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hp-vessel .eta-pin__label {
    position: absolute; bottom: 16px; left: 50%; display: grid; gap: 1px; max-width: 13rem; padding: .3rem .55rem;
    border-radius: 10px; background: rgba(4,16,26,.9); color: #ecfeff; text-align: center; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.3); transform: translateX(-50%);
}
.hp-vessel .eta-pin__name { overflow: hidden; font: 800 .72rem/1.15 Roboto, Montserrat, sans-serif; text-overflow: ellipsis; }
.hp-vessel .eta-pin__time { color: #fcd34d; font: 700 .7rem/1.15 Roboto, Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.hp-vessel .eta-pin[data-state="arrived"] .eta-pin__dot { background: #22c55e; }
.hp-vessel .eta-pin[data-state="arrived"] .eta-pin__pulse { display: none; }
.hp-vessel .eta-pin[data-state="arrived"] .eta-pin__time { color: #86efac; }
@keyframes hp-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 60% { box-shadow: 0 0 0 4px rgba(74,222,128,0); } }
@keyframes hp-eta-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
.hp-voyage .vd-vehicle image { filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.hp-note { margin-top: 1rem; font-size: .76rem; color: #6b7f93; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative; display: flex; align-items: center; overflow: hidden;
    min-height: min(94vh, 900px); padding: 140px 0 110px;
    background: #0b1220; color: #f0f9ff;
}
.hp-hero__map { position: absolute; inset: 0; }
.hp-hero__map > img, .hp-hero__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-hero__map > img { object-fit: cover; }
.hp-hero__shade {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,15,28,.96) 0%, rgba(7,15,28,.86) 30%, rgba(7,15,28,.35) 54%, rgba(7,15,28,0) 70%),
        linear-gradient(0deg, rgba(7,15,28,.6) 0%, rgba(7,15,28,0) 24%),
        radial-gradient(50% 60% at 0% 100%, rgba(13,148,136,.22), transparent 70%);
}
.hp-hero__inner { position: relative; z-index: 2; }
.hp-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .45rem 1rem .45rem .75rem; border-radius: 999px;
    background: rgba(13,148,136,.16); border: 1px solid rgba(94,234,212,.4);
    color: #99f6e4; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    animation: hp-in .7s cubic-bezier(.22,1,.36,1) both;
}
.hp-badge i { width: .55rem; height: .55rem; border-radius: 50%; background: #2dd4bf; animation: hp-pulse 1.8s ease-out infinite; }
.lp .hp-hero__title {
    margin-top: 1.3rem; max-width: 15ch;
    font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; color: #f8fafc;
}
.hp-hero__title > span { display: block; }
.hp-glow { background: linear-gradient(90deg, #5eead4 0%, #38bdf8 55%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .hp-hero__lead { margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.75; color: #cfe0ee; }
.hp-hero .lp-btn-row { margin-top: 2rem; }
.hp-rise { animation: hp-in .8s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }
.hp-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hp-stat {
    padding: .8rem 1.1rem; border-radius: 16px;
    background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hp-stat strong { display: block; font-size: 1.55rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hp-stat span { display: block; margin-top: .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94b4c8; }
.lp .hp-credit { position: absolute; right: 1rem; bottom: .7rem; z-index: 2; max-width: 60ch; text-align: right; font-size: .66rem; color: rgba(226,232,240,.55); }

/* ── Operators, rolling past ───────────────────────────────────────────────── */
.hp-ops { padding: 1.6rem 0 1.8rem; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.lp .hp-ops__eye { margin: 0 0 1.2rem; text-align: center; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hp-ops__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp .hp-ops__track { display: flex; align-items: center; gap: 3.6rem; width: max-content; animation: hp-marquee 40s linear infinite; }
.hp-ops__view:hover .hp-ops__track { animation-play-state: paused; }
.hp-ops__item img { display: block; height: 46px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.hp-ops__item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.hp-ops__item span { color: var(--ink); font-size: 1rem; font-weight: 800; opacity: .62; white-space: nowrap; }

/* ── The live map ──────────────────────────────────────────────────────────── */
.hp-app__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3.2rem; align-items: center; margin-bottom: 4.5rem; }
.hp-app__media { position: relative; padding-bottom: 3.5rem; }
.hp-app__media .lp-browser { max-width: none; }
.hp-tilt { transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) translateY(30px); opacity: 0; transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .9s ease; }
.hp-tilt.in { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); opacity: 1; }
.hp-phone {
    position: absolute; right: -2%; bottom: -1.8rem; width: 29%;
    padding: 7px; border-radius: 28px; background: #0b1526;
    box-shadow: 0 30px 60px -18px rgba(13,33,55,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.hp-phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.hp-float.in { animation: hp-float 6s ease-in-out .9s infinite; }
.hp-app .lp-row__media img { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.hp-app .lp-row__media:hover img { transform: scale(1.04); }

/* ── One voyage ────────────────────────────────────────────────────────────── */
.hp-voyage { background: radial-gradient(110% 120% at 85% 0%, #10233d 0%, #070f1c 62%); color: #e2e8f0; }
.lp .hp-voyage .lp-h2 { color: #f8fafc; }
.lp .hp-voyage .lp-body { color: #b6c8da; }
.hp-voyage__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.4rem; align-items: center; }
.hp-voyage__map { position: relative; aspect-ratio: 9 / 10; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.hp-voyage__map > img, .hp-voyage__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-voyage__map > img { object-fit: cover; }
.hp-voyage__line, .hp-voyage__halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hp-voyage__line { stroke: #2dd4bf; stroke-width: 6; }
.hp-voyage__halo { stroke: #5eead4; stroke-width: 20; opacity: .4; filter: url(#hp-glow); }
.hp-pin circle:last-child { stroke: #0b1220; stroke-width: 4; }
.hp-pin--start { color: #2dd4bf; }
.hp-pin--end { color: #fbbf24; }
.hp-pin--start circle:last-child { fill: #2dd4bf; }
.hp-pin--end circle:last-child { fill: #fbbf24; }
.hp-ping { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hp-pin--start .hp-ping { animation: hp-ping 2.2s ease-out infinite; }
[data-trip].is-arrived .hp-pin--end .hp-ping { animation: hp-ping 2.2s ease-out infinite; }
.hp-tag {
    position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 20px));
    display: flex; flex-direction: column; gap: .1rem; padding: .5rem .8rem; border-radius: 12px;
    background: #f8fafc; color: #0f172a; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none;
}
.hp-tag::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #f8fafc; transform: translateX(-50%) rotate(45deg); }
.hp-tag small { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0d9488; }
.hp-tag b { font-size: .9rem; font-weight: 800; }
/* Malé is at the top of the voyage map and Maafushi at the bottom: the
   departure's tag sits above its pin, the arrival's below, both inside. */
.hp-tag--end::after { top: -6px; bottom: auto; }
.hp-tag--end small { color: #b45309; }
.hp-tag--end { opacity: 0; transform: translate(-50%, 8px) scale(.92); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
[data-trip].is-arrived .hp-tag--end { opacity: 1; transform: translate(-50%, 22px); }

.hp-chat { margin-top: 1.8rem; padding: 1rem; border-radius: 22px; background: #17212b; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.hp-chat__head { display: flex; align-items: center; gap: .7rem; padding: .2rem .4rem .8rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.hp-chat__head b { display: block; color: #f8fafc; font-size: .95rem; }
.hp-chat__head small { color: #8aa0b4; font-size: .75rem; }
.hp-chat__avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #2aabee, #229ed9); color: #fff; }
.hp-chat__avatar svg { width: 16px; height: 16px; }
.hp-chat__msg {
    margin: .55rem 0; padding: .65rem .85rem; max-width: 94%; border-radius: 4px 14px 14px 14px;
    background: #233142; color: #e6edf3; font-size: .86rem; line-height: 1.5;
    opacity: 0; transform: translateY(14px) scale(.98);
}
.hp-chat__msg span { float: right; margin-left: .8rem; font-size: .7rem; color: #7f93a6; }
.hp-chat__msg b { color: #5eead4; }
.hp-chat.in .hp-chat__msg { animation: hp-msg .55s cubic-bezier(.22,1,.36,1) forwards; }
.hp-chat.in .hp-chat__msg:nth-of-type(2) { animation-delay: .3s; }
.hp-chat.in .hp-chat__msg:nth-of-type(3) { animation-delay: 1.4s; }
.hp-chat.in .hp-chat__msg:nth-of-type(4) { animation-delay: 2.5s; }

.hp-eta { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.hp-eta__row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: #e2e8f0; }
.hp-eta__row strong { font-size: 1.6rem; font-weight: 900; color: #fbbf24; font-variant-numeric: tabular-nums; }
.hp-eta__bar { height: 7px; margin: .75rem 0 .55rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.hp-eta__bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0d9488, #2dd4bf, #fbbf24); transition: width 2.6s cubic-bezier(.22,1,.36,1) .5s; }
.hp-eta.in .hp-eta__bar i { width: 82%; }
.hp-eta__foot { display: flex; justify-content: space-between; gap: 1rem; font-size: .74rem; color: #8aa0b4; }

/* ── Closing call ──────────────────────────────────────────────────────────── */
.hp-cta { padding: 70px 1.5rem 96px; background: #fff; }
.hp-cta__box {
    position: relative; max-width: 1140px; margin: 0 auto; overflow: hidden; isolation: isolate;
    padding: 4.4rem 2.4rem; border-radius: 30px; text-align: center;
    background: #0b1220 url('/images/site/home-hero-midnight.webp') 72% 45% / cover no-repeat;
}
.hp-cta__box::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(55% 75% at 50% 50%, rgba(7,15,28,.9), rgba(7,15,28,.35)); }
.hp-cta__copy { position: relative; z-index: 2; }
.lp .hp-cta h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 900; letter-spacing: -.03em; color: #f8fafc; }
.lp .hp-cta p { margin: .9rem auto 0; max-width: 50ch; color: #cbd5e1; line-height: 1.7; }
.hp-cta .lp-btn-row { justify-content: center; margin-top: 1.8rem; }

/* Small lives for the sections that stayed: the flow's steps light up in
   turn as they arrive, and a tracker lifts when pointed at. */
.lp-flow li.in .lp-flow__icon { animation: hp-pop .7s cubic-bezier(.22,1,.36,1) both; }
.lp-flow li.in:nth-child(2) .lp-flow__icon { animation-delay: .25s; }
.lp-flow li.in:nth-child(3) .lp-flow__icon { animation-delay: .5s; }
.lp-flow li.in:nth-child(4) .lp-flow__icon { animation-delay: .75s; }
.lp-dev img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.lp-dev:hover img { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
@keyframes hp-pop { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(45,212,191,.6); } 60% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(45,212,191,0); } 100% { transform: none; } }

@keyframes hp-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.7); } 70% { box-shadow: 0 0 0 12px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }
@keyframes hp-marquee { to { transform: translateX(-50%); } }
@keyframes hp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hp-ping { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes hp-msg { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
    .hp-app__grid, .hp-voyage__grid { grid-template-columns: 1fr; }
    .hp-voyage__map { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
    /* On a phone the copy fills the screen, so the chart is its own panel
       under it rather than a backdrop: the vessel, its track and its pin are
       never behind the text. Cropped as cover, the panel keeps the whole
       Malé–Maafushi lane in view. */
    .hp-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 112px 0 0; }
    .hp-hero__inner { order: 1; }
    .hp-hero__map { order: 2; position: relative; inset: auto; height: 440px; margin-top: 2rem; }
    .hp-hero__map::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 80px; z-index: 3; pointer-events: none; background: linear-gradient(180deg, #0b1220, rgba(11,18,32,0)); }
    .hp-hero__shade { display: none; }
    .hp-stats { gap: .6rem; }
    .hp-stat { padding: .65rem .8rem; }
    .hp-stat strong { font-size: 1.2rem; }
    .lp .hp-credit { left: 1rem; text-align: left; }
    .hp-phone { width: 40%; right: 0; }
    .hp-tag b { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-badge, .hp-badge i, .hp-rise, .lp .hp-ops__track, .hp-float.in, .hp-ping, .lp-flow li.in .lp-flow__icon,
    .hp-vessel .device-label__dot, .hp-vessel .eta-pin__pulse { animation: none !important; }
    .lp-dev img { transition: none; }
    .hp-tilt { transition: none; transform: none; opacity: 1; }
    .hp-chat .hp-chat__msg { opacity: 1; transform: none; animation: none !important; }
    .hp-eta__bar i { transition: none; width: 82%; }
}