/* =============================================
   HOME PAGE — second design pass (loaded after home.css)
   A hero with the real product, a screenshot showcase, the full feature map, what is new, and the brochure.
   ============================================= */

/* ── Hero: the product itself ───────────────────────────────────── */
.lp-stack { position: relative; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 0 2.5rem; }
.lp-frame { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #dbe4f3;
            box-shadow: 0 30px 70px rgba(27, 42, 65, .22), 0 6px 18px rgba(27, 42, 65, .08); }
.lp-frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: linear-gradient(#f3f6fc, #eaeff9); border-bottom: 1px solid #dde5f3; direction: ltr; }
.lp-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; }
.lp-frame-bar i:nth-child(2) { background: #ffc24b; } .lp-frame-bar i:nth-child(3) { background: #46d08a; }
.lp-frame-bar span { margin-inline-start: 10px; flex: 1; max-width: 230px; height: 18px; border-radius: 9px; background: #fff; border: 1px solid #dde5f3; font-size: 10px; line-height: 16px; color: #8a96ab; padding: 0 10px; direction: ltr; text-align: left; }
.lp-frame img { display: block; width: 100%; height: auto; }
.lp-phone { position: absolute; bottom: 0; inset-inline-start: -2.2rem; width: 132px; border-radius: 24px; background: #0d1530; padding: 5px;
            box-shadow: 0 24px 50px rgba(13, 21, 48, .38); transform: rotate(-4deg); }
.lp-phone img { display: block; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 19px; background: #fff; }
.lp-chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; border: 1px solid #e4eaf5;
           box-shadow: 0 12px 28px rgba(27, 42, 65, .16); font-size: .8rem; font-weight: 800; color: #1b2a41; white-space: nowrap; animation: float 6s ease-in-out infinite; }
.lp-chip i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; color: #fff; background: var(--c, #3d6fd9); }
.lp-chip-1 { top: -14px; inset-inline-end: 8%; --c: #e11d48; }
.lp-chip-2 { top: 38%; inset-inline-end: -1.6rem; --c: #ea580c; animation-delay: -2s; }
.lp-chip-3 { bottom: 3.2rem; inset-inline-end: 6%; --c: #d97706; animation-delay: -4s; }
.lp-stack .hero-glass-card { position: absolute; bottom: -1rem; inset-inline-start: 6.5rem; width: auto; max-width: 270px; margin: 0; padding: .9rem 1rem; border-radius: 1.1rem; }
@media (max-width: 991.98px) { .lp-phone { inset-inline-start: .5rem; width: 104px; } .lp-chip-2 { inset-inline-end: .5rem; } .lp-stack .hero-glass-card { display: none; } }
@media (max-width: 575.98px) { .lp-chip { font-size: .7rem; padding: .35rem .65rem; } .lp-chip-3 { display: none; } .lp-phone { width: 86px; } }

/* ── Showcase: real screens, one at a time ──────────────────────── */
.lp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.lp-tab { border: 1px solid #d4def0; background: #fff; color: #3a4a66; padding: .5rem 1.05rem; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
          display: inline-flex; align-items: center; gap: .45rem; transition: all .18s; }
.lp-tab:hover { border-color: #3d6fd9; color: #3d6fd9; }
.lp-tab.is-active { background: linear-gradient(135deg, #3d6fd9, #5a54e6); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(61, 111, 217, .3); }
.lp-tab:focus-visible { outline: 3px solid rgba(61, 111, 217, .35); outline-offset: 2px; }
.lp-pane { display: none; align-items: center; gap: 2.5rem; }
.lp-pane.is-active { display: flex; animation: lp-in .35s ease both; }
@keyframes lp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-pane-text { flex: 0 0 34%; }
.lp-pane-text h3 { font-size: 1.45rem; font-weight: 800; color: #1b2a41; margin-bottom: .6rem; line-height: 1.4; }
.lp-pane-text p { color: #5a6a82; line-height: 2; margin-bottom: 1rem; }
.lp-pane-text ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.lp-pane-text li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; color: #2a3a56; line-height: 1.9; }
.lp-pane-text li i { color: #16a34a; margin-top: .55rem; font-size: .8rem; }
.lp-pane-shot { flex: 1; min-width: 0; }
@media (max-width: 991.98px) { .lp-pane.is-active { flex-direction: column; } .lp-pane-text { flex: none; } .lp-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .4rem; margin-inline: -.5rem; padding-inline: .5rem; } .lp-tab { flex: none; } }

/* ── Feature map ────────────────────────────────────────────────── */
.lp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.lp-cat { --c: #3d6fd9; background: #fff; border: 1px solid #e3eaf6; border-top: 4px solid var(--c); border-radius: 18px; padding: 1.3rem 1.3rem 1.1rem; transition: transform .2s, box-shadow .2s; }
.lp-cat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 42, 65, .1); }
.lp-cat-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.lp-cat-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.1rem; color: var(--c); background: color-mix(in srgb, var(--c) 13%, white); }
.lp-cat h3 { font-size: 1.05rem; font-weight: 800; color: #1b2a41; margin: 0; }
.lp-cat ul { list-style: none; padding: 0; margin: 0; }
.lp-cat li { position: relative; padding-inline-start: 1.15rem; font-size: .86rem; line-height: 1.95; color: #34445f; }
.lp-cat li::before { content: ''; position: absolute; inset-inline-start: 0; top: .85rem; width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .7; }
.lp-new { display: inline-block; vertical-align: middle; margin-inline-start: .35rem; font-size: .62rem; font-weight: 800; padding: .02rem .5rem; border-radius: 999px; background: linear-gradient(135deg, #ffb347, #ff7a3d); color: #2b1300; }
.lp-c-rose { --c: #e11d48; } .lp-c-orange { --c: #ea580c; } .lp-c-violet { --c: #7c3aed; } .lp-c-green { --c: #16a34a; } .lp-c-teal { --c: #0d9488; }
.lp-c-amber { --c: #d97706; } .lp-c-indigo { --c: #4f46e5; } .lp-c-sky { --c: #0284c7; }

/* ── What is new ────────────────────────────────────────────────── */
.lp-newgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.lp-newcard { position: relative; display: flex; gap: .95rem; padding: 1.25rem; border-radius: 18px; background: #fff; border: 1px solid #e6ecf7; overflow: hidden; }
.lp-newcard::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); }
.lp-newcard .lp-cat-ico { flex: none; width: 50px; height: 50px; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 35%, transparent); }
.lp-newcard h3 { font-size: 1rem; font-weight: 800; color: #1b2a41; margin: 0 0 .3rem; position: relative; z-index: 1; }
.lp-newcard p { font-size: .85rem; line-height: 1.9; color: #5a6a82; margin: 0; position: relative; z-index: 1; }

/* ── Brochure ───────────────────────────────────────────────────── */
.lp-brochure { position: relative; overflow: hidden; padding: 5rem 0; color: #e8eefc; background: linear-gradient(160deg, #0a1430 0%, #12255b 55%, #1b3a8f 100%); }
.lp-brochure::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: #3b82f6; opacity: .3; filter: blur(80px); top: -200px; inset-inline-end: -120px; }
.lp-brochure::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: #22d3a0; opacity: .16; filter: blur(80px); bottom: -180px; inset-inline-start: -120px; }
.lp-brochure .container { position: relative; z-index: 1; }
.lp-brochure h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: .75rem; }
.lp-brochure .lead-text { color: #c6d4f5; line-height: 2; max-width: 36rem; }
.lp-brochure ul { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; }
.lp-brochure li { display: flex; gap: .6rem; align-items: flex-start; color: #e1eaff; line-height: 1.95; font-size: .94rem; }
.lp-brochure li i { color: #3be0a0; margin-top: .55rem; font-size: .8rem; }
.lp-dl { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.6rem; border-radius: 14px; background: linear-gradient(135deg, #3be0a0, #17a56f); color: #05241a; font-weight: 800; text-decoration: none; box-shadow: 0 16px 34px rgba(34, 211, 160, .3); transition: transform .18s; }
.lp-dl:hover { transform: translateY(-3px); color: #05241a; }
.lp-dl-note { display: block; margin-top: .65rem; font-size: .78rem; color: #9fb4e6; }
.lp-fan { position: relative; height: 430px; max-width: 520px; margin: 0 auto; }
.lp-fan img { position: absolute; width: 270px; border-radius: 10px; box-shadow: 0 24px 54px rgba(3, 8, 28, .55); background: #fff; transition: transform .3s; }
.lp-fan img:nth-child(1) { top: 40px; inset-inline-start: 10px; transform: rotate(-7deg); }
.lp-fan img:nth-child(2) { top: 14px; inset-inline-start: 120px; transform: rotate(2deg); z-index: 2; }
.lp-fan img:nth-child(3) { top: 56px; inset-inline-start: 226px; transform: rotate(9deg); }
.lp-fan:hover img:nth-child(1) { transform: rotate(-10deg) translateX(-14px); } .lp-fan:hover img:nth-child(3) { transform: rotate(12deg) translateX(14px); }
.lp-pages { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: .78rem; font-weight: 700; margin-bottom: 1rem; }
@media (max-width: 575.98px) { .lp-fan { height: 300px; } .lp-fan img { width: 170px; } .lp-fan img:nth-child(2) { inset-inline-start: 80px; } .lp-fan img:nth-child(3) { inset-inline-start: 150px; } }
@media (prefers-reduced-motion: reduce) { .lp-chip { animation: none; } .lp-pane.is-active { animation: none; } }