/* Landing page: infographics and the hero animation. Everything is prefixed lp- ; no scripts - the animation is CSS only
   and stops for people who ask for less motion. */
:root {
    --lp-grad: linear-gradient(135deg, #22d3ee 0%, #6366f1 55%, #a855f7 100%);
    --lp-tg: #2aabee;
    --lp-max: #7c5cff;
    --lp-mail: #64748b;
    --lp-web: #14b8a6;
    --lp-ok: #16a34a;
}

.lp-hero { position: relative; overflow: hidden; padding: 56px 0 40px; background:
    radial-gradient(900px 420px at 85% 10%, rgba(168, 85, 247, .14), transparent 60%),
    radial-gradient(800px 420px at 5% 0%, rgba(34, 211, 238, .16), transparent 60%); }
.lp-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: center; }
.lp-hero h1 { font-size: 3rem; line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
.lp-hero h1 span { background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .lp-sub { font-size: 1.25rem; color: var(--color-text-muted); margin: 0 0 28px; }
.lp-hero .hero-actions { justify-content: flex-start; }
.lp-hero .hero-social { justify-content: flex-start; margin-top: 24px; }
.lp-hero-art { width: 100%; max-width: 640px; justify-self: center; }
.lp-hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- the animation: messengers -> hub -> you, and the reply back (9 s loop) ---- */
.lp-line { fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.lp-pkt { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 9 200; stroke-dashoffset: 9; opacity: 0; }
.lp-pkt.in { animation: lpIn 9s linear infinite; }
.lp-pkt.in.tg { stroke: var(--lp-tg); animation-delay: 0s; }
.lp-pkt.in.mx { stroke: var(--lp-max); animation-delay: .35s; }
.lp-pkt.in.ml { stroke: var(--lp-mail); animation-delay: .7s; }
.lp-pkt.in.wb { stroke: var(--lp-web); animation-delay: 1.05s; }
.lp-pkt.fwd { stroke: #6366f1; animation: lpFwd 9s linear infinite; }
.lp-pkt.back1 { stroke: var(--lp-ok); animation: lpBack1 9s linear infinite; }
.lp-pkt.back2 { stroke: var(--lp-ok); animation: lpBack2 9s linear infinite; }
@keyframes lpIn { 0% { stroke-dashoffset: 9; opacity: 0; } 2% { opacity: 1; } 22% { stroke-dashoffset: -100; opacity: 1; } 23%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes lpFwd { 0%, 22% { stroke-dashoffset: 9; opacity: 0; } 24% { opacity: 1; } 36% { stroke-dashoffset: -100; opacity: 1; } 37%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes lpBack1 { 0%, 46% { stroke-dashoffset: 9; opacity: 0; } 48% { opacity: 1; } 58% { stroke-dashoffset: -100; opacity: 1; } 59%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes lpBack2 { 0%, 58% { stroke-dashoffset: 9; opacity: 0; } 60% { opacity: 1; } 76% { stroke-dashoffset: -100; opacity: 1; } 77%, 100% { stroke-dashoffset: -100; opacity: 0; } }

.lp-ring { fill: none; stroke: #6366f1; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-ring.hub { animation: lpRingHub 9s ease-out infinite; }
.lp-ring.tg { stroke: var(--lp-ok); animation: lpRingTg 9s ease-out infinite; }
@keyframes lpRingHub { 0%, 21% { opacity: 0; transform: scale(1); } 24% { opacity: .55; transform: scale(1); } 36% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes lpRingTg { 0%, 75% { opacity: 0; transform: scale(1); } 77% { opacity: .7; transform: scale(1); } 90% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; } }
.lp-hub-core { transform-box: fill-box; transform-origin: center; animation: lpHubBeat 9s ease-in-out infinite; }
@keyframes lpHubBeat { 0%, 21%, 40%, 100% { transform: scale(1); } 27% { transform: scale(1.07); } }

.lp-you-msg { opacity: 0; animation: lpYouMsg 9s ease-out infinite; transform-box: fill-box; }
.lp-you-reply { opacity: 0; animation: lpYouReply 9s ease-out infinite; }
.lp-tg-ok { opacity: 0; animation: lpTgOk 9s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lpYouMsg { 0%, 30% { opacity: 0; transform: translateY(6px); } 36%, 52% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; } }
@keyframes lpYouReply { 0%, 40% { opacity: 0; } 46%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes lpTgOk { 0%, 75% { opacity: 0; transform: scale(.4); } 80%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }

.lp-caption { font-size: 11px; font-weight: 600; fill: #475569; }
.lp-hubtxt { font-size: 15px; font-weight: 700; fill: #fff; }

/* ---- numbers ---- */
.lp-stats { padding: 8px 0 24px; }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 20px 16px; text-align: center; box-shadow: var(--shadow); }
.lp-stat svg { width: 34px; height: 34px; color: #6366f1; margin-bottom: 6px; }
.lp-stat > b { display: block; font-size: 2.1rem; line-height: 1.1; background: var(--lp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat > span { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: .95rem; }

/* ---- how it works ---- */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: start; counter-reset: lpstep; }
.lp-step { text-align: center; position: relative; padding: 0 10px; }
.lp-step-icon { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--lp-grad); box-shadow: 0 10px 24px rgba(99, 102, 241, .28); position: relative; }
.lp-step-icon svg { width: 38px; height: 38px; }
.lp-step-icon::after { counter-increment: lpstep; content: counter(lpstep); position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #4f46e5; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.lp-step.is-ok .lp-step-icon { background: linear-gradient(135deg, #34d399, #16a34a); box-shadow: 0 10px 24px rgba(22, 163, 74, .25); }
.lp-step > b { display: block; font-size: 1.05rem; }
.lp-step:not(:last-child)::before { content: ''; position: absolute; top: 40px; left: calc(50% + 52px); width: calc(100% - 104px); height: 2px; background: repeating-linear-gradient(90deg, #a5b4fc 0 6px, transparent 6px 12px); }
.lp-step:not(:last-child)::after { content: ''; position: absolute; top: 34px; right: calc(-50% + 40px); border: 7px solid transparent; border-left: 10px solid #a5b4fc; }

/* ---- the blades ---- */
.lp-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-tool { display: flex; align-items: center; gap: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-tool:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 24px rgba(79, 70, 229, .14); border-color: #c7d2fe; }
.lp-tool-icon { flex: none; width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #4f46e5; background: linear-gradient(135deg, #e0f2fe, #ede9fe); }
.lp-tool-icon svg { width: 28px; height: 28px; }
.lp-tool > div > b { display: block; font-size: 1.02rem; line-height: 1.2; }
.lp-tool > div > span { color: var(--color-text-muted); font-size: .9rem; line-height: 1.3; display: block; }

/* ---- privacy ---- */
.lp-privacy { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #c7d2fe; border-radius: 22px; padding: 28px 32px; max-width: 900px; margin: 0 auto; }
.lp-privacy-shield { flex: none; width: 96px; height: 96px; color: #4f46e5; }
.lp-privacy h2 { text-align: left; margin: 0 0 12px; font-size: 1.6rem; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 999px; padding: 6px 14px; font-size: .92rem; font-weight: 600; }
.lp-chip svg { width: 16px; height: 16px; }

/* ---- who it is for ---- */
.lp-who { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.lp-who a { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 10px 20px; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }
.lp-who a:hover { transform: translateY(-2px); border-color: #a5b4fc; text-decoration: none; }

/* ---- final call ---- */
.lp-cta { text-align: center; }
.lp-cta h2 { margin-bottom: 20px; }

@media (max-width: 900px) {
    .lp-hero { padding: 36px 0 24px; }
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-hero h1 { font-size: 2.1rem; }
    .lp-hero .lp-sub { font-size: 1.05rem; }
    .lp-hero .hero-actions, .lp-hero .hero-social { justify-content: center; }
    .lp-hero-copy { text-align: center; }
    .lp-stats-grid { grid-template-columns: 1fr 1fr; }
    .lp-steps { grid-template-columns: 1fr 1fr; gap: 28px 0; }
    .lp-step:not(:last-child)::before, .lp-step:not(:last-child)::after { display: none; }
    .lp-tools { grid-template-columns: 1fr 1fr; }
    .lp-privacy { flex-direction: column; text-align: center; padding: 24px 20px; }
    .lp-privacy h2 { text-align: center; }
    .lp-chips { justify-content: center; }
}
@media (max-width: 560px) {
    .lp-tools { grid-template-columns: 1fr; }
    .lp-stat > b { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-pkt, .lp-ring { display: none; }
    .lp-hub-core, .lp-you-msg, .lp-you-reply, .lp-tg-ok { animation: none; }
    .lp-you-msg, .lp-you-reply, .lp-tg-ok { opacity: 1; }
    .lp-tool, .lp-who a { transition: none; }
}