/* =====================================================
   JADI MARBOT — LANDING PAGE
   Tema: oranye hangat, kertas grid, heading bergaris bawah.
   Dimuat setelah styles.css (mewarisi variabel tema).
   ===================================================== */

:root {
    --lp-orange: #f26522;
    --lp-orange-2: #ff9a3c;
    --lp-ink: #21232e;
    --lp-grid: rgba(242, 101, 34, .07);
    --lp-nav-h: 72px;
    --lp-bar-h: 44px;
    --lp-max: 1140px;
}

[data-theme=dark] {
    --lp-grid: rgba(255, 154, 60, .05);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--lp-nav-h) + var(--lp-bar-h) + 20px);
}

body.landing-body {
    display: block;
    place-items: unset;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--lp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-font-smoothing: antialiased;
}

.landing-body .ambient {
    display: none;
}

body.lp-locked {
    overflow: hidden;
}

.lp-container {
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 24px;
}

.lp-narrow {
    max-width: 780px;
}

/* ---------- NAV ---------- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 1px 0 var(--border);
}

.lp-nav-inner {
    height: var(--lp-nav-h);
    max-width: var(--lp-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.lp-brand .app-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--lp-orange) 30%, transparent);
}

.lp-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.lp-brand-text strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--lp-orange);
    text-transform: uppercase;
}

.lp-brand-text small {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tertiary);
    text-transform: uppercase;
}

.lp-nav-links {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-nav-links a {
    position: relative;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: color .16s;
}

.lp-nav-links a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px;
    background: var(--lp-orange);
    transform: scaleX(0);
    transition: transform .2s var(--ease);
}

.lp-nav-links a:hover {
    color: var(--lp-orange);
}

.lp-nav-links a:hover::after {
    transform: scaleX(1);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.lp-announce {
    height: var(--lp-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    background: linear-gradient(90deg, var(--lp-orange), var(--lp-orange-2));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.lp-announce b {
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
    font-weight: 700;
    letter-spacing: .02em;
}

.lp-announce a {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.lp-announce a:hover {
    text-decoration: underline;
}

/* ---------- BUTTONS ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .16s var(--ease), box-shadow .22s, background .2s, color .2s;
}

.lp-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.lp-btn-primary {
    background: linear-gradient(95deg, var(--lp-orange), var(--lp-orange-2));
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--lp-orange) 36%, transparent);
}

.lp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--lp-orange) 48%, transparent);
}

.lp-btn-outline {
    background: var(--card);
    color: var(--text);
    box-shadow: inset 0 0 0 1.5px var(--border), 0 2px 8px rgba(70, 40, 20, .06);
}

.lp-btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lp-orange) 40%, transparent), 0 6px 16px rgba(70, 40, 20, .1);
    color: var(--lp-orange);
}

.lp-btn-ghost {
    width: 42px;
    padding: 0;
    background: var(--raised);
    color: var(--muted);
}

.lp-btn-ghost:hover {
    background: color-mix(in srgb, var(--lp-orange) 12%, transparent);
    color: var(--lp-orange);
}

.lp-btn-ghost svg {
    width: 18px;
    height: 18px;
}

.lp-btn-lg {
    height: 52px;
    padding: 0 30px;
    font-size: 15.5px;
}

/* ---------- DEKORASI GEOMETRIS ---------- */
.lp-deco {
    position: absolute;
    pointer-events: none;
    opacity: .5;
}

.lp-deco svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--lp-orange);
    stroke-width: 1.6;
}

.lp-deco-1 { top: 12%; left: 4%; width: 34px; height: 34px; }
.lp-deco-2 { top: 62%; left: 7%; width: 26px; height: 26px; opacity: .35; }
.lp-deco-3 { top: 18%; right: 5%; width: 30px; height: 30px; opacity: .4; }
.lp-deco-4 { bottom: 12%; right: 8%; width: 40px; height: 40px; opacity: .3; }

/* ---------- HERO ---------- */
.lp-hero {
    position: relative;
    padding: 66px 0 86px;
    overflow: hidden;
}

.lp-hero-glow {
    position: absolute;
    top: -280px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 620px;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lp-orange-2) 26%, transparent), transparent);
    opacity: .8;
}

.lp-hero-inner {
    position: relative;
    text-align: center;
}

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px 0 13px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-orange) 22%, transparent), 0 2px 10px rgba(70, 40, 20, .06);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lp-orange);
}

.lp-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-orange);
    animation: lpPulse 2.4s infinite;
}

@keyframes lpPulse {
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--lp-orange) 20%, transparent);
    }
}

.lp-hero h1 {
    margin: 24px auto 0;
    max-width: 15ch;
    font-size: clamp(36px, 6vw, 62px);
    line-height: 1.06;
    letter-spacing: -.04em;
    font-weight: 800;
}

.lp-underline {
    position: relative;
    display: inline-block;
    color: var(--lp-orange);
    white-space: nowrap;
}

.lp-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.1em;
    height: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--lp-orange) 45%, transparent);
}

.lp-lead {
    margin: 26px auto 0;
    max-width: 620px;
    font-size: 16.5px;
    line-height: 28px;
    color: var(--muted);
}

.lp-lead strong {
    color: var(--text);
    font-weight: 700;
}

.lp-mark {
    background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--lp-orange) 32%, transparent) 62%);
    padding: 0 2px;
    font-weight: 700;
    color: var(--text);
}

.lp-hero-cta {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.lp-trust {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: center;
}

.lp-trust li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.lp-trust svg {
    width: 15px;
    height: 15px;
    color: var(--lp-orange);
}

/* ---------- HERO — MOCKUP WHATSAPP ---------- */
.lp-hero-visual {
    position: relative;
    margin: 54px auto 0;
    max-width: 460px;
}

.lp-phone {
    background: var(--card);
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px var(--border), 0 12px 34px rgba(70, 40, 20, .12), 0 36px 80px rgba(70, 40, 20, .14);
    overflow: hidden;
    animation: lpFloat 7s ease-in-out infinite;
}

@keyframes lpFloat {
    50% {
        transform: translateY(-9px);
    }
}

.lp-phone-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: color-mix(in srgb, var(--raised) 65%, var(--card));
    border-bottom: 1px solid var(--border);
}

.lp-phone-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--lp-orange-2), var(--lp-orange));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.lp-phone-id {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.lp-phone-id strong {
    font-size: 13px;
}

.lp-phone-id small {
    font-size: 10px;
    color: #25d366;
    font-weight: 600;
}

.lp-phone-body {
    padding: 20px 16px 18px;
    background: #e9e4dc;
    background-image: radial-gradient(circle at 10px 10px, rgba(80, 70, 60, .05) 1px, transparent 1.2px);
    background-size: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: left;
}

.lp-chat-day {
    align-self: center;
    margin-bottom: 3px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .8);
    font-size: 9.5px;
    font-weight: 600;
    color: #667781;
}

.lp-bubble {
    position: relative;
    max-width: 88%;
    padding: 9px 12px 20px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 18px;
    color: #111b21;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    animation: lpBubbleIn .45s var(--ease) both;
}

@keyframes lpBubbleIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }
}

.lp-in {
    align-self: flex-start;
    background: #fff;
    border-top-left-radius: 3px;
}

.lp-out {
    align-self: flex-end;
    background: #d9fdd3;
    border-top-right-radius: 3px;
    animation-delay: 1.5s;
}

.lp-delay {
    animation-delay: 2.3s;
}

.lp-time {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 9px;
    color: #667781;
}

.lp-time i {
    font-style: normal;
    color: #53bdeb;
}

.lp-typing {
    align-self: flex-end;
    display: flex;
    gap: 4px;
    padding: 11px 13px;
    border-radius: 10px 3px 10px 10px;
    background: #d9fdd3;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    animation: lpTypingOut .1s 1.45s forwards;
}

.lp-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a8f83;
    animation: lpDot 1.1s infinite;
}

.lp-typing span:nth-child(2) { animation-delay: .18s; }
.lp-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes lpDot {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@keyframes lpTypingOut {
    to { display: none; opacity: 0; height: 0; padding: 0; margin: 0; }
}

.lp-phone-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--muted);
    background: var(--card);
    border-top: 1px solid var(--border);
    text-align: left;
}

.lp-phone-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--lp-orange);
}

.lp-phone-note strong {
    color: var(--text);
}

/* ---------- SECTION ---------- */
.lp-section {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
}

.lp-section-alt {
    background: color-mix(in srgb, var(--content) 82%, transparent);
    border-block: 1px solid var(--border);
}

.lp-section-head {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
    position: relative;
}

.lp-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--lp-orange);
}

.lp-section-head h2 {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.16;
    letter-spacing: -.035em;
    font-weight: 800;
}

.lp-section-head p {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--muted);
}

.lp-section-head p strong {
    color: var(--text);
}

/* ---------- SHIFT BAR (kebocoran 24 jam) ---------- */
.lp-shift {
    max-width: 860px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: inset 0 0 0 1px var(--border), 0 6px 24px rgba(70, 40, 20, .07);
}

.lp-shift-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.lp-shift-row:last-of-type {
    margin-bottom: 0;
}

.lp-shift-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

.lp-shift-label strong {
    font-size: 13.5px;
}

.lp-shift-label small {
    font-size: 11px;
    color: var(--tertiary);
}

.lp-shift-track {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
    height: 34px;
}

.lp-shift-track i {
    border-radius: 3px;
    background: color-mix(in srgb, var(--lp-orange) 12%, transparent);
}

.lp-shift-track i.on {
    background: linear-gradient(180deg, var(--lp-orange-2), var(--lp-orange));
}

.lp-shift-track i.off {
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--red) 12%, transparent), color-mix(in srgb, var(--red) 12%, transparent) 3px, transparent 3px, transparent 6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent);
}

.lp-shift-scale {
    margin-top: 14px;
    padding-left: 136px;
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tertiary);
}

.lp-shift-verdict {
    margin: 22px -30px -26px;
    padding: 18px 30px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--red) 6%, transparent);
    border-radius: 0 0 20px 20px;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
    text-align: center;
}

.lp-shift-verdict strong {
    color: var(--red);
    font-weight: 800;
}

/* ---------- LOSS STATS ---------- */
.lp-loss {
    max-width: 760px;
    margin: 40px auto 0;
    padding: 28px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--card);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--border), 0 4px 18px rgba(70, 40, 20, .06);
}

.lp-loss-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.lp-loss-item strong {
    font-size: 27px;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--lp-orange);
}

.lp-loss-item span {
    font-size: 12px;
    color: var(--muted);
    max-width: 16ch;
}

.lp-loss-red strong {
    color: var(--red);
}

.lp-loss-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

/* ---------- SHIFT CARDS (desire) ---------- */
.lp-desire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}

.lp-desire-card {
    position: relative;
    padding: 28px 24px;
    border-radius: 18px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--border), 0 4px 18px rgba(70, 40, 20, .06);
    transition: transform .22s var(--ease), box-shadow .22s;
}

.lp-desire-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-orange) 26%, transparent), 0 12px 30px rgba(70, 40, 20, .12);
}

.lp-desire-time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lp-orange) 12%, transparent);
    color: var(--lp-orange);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lp-desire-card h3 {
    margin: 0 0 9px;
    font-size: 17px;
    letter-spacing: -.02em;
    font-weight: 700;
}

.lp-desire-card p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

.lp-desire-note {
    max-width: 640px;
    margin: 34px auto 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--muted);
}

.lp-desire-note strong {
    color: var(--text);
}

/* ---------- COMPARE TABLE ---------- */
.lp-compare {
    max-width: 860px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--border), 0 6px 24px rgba(70, 40, 20, .07);
}

.lp-compare table {
    width: 100%;
    border-collapse: collapse;
}

.lp-compare th,
.lp-compare td {
    padding: 16px 22px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.lp-compare tbody tr:last-child td {
    border-bottom: 0;
}

.lp-compare thead th {
    padding-block: 18px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: color-mix(in srgb, var(--raised) 62%, var(--card));
}

.lp-compare tbody td:first-child {
    font-weight: 700;
    color: var(--text);
    width: 34%;
}

.lp-compare tbody td {
    color: var(--muted);
}

.lp-compare .lp-col-win {
    background: color-mix(in srgb, var(--lp-orange) 7%, transparent);
    color: var(--text);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--lp-orange);
}

.lp-compare thead .lp-col-win {
    color: var(--lp-orange);
    background: color-mix(in srgb, var(--lp-orange) 13%, transparent);
}

.lp-compare-note {
    max-width: 640px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 24px;
    color: var(--muted);
}

.lp-compare-note strong {
    color: var(--text);
}

/* ---------- FEATURES ---------- */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lp-feature {
    padding: 30px 26px;
    border-radius: 18px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--border), 0 4px 18px rgba(70, 40, 20, .06);
    transition: transform .22s var(--ease), box-shadow .22s;
}

.lp-feature:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-orange) 26%, transparent), 0 12px 30px rgba(70, 40, 20, .12);
}

.lp-feature-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: 18px;
}

.lp-feature-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

.lp-ic-orange { color: #e2571f; background: #ffeee4; }
.lp-ic-green  { color: #17944c; background: #e4f7ec; }
.lp-ic-purple { color: #6d47d9; background: #eee9ff; }
.lp-ic-blue   { color: #1f74d0; background: #e5f0fd; }
.lp-ic-pink   { color: #d43a72; background: #fde9f0; }
.lp-ic-teal   { color: #0a8f95; background: #e0f6f6; }

[data-theme=dark] .lp-ic-orange { color: #ff8f57; background: rgba(255, 143, 87, .14); }
[data-theme=dark] .lp-ic-green  { color: #4ed98a; background: rgba(78, 217, 138, .13); }
[data-theme=dark] .lp-ic-purple { color: #a68bff; background: rgba(166, 139, 255, .14); }
[data-theme=dark] .lp-ic-blue   { color: #62aaf5; background: rgba(98, 170, 245, .13); }
[data-theme=dark] .lp-ic-pink   { color: #f47aa8; background: rgba(244, 122, 168, .13); }
[data-theme=dark] .lp-ic-teal   { color: #43c9ce; background: rgba(67, 201, 206, .13); }

.lp-feature h3 {
    margin: 0 0 9px;
    font-size: 16.5px;
    letter-spacing: -.02em;
    font-weight: 700;
}

.lp-feature p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

/* ---------- STEPS ---------- */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.lp-step {
    position: relative;
    padding: 32px 26px;
    border-radius: 18px;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--border), 0 4px 18px rgba(70, 40, 20, .06);
}

.lp-step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--lp-orange-2), var(--lp-orange));
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--lp-orange) 34%, transparent);
}

.lp-step h3 {
    margin: 0 0 9px;
    font-size: 17px;
    letter-spacing: -.02em;
    font-weight: 700;
}

.lp-step p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--muted);
}

.lp-step p strong {
    color: var(--text);
}

/* ---------- FAQ ---------- */
.lp-faq {
    display: grid;
    gap: 12px;
}

.lp-faq details {
    background: var(--card);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--border);
    transition: box-shadow .2s;
}

.lp-faq details[open] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lp-orange) 30%, transparent), 0 6px 20px rgba(70, 40, 20, .08);
}

.lp-faq summary {
    position: relative;
    list-style: none;
    padding: 20px 56px 20px 22px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    cursor: pointer;
}

.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq-mark {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--lp-orange) 11%, transparent);
}

.lp-faq-mark::before,
.lp-faq-mark::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 12px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--lp-orange);
    transition: transform .22s var(--ease);
}

.lp-faq-mark::after {
    transform: rotate(90deg);
}

.lp-faq details[open] .lp-faq-mark::after {
    transform: rotate(0);
}

.lp-faq details p {
    margin: 0;
    padding: 0 22px 21px;
    font-size: 14px;
    line-height: 23px;
    color: var(--muted);
}

.lp-faq details p strong {
    color: var(--text);
}

.lp-faq details p code {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--raised);
    color: var(--lp-orange);
    font-weight: 600;
}

/* ---------- FINAL CTA ---------- */
.lp-final {
    position: relative;
    padding: 100px 0 110px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--lp-orange) 12%, transparent), color-mix(in srgb, var(--lp-orange-2) 6%, transparent));
    border-top: 1px solid var(--border);
}

.lp-final h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.14;
    letter-spacing: -.038em;
    font-weight: 800;
}

.lp-final > .lp-container > p {
    margin: 20px auto 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 26px;
    color: var(--muted);
}

.lp-final-cta {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

.lp-final-note {
    font-size: 13.5px !important;
    margin-top: 22px !important;
}

.lp-final-note a {
    color: var(--lp-orange);
    font-weight: 700;
    text-decoration: none;
}

.lp-final-note a:hover {
    text-decoration: underline;
}

/* ---------- FOOTER ---------- */
.lp-footer {
    padding: 36px 0;
    border-top: 1px solid var(--border);
    background: var(--card);
}

.lp-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.lp-footer p {
    margin: 0;
    font-size: 12px;
    color: var(--tertiary);
}

/* ---------- REVEAL ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.lp-desire-grid .reveal:nth-child(2),
.lp-features .reveal:nth-child(2),
.lp-steps .reveal:nth-child(2) { transition-delay: .08s; }

.lp-desire-grid .reveal:nth-child(3),
.lp-features .reveal:nth-child(3),
.lp-steps .reveal:nth-child(3) { transition-delay: .16s; }

.lp-features .reveal:nth-child(4) { transition-delay: .04s; }
.lp-features .reveal:nth-child(5) { transition-delay: .12s; }
.lp-features .reveal:nth-child(6) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .lp-phone, .lp-badge i, .lp-bubble, .lp-typing span { animation: none !important; }
}

/* ---------- DARK MODE ---------- */
[data-theme=dark] .lp-phone-body {
    background: #0b141a;
    background-image: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, .04) 1px, transparent 1.2px);
}

[data-theme=dark] .lp-chat-day { background: rgba(32, 44, 51, .92); color: #aebac1; }
[data-theme=dark] .lp-in { background: #202c33; color: #e9edef; }
[data-theme=dark] .lp-out { background: #005c4b; color: #e9edef; }
[data-theme=dark] .lp-typing { background: #005c4b; }
[data-theme=dark] .lp-typing span { background: #9fc3ba; }
[data-theme=dark] .lp-time { color: #aebac1; }
[data-theme=dark] .lp-hero-glow { opacity: .35; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    .lp-features,
    .lp-steps,
    .lp-desire-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-desire-grid > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .lp-nav-links { display: none; }
    .lp-nav-actions { margin-left: auto; }
    .lp-announce { font-size: 11.5px; gap: 6px; }
    .lp-announce span { display: none; }
}

@media (max-width: 680px) {
    .lp-section, .lp-hero { padding-block: 66px; }
    .lp-brand-text small { display: none; }

    .lp-features,
    .lp-steps,
    .lp-desire-grid { grid-template-columns: 1fr; }

    .lp-desire-grid > :last-child { grid-column: auto; }

    .lp-hero-cta .lp-btn { width: 100%; }

    .lp-shift { padding: 22px 18px 18px; }
    .lp-shift-row { grid-template-columns: 1fr; gap: 8px; }
    .lp-shift-label { text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
    .lp-shift-scale { padding-left: 0; }
    .lp-shift-verdict { margin: 18px -18px -18px; padding: 16px 18px; font-size: 13px; }

    .lp-loss { flex-direction: column; gap: 20px; }
    .lp-loss-sep { width: 60%; height: 1px; align-self: center; }

    .lp-compare th, .lp-compare td { padding: 13px 14px; font-size: 12.5px; }

    .lp-footer-inner { flex-direction: column; text-align: center; gap: 12px; }
}