/* ================================================================
   Landing page — abstract redesign
   ================================================================ */

/* ---------- shared ---------- */
.index-container {
    width: 100%;
    padding: 0;
}

.index-highly-rounded {
    border-radius: 1.25rem;
}

.index-header {
    font-size: 3.4rem;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.index-subheader {
    font-size: 1.3rem;
    line-height: 1.55;
}

@media (max-width: 767px) {
    .index-header { font-size: 2.25rem; }
    .index-subheader { font-size: 1.1rem; }
}

.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .16em;
    color: var(--primary);
    margin-bottom: 1rem;
}

.lp-kicker::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-400, var(--primary)));
}

.lp-kicker-light { color: #c7d2fe; }
.lp-kicker-light::before { background: linear-gradient(90deg, #a5b4fc, #e0e7ff); }

.lp-h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ---------- hero ---------- */
.lp-hero {
    position: relative;
    padding: 3rem 0 1.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.lp-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.lp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}

.lp-blob-a {
    width: 540px;
    height: 540px;
    right: -140px;
    top: -160px;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .35), rgba(56, 130, 246, .12) 60%, transparent 75%);
}

.lp-blob-b {
    width: 440px;
    height: 440px;
    left: -160px;
    bottom: -180px;
    background: radial-gradient(circle at 60% 40%, rgba(16, 185, 129, .16), rgba(99, 102, 241, .12) 55%, transparent 75%);
}

.lp-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(79, 70, 229, .18) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 65% 30%, black 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 55% at 65% 30%, black 25%, transparent 75%);
    opacity: .55;
}

.lp-orbit {
    position: absolute;
    border: 1.5px dashed rgba(99, 102, 241, .35);
    border-radius: 50%;
}

.lp-orbit-1 {
    width: 340px;
    height: 340px;
    right: 6%;
    top: 6%;
    animation: lp-spin 60s linear infinite;
}

.lp-orbit-2 {
    width: 130px;
    height: 130px;
    right: 34%;
    bottom: 12%;
    animation: lp-spin 45s linear infinite reverse;
}

@keyframes lp-spin {
    to { transform: rotate(360deg); }
}

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .28);
    color: var(--primary-800, var(--primary));
    font-size: .8rem;
    font-weight: 600;
}

.lp-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: lp-pulse 2s infinite;
}

@keyframes lp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.lp-btn-ghost {
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .18);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lp-btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, .45);
    box-shadow: 0 14px 28px -10px rgba(49, 46, 129, .3);
    color: var(--primary);
}

.lp-cta {
    font-weight: 700;
}

/* ---------- hero stage ---------- */
.lp-hero-stage { position: relative; }

.lp-stage {
    position: relative;
    padding: 1.5rem 0;
}

.lp-stage-glow {
    position: absolute;
    inset: -8% -6%;
    background: radial-gradient(ellipse at 55% 45%, rgba(99, 102, 241, .3), transparent 65%);
    filter: blur(24px);
    z-index: 0;
}

.lp-browser {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, .14);
    box-shadow: 0 34px 64px -20px rgba(49, 46, 129, .4), 0 4px 16px -6px rgba(15, 23, 42, .12);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.lp-browser-bar {
    display: flex;
    gap: 7px;
    padding: .7rem .95rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.lp-browser-bar span,
.lp-terminal-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.lp-browser-bar span:nth-child(1),
.lp-terminal-bar span:nth-child(1) { background: #f87171; }
.lp-browser-bar span:nth-child(2),
.lp-terminal-bar span:nth-child(2) { background: #fbbf24; }
.lp-browser-bar span:nth-child(3),
.lp-terminal-bar span:nth-child(3) { background: #34d399; }

.lp-browser img {
    display: block;
    width: 100%;
}

.lp-tilt-r { transform: rotate(1.6deg); }
.lp-tilt-l { transform: rotate(-1.4deg); }
.lp-tilt-r:hover,
.lp-tilt-l:hover { transform: rotate(0deg) translateY(-4px); }

.lp-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(99, 102, 241, .2);
    box-shadow: 0 12px 26px -10px rgba(49, 46, 129, .35);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    animation: lp-float 5s ease-in-out infinite;
}

.lp-chip i { color: var(--primary); font-size: .75rem; }

.lp-chip-1 { top: 4%; left: -5%; }
.lp-chip-2 { bottom: 10%; left: -9%; animation-delay: 1.2s; }
.lp-chip-3 { top: 42%; right: -5%; animation-delay: .6s; }

.lp-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.lp-dot-green {
    background: #22c55e;
    animation: lp-pulse 2s infinite;
}

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

@media (max-width: 991px) {
    .lp-hero { padding-top: 2.25rem; }
    .lp-hero-copy { text-align: center; }
    .lp-hero-copy .d-flex { justify-content: center; }
    .lp-stage { margin-top: 1.5rem; }
    .lp-chip-1 { left: 0; }
    .lp-chip-2 { left: 0; }
    .lp-chip-3 { right: 0; }
}

/* ---------- dark mode refinements ---------- */
[data-theme-style="dark"] .lp-chip {
    background: rgba(15, 23, 42, .88);
    border-color: rgba(129, 140, 248, .35);
    color: #e2e8f0;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6);
}

[data-theme-style="dark"] .lp-btn-ghost {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(148, 163, 184, .3);
    color: #e2e8f0;
}

[data-theme-style="dark"] .lp-btn-ghost:hover {
    border-color: rgba(129, 140, 248, .55);
    color: #c7d2fe;
}

[data-theme-style="dark"] .lp-badge {
    background: rgba(99, 102, 241, .16);
    border-color: rgba(129, 140, 248, .4);
    color: #c7d2fe;
}

[data-theme-style="dark"] .lp-list span { color: #cbd5e1; }

[data-theme-style="dark"] .lp-list i {
    background: rgba(99, 102, 241, .2);
    color: #a5b4fc;
}

[data-theme-style="dark"] .lp-pill-soft {
    background: rgba(99, 102, 241, .18);
    border-color: rgba(129, 140, 248, .35);
    color: #c7d2fe;
}

[data-theme-style="dark"] .lp-pill-soft i { color: #a5b4fc; }

/* ---------- steps : connected glass track ---------- */
.lp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 28px 64px -28px rgba(30, 41, 59, .28), inset 0 1px 0 rgba(255, 255, 255, .95);
    overflow: hidden;
}

.lp-step {
    position: relative;
    z-index: 1;
    padding: 2.6rem 2.1rem 2.35rem;
    transition: background .3s;
}

.lp-step:hover { background: rgba(99, 102, 241, .05); }

/* hairline divider between segments */
.lp-step + .lp-step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(30, 41, 59, .14), transparent);
}

/* arrow chip straddling the divider */
.lp-step + .lp-step::after {
    content: '›';
    position: absolute;
    left: -14px;
    top: 4.6rem;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-bottom: 3px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-500, var(--primary)), var(--primary-700, var(--primary)));
    box-shadow: 0 8px 18px -6px rgba(79, 70, 229, .55), 0 0 0 5px rgba(255, 255, 255, .95);
    z-index: 2;
}

/* ghost number watermark */
.lp-step-num {
    position: absolute;
    top: 1rem;
    right: 1.35rem;
    font-size: 4.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(99, 102, 241, .32);
    user-select: none;
    pointer-events: none;
    transition: -webkit-text-stroke-color .3s;
}

.lp-step:hover .lp-step-num { -webkit-text-stroke-color: rgba(99, 102, 241, .6); }

.lp-step-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--primary-500, var(--primary)), var(--primary-700, var(--primary)));
    box-shadow: 0 14px 28px -10px rgba(79, 70, 229, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .3s, box-shadow .3s;
}

/* dashed halo ring around the orb */
.lp-step-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 1.65rem;
    border: 1.5px dashed rgba(99, 102, 241, .4);
    transition: border-color .3s, transform .3s;
}

.lp-step:hover .lp-step-icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 36px -12px rgba(79, 70, 229, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.lp-step:hover .lp-step-icon::before {
    border-color: rgba(99, 102, 241, .7);
    transform: rotate(8deg);
}

[data-theme-style="dark"] .lp-steps {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 28px 64px -28px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-theme-style="dark"] .lp-step:hover { background: rgba(129, 140, 248, .08); }
[data-theme-style="dark"] .lp-step + .lp-step::before { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .14), transparent); }
[data-theme-style="dark"] .lp-step + .lp-step::after { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .65), 0 0 0 5px rgba(15, 23, 42, .95); }
[data-theme-style="dark"] .lp-step-num { -webkit-text-stroke-color: rgba(129, 140, 248, .4); }
[data-theme-style="dark"] .lp-step:hover .lp-step-num { -webkit-text-stroke-color: rgba(129, 140, 248, .75); }
[data-theme-style="dark"] .lp-step-icon::before { border-color: rgba(129, 140, 248, .4); }
[data-theme-style="dark"] .lp-step:hover .lp-step-icon::before { border-color: rgba(129, 140, 248, .75); }

@media (max-width: 767px) {
    .lp-steps { grid-template-columns: 1fr; }
    .lp-step + .lp-step::before {
        left: 14%;
        right: 14%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .3), transparent);
    }
    .lp-step + .lp-step::after {
        left: 50%;
        top: -14px;
        transform: translateX(-50%) rotate(90deg);
    }
    .lp-step-num { font-size: 3.4rem; }
}

/* ---------- feature frames ---------- */
.lp-frame { position: relative; }

.lp-frame-img {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(99, 102, 241, .16);
    box-shadow: 0 26px 52px -18px rgba(49, 46, 129, .32);
}

.lp-frame-blob::before {
    content: '';
    position: absolute;
    inset: -7% -9% 12% -9%;
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(16, 185, 129, .12) 70%, rgba(56, 130, 246, .15));
    transform: rotate(-3deg);
    z-index: 0;
}

.lp-frame-rings::before {
    content: '';
    position: absolute;
    inset: -30% -14%;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 36px, rgba(99, 102, 241, .14) 36px 38px);
    z-index: 0;
    -webkit-mask-image: radial-gradient(circle, #000 78%, transparent 96%);
    mask-image: radial-gradient(circle, #000 78%, transparent 96%);
}

.lp-frame-dots::before {
    content: '';
    position: absolute;
    inset: 10% -7% -9% -7%;
    border-radius: 1.5rem;
    background-image: radial-gradient(rgba(79, 70, 229, .3) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    z-index: 0;
}

.lp-frame-float img {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 30px 60px -18px rgba(15, 23, 42, .55);
}

/* ---------- gradient band ---------- */
.lp-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #312e81 0%, #4f46e5 52%, #2563eb 100%);
}

.lp-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 320px at 82% 12%, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none;
}

.lp-band-decor { position: absolute; inset: 0; pointer-events: none; }

.lp-band-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .16);
}

.lp-band-ring-1 { width: 430px; height: 430px; right: -140px; top: -170px; }
.lp-band-ring-2 { width: 230px; height: 230px; right: 100px; bottom: -140px; }

.lp-band .lp-h2 { color: #fff; }
.lp-band-sub { color: rgba(224, 231, 255, .88); font-size: 1.05rem; }

.lp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.lp-pills-center { justify-content: center; }

.lp-pill {
    display: inline-flex;
    align-items: center;
    padding: .5rem .95rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #eef2ff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lp-pill i { color: #c7d2fe; }

.lp-pill-soft {
    background: rgba(99, 102, 241, .1);
    border-color: rgba(99, 102, 241, .25);
    color: var(--primary-800, var(--primary));
}

.lp-pill-soft i { color: var(--primary); }

/* ---------- checklist ---------- */
.lp-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem 1.25rem;
}

.lp-list span {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--gray-700);
}

.lp-list i {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .6rem;
    background: rgba(99, 102, 241, .1);
    color: var(--primary);
    font-size: .74rem;
}

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

/* ---------- spotlight ---------- */
.lp-spotlight { text-align: center; }
.lp-spotlight-copy { max-width: 660px; }
.lp-stage-wide { max-width: 880px; margin: 0 auto; }

/* ---------- brands marquee ---------- */
.lp-marquee {
    overflow: hidden;
    padding: .75rem 0 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.lp-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: lp-scroll 42s linear infinite;
}

.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }

@keyframes lp-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .lp-chip, .lp-orbit-1, .lp-orbit-2, .lp-badge-dot, .lp-dot-green, .index-background path { animation: none; }
}

/* ---------- bento grid ---------- */
.lp-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.lp-bento-cell {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 10px 26px -14px rgba(49, 46, 129, .14);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
}

.lp-bento-cell:hover {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 24px 46px -16px rgba(49, 46, 129, .24);
}

.lp-bento-wide { grid-column: span 2; }

@media (min-width: 768px) and (max-width: 991px) {
    .lp-bento { grid-template-columns: 1fr 1fr; }
    .lp-bento-wide { grid-column: span 2; }
}

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

/* ---------- stats band ---------- */
.lp-stats {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 3.5rem 2rem;
    text-align: center;
    background: linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #3730a3 100%);
}

.lp-stats-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(620px 220px at 50% 0%, rgba(129, 140, 248, .4), transparent 70%),
        radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}

.lp-stats-text {
    position: relative;
    color: #eef2ff;
    font-weight: 600;
}

/* ---------- api terminal ---------- */
.lp-terminal {
    position: relative;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 32px 62px -20px rgba(15, 23, 42, .55);
}

.lp-terminal-bar {
    display: flex;
    gap: 7px;
    padding: .75rem 1rem;
    background: rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- faq ---------- */
.index-faq .card {
    border: 1px solid var(--gray-100) !important;
    border-radius: 1rem !important;
    margin-bottom: .9rem;
    overflow: hidden;
    box-shadow: 0 8px 22px -14px rgba(49, 46, 129, .14);
    transition: border-color .25s, box-shadow .25s;
}

.index-faq .card:hover {
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 16px 34px -16px rgba(49, 46, 129, .22);
}

.index-faq svg {
    transition: all .15s;
    color: var(--primary-800, var(--primary));
}

/* ---------- cta ---------- */
.index-cta {
    position: relative;
    overflow: hidden;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700"><defs><radialGradient id="ffflux-gradient"><stop offset="0%" stop-color="rgb(17, 85, 212)"></stop><stop offset="100%" stop-color="hsl(239, 66%, 62%)"></stop></radialGradient><filter id="ffflux-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.005 0.003" numOctaves="1" seed="282" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence><feGaussianBlur stdDeviation="20 0" x="0%" y="0%" width="100%" height="100%" in="turbulence" edgeMode="duplicate" result="blur"></feGaussianBlur><feBlend mode="color-burn" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="blur" result="blend"></feBlend></filter></defs><rect width="700" height="700" fill="url(%23ffflux-gradient)" filter="url(%23ffflux-filter)"></rect></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    color: white !important;
}

.index-cta a.btn {
    color: white;
    background: var(--primary-900);
    border-color: var(--primary-900);
    padding: 1.2rem 4.2rem;
    font-size: 1.25rem;
}

.index-cta a.btn:hover {
    background: var(--primary-700);
    border-color: var(--primary-700);
}

[data-theme-style="dark"] .index-cta a.btn {
    background: var(--primary-100);
    border-color: var(--primary-100);
}

/* ---------- waves background ---------- */
.index-background-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute !important;
    z-index: -1;
}

.index-background {
    position: absolute;
    top: 2rem;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 92%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 92%);
}

/* each wave layer morphs its own contour — true surf, not sliding slices */
.index-background path { transition: none; }

.index-background path:nth-of-type(1) { animation: lp-wave-a 14s linear -4s infinite; }
.index-background path:nth-of-type(2) { animation: lp-wave-b 11s linear -7s infinite; }
.index-background path:nth-of-type(3) { animation: lp-wave-c 18s linear -2s infinite; }

@keyframes lp-wave-a {
    0% { d: path("M0,32L20,74.1C40,116.3 80,197.9 120,202.6C160,202.7 200,125 240,96.3C280,65.9 320,88.5 360,117.7C400,150.3 440,191.1 480,220.9C520,254.4 560,273.2 600,251C640,227.1 680,158.9 720,128.7C760,94.9 800,99.1 840,96.4C880,92.2 920,83.4 960,103.6C1000,127.1 1040,182.3 1080,176.4C1120,173.5 1160,108.9 1200,107C1240,103 1280,160.7 1320,197.3C1360,229.9 1400,244.3 1420,250.1L1440,256L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    33.33% { d: path("M0,51.1L20,85.5C40,119.6 80,184.8 120,175.6C160,166.9 200,87.1 240,63.3C280,44.1 320,81.9 360,127.6C400,174.8 440,225.6 480,259.1C520,288.9 560,297.7 600,260.9C640,220.5 680,137.1 720,95.7C760,57 800,63.3 840,69.4C880,79.1 920,86.7 960,122.7C1000,158.3 1040,219.9 1080,213.3C1120,202.7 1160,125 1200,107C1240,86.9 1280,131.5 1320,160.4C1360,192.3 1400,213.1 1420,224.3L1440,236.9L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    66.66% { d: path("M0,12.9L20,48.3C40,85.1 80,160.3 120,165.7C160,173.5 200,108.9 240,96.3C280,82 320,117.7 360,154.6C400,187.9 440,222.3 480,240C520,257.7 560,260.1 600,224C640,191.3 680,121 720,95.7C760,73.1 800,92.5 840,106.3C880,116.7 920,117.9 960,141.8C1000,161.6 1040,206.8 1080,186.3C1120,166.9 1160,87.1 1200,74C1240,65.1 1280,124.9 1320,170.3C1360,216.8 1400,247.6 1420,261.5L1440,275.1L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    100% { d: path("M0,32L20,74.1C40,116.3 80,197.9 120,202.6C160,202.7 200,125 240,96.3C280,65.9 320,88.5 360,117.7C400,150.3 440,191.1 480,220.9C520,254.4 560,273.2 600,251C640,227.1 680,158.9 720,128.7C760,94.9 800,99.1 840,96.4C880,92.2 920,83.4 960,103.6C1000,127.1 1040,182.3 1080,176.4C1120,173.5 1160,108.9 1200,107C1240,103 1280,160.7 1320,197.3C1360,229.9 1400,244.3 1420,250.1L1440,256L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
}

@keyframes lp-wave-b {
    0% { d: path("M0,240L12,209.1C24,177.8 48,113.8 72,106.7C96,97.7 120,147.2 144,189.5C168,232.2 192,268.8 216,264.6C240,261 264,217.2 288,179.5C312,144 336,115.3 360,130.5C384,146.2 408,205.8 432,226.9C456,247.7 480,229 504,193.8C528,156.8 552,101 576,82C600,61.2 624,77.8 648,98.5C672,119.8 696,147.3 720,138.7C744,131.2 768,89.2 792,64C816,40.3 840,34.8 864,66.5C888,98.8 912,168.2 936,199.4C960,229 984,220.8 1008,204.5C1032,187 1056,161.7 1080,162.9C1104,162.8 1128,189.2 1152,189.1C1176,190.3 1200,165 1224,147.5C1248,131.2 1272,123 1296,126C1320,130.8 1344,146.2 1368,157.5C1392,168.2 1416,172.7 1428,174.6L1440,176L1440,320L1428,320C1416,320 1392,320 1368,320C1344,320 1320,320 1296,320C1272,320 1248,320 1224,320C1200,320 1176,320 1152,320C1128,320 1104,320 1080,320C1056,320 1032,320 1008,320C984,320 960,320 936,320C912,320 888,320 864,320C840,320 816,320 792,320C768,320 744,320 720,320C696,320 672,320 648,320C624,320 600,320 576,320C552,320 528,320 504,320C480,320 456,320 432,320C408,320 384,320 360,320C336,320 312,320 288,320C264,320 240,320 216,320C192,320 168,320 144,320C120,320 96,320 72,320C48,320 24,320 12,320L0,320Z"); }
    33.33% { d: path("M0,223L12,188.2C24,153.5 48,84.7 72,75.6C96,67.6 120,121 144,169.9C168,221 192,267.2 216,272.6C240,278 264,241.5 288,208.6C312,175.1 336,145.4 360,156.7C384,165.8 408,217 432,228.5C456,239.7 480,212 504,169.5C528,127.7 552,69.9 576,51.9C600,35 624,58.2 648,87.3C672,118.2 696,155.3 720,155.7C744,155.5 768,118.3 792,95.1C816,70.4 840,61 864,86.1C888,110 912,169.8 936,191.4C960,212 984,196.5 1008,175.4C1032,155.9 1056,131.6 1080,136.7C1104,143.2 1128,178 1152,187.5C1176,198.3 1200,182 1224,171.8C1248,160.3 1272,154.1 1296,156.1C1320,157 1344,165.8 1368,168.7C1392,169.8 1416,164.7 1428,161.9L1440,159L1440,320L1428,320C1416,320 1392,320 1368,320C1344,320 1320,320 1296,320C1272,320 1248,320 1224,320C1200,320 1176,320 1152,320C1128,320 1104,320 1080,320C1056,320 1032,320 1008,320C984,320 960,320 936,320C912,320 888,320 864,320C840,320 816,320 792,320C768,320 744,320 720,320C696,320 672,320 648,320C624,320 600,320 576,320C552,320 528,320 504,320C480,320 456,320 432,320C408,320 384,320 360,320C336,320 312,320 288,320C264,320 240,320 216,320C192,320 168,320 144,320C120,320 96,320 72,320C48,320 24,320 12,320L0,320Z"); }
    66.66% { d: path("M0,208.9L12,178.6C24,148.7 48,89.6 72,89.8C96,89.7 120,148.8 144,200.7C168,251.8 192,295 216,294.7C240,292.1 264,246.3 288,203.7C312,160.9 336,123.3 360,128.9C384,135 408,186.2 432,200.7C456,217.6 480,197.9 504,164.7C528,132.6 552,84.1 576,74C600,62.8 624,89 648,118.1C672,146 696,177.4 720,169.8C744,160.3 768,113.4 792,80.9C816,48.3 840,33.2 864,55.3C888,79.2 912,142 936,169.3C960,197.9 984,191.7 1008,180.3C1032,170.1 1056,153.7 1080,164.5C1104,174 1128,208.8 1152,215.3C1176,220.4 1200,196.1 1224,176.6C1248,155.4 1272,139.9 1296,134C1320,129.2 1344,135 1368,137.9C1392,142 1416,142.6 1428,143.6L1440,144.9L1440,320L1428,320C1416,320 1392,320 1368,320C1344,320 1320,320 1296,320C1272,320 1248,320 1224,320C1200,320 1176,320 1152,320C1128,320 1104,320 1080,320C1056,320 1032,320 1008,320C984,320 960,320 936,320C912,320 888,320 864,320C840,320 816,320 792,320C768,320 744,320 720,320C696,320 672,320 648,320C624,320 600,320 576,320C552,320 528,320 504,320C480,320 456,320 432,320C408,320 384,320 360,320C336,320 312,320 288,320C264,320 240,320 216,320C192,320 168,320 144,320C120,320 96,320 72,320C48,320 24,320 12,320L0,320Z"); }
    100% { d: path("M0,240L12,209.1C24,177.8 48,113.8 72,106.7C96,97.7 120,147.2 144,189.5C168,232.2 192,268.8 216,264.6C240,261 264,217.2 288,179.5C312,144 336,115.3 360,130.5C384,146.2 408,205.8 432,226.9C456,247.7 480,229 504,193.8C528,156.8 552,101 576,82C600,61.2 624,77.8 648,98.5C672,119.8 696,147.3 720,138.7C744,131.2 768,89.2 792,64C816,40.3 840,34.8 864,66.5C888,98.8 912,168.2 936,199.4C960,229 984,220.8 1008,204.5C1032,187 1056,161.7 1080,162.9C1104,162.8 1128,189.2 1152,189.1C1176,190.3 1200,165 1224,147.5C1248,131.2 1272,123 1296,126C1320,130.8 1344,146.2 1368,157.5C1392,168.2 1416,172.7 1428,174.6L1440,176L1440,320L1428,320C1416,320 1392,320 1368,320C1344,320 1320,320 1296,320C1272,320 1248,320 1224,320C1200,320 1176,320 1152,320C1128,320 1104,320 1080,320C1056,320 1032,320 1008,320C984,320 960,320 936,320C912,320 888,320 864,320C840,320 816,320 792,320C768,320 744,320 720,320C696,320 672,320 648,320C624,320 600,320 576,320C552,320 528,320 504,320C480,320 456,320 432,320C408,320 384,320 360,320C336,320 312,320 288,320C264,320 240,320 216,320C192,320 168,320 144,320C120,320 96,320 72,320C48,320 24,320 12,320L0,320Z"); }
}

@keyframes lp-wave-c {
    0% { d: path("M0,110.9L20,124.1C40,136.8 80,161.5 120,143.2C160,126.2 200,67.4 240,81.4C280,97.8 320,187.2 360,187.2C400,189.1 440,100.8 480,81C520,59.9 560,104.7 600,110.3C640,112.6 680,75.2 720,68.2C760,60.6 800,85.5 840,95.9C880,108.6 920,108.2 960,99.9C1000,94.6 1040,79.4 1080,92.7C1120,105.3 1160,143.3 1200,179C1240,212 1280,242 1320,216.1C1360,187.9 1400,106.4 1420,64.9L1440,23.9L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    33.33% { d: path("M0,77L20,92.2C40,108 80,142 120,135.9C160,132.1 200,85.6 240,109.4C280,131.3 320,221.5 360,217.3C400,210.6 440,110.4 480,77.5C520,43.8 560,78.2 600,77.4C640,78.1 680,44.1 720,45C760,48.6 800,86.5 840,109.8C880,133.4 920,140.3 960,134.6C1000,126.8 1040,104.4 1080,106.9C1120,106.7 1160,131.5 1200,155.9C1240,180.9 1280,207.5 1320,183.2C1360,161.3 1400,90 1420,54.6L1440,20.2L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    66.66% { d: path("M0,100.1L20,119.7C40,139.1 80,176.5 120,168.8C160,158.7 200,102 240,113.1C280,121.9 320,200.3 360,187.4C400,176.3 440,76.8 480,49.4C520,25.3 560,72.1 600,84.4C640,97.3 680,72.7 720,78.8C760,82.8 800,116 840,130.3C880,141.9 920,135.6 960,117.4C1000,99.6 1040,71.2 1080,72.5C1120,76 1160,109.2 1200,145.1C1240,183.2 1280,222.5 1320,208.8C1360,193.8 1400,124.6 1420,88.4L1440,51.9L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
    100% { d: path("M0,110.9L20,124.1C40,136.8 80,161.5 120,143.2C160,126.2 200,67.4 240,81.4C280,97.8 320,187.2 360,187.2C400,189.1 440,100.8 480,81C520,59.9 560,104.7 600,110.3C640,112.6 680,75.2 720,68.2C760,60.6 800,85.5 840,95.9C880,108.6 920,108.2 960,99.9C1000,94.6 1040,79.4 1080,92.7C1120,105.3 1160,143.3 1200,179C1240,212 1280,242 1320,216.1C1360,187.9 1400,106.4 1420,64.9L1440,23.9L1440,320L1420,320C1400,320 1360,320 1320,320C1280,320 1240,320 1200,320C1160,320 1120,320 1080,320C1040,320 1000,320 960,320C920,320 880,320 840,320C800,320 760,320 720,320C680,320 640,320 600,320C560,320 520,320 480,320C440,320 400,320 360,320C320,320 280,320 240,320C200,320 160,320 120,320C80,320 40,320 20,320L0,320Z"); }
}


@media (min-width: 768px) {
    .index-background { top: -.5rem; }
}

/* ---------- misc kept classes ---------- */
.index-icon-container {
    background: var(--gray-100);
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    color: var(--primary);
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    border-radius: calc(2 * var(--border-radius));
}

.index-brand-icon-container {
    background: var(--primary-100);
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    border-radius: calc(2 * var(--border-radius));
}

.index-brand-icon-container svg {
    width: 30px;
    height: auto;
    transition: all .3s ease-in-out;
}

.index-brand-icon-container:hover svg { transform: scale(1.12); }

.index-testimonial-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    transform: translateY(-70%);
    border: 4px solid var(--white);
    background: var(--white);
    position: absolute;
    left: 50%;
    margin-left: -52px;
}

.index-testimonial-comment { margin-left: 18px; }

.index-timeline { position: relative; }

.index-timeline::before {
    content: '';
    position: absolute;
    border-left: 2px solid var(--primary-100);
    height: 100%;
    left: calc(57px / 2);
}

.inverse-colors-animation { transition: 0.35s; }
.inverse-colors-animation:hover {
    filter: invert(100%) hue-rotate(180deg) saturate(0.9) brightness(1.05);
}

.card { border: 1px solid var(--gray-100); }

.app-footer {
    border: 1px solid var(--gray-100);
    border-radius: calc(2 * var(--border-radius));
}
