/* Landing page */
.lp { overflow-x: clip; }
.lp-hero { position: relative; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--pid-hero-1) 0%, var(--pid-bg) 100%); }
[data-bs-theme="light"] .lp-hero { background: linear-gradient(180deg, #e9eefb 0%, var(--pid-bg) 100%); }
.lp-grid { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(var(--pid-text) 1px, transparent 1px), linear-gradient(90deg, var(--pid-text) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%); }
.lp-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.lp-glow-a { width: 480px; height: 480px; right: -80px; top: -120px; background: rgba(60, 164, 220, .35); }
.lp-glow-b { width: 380px; height: 380px; left: -120px; bottom: -80px; background: rgba(91, 124, 250, .22); }
.lp-title { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; margin: 1.3rem 0 1.1rem; }
.lp-lead { font-size: 1.12rem; line-height: 1.75; max-width: 54ch; }
.lp-checks { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; color: var(--pid-muted); font-size: .9rem; font-weight: 500; }
.lp-checks i { color: var(--pid-gold); margin-right: .4rem; }

.lp-window { position: relative; border-radius: 1.25rem; background: color-mix(in srgb, var(--pid-surface) 88%, transparent); border: 1px solid var(--pid-border); box-shadow: var(--pid-shadow), 0 0 0 1px rgba(255, 255, 255, .03) inset; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .5s var(--pid-ease); }
.lp-window:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.lp-window-bar { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--pid-border); font-size: .72rem; color: var(--pid-muted); }
.lp-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; } .lp-window-bar i:nth-child(2) { background: #ffd970; } .lp-window-bar i:nth-child(3) { background: #4ade80; }
.lp-window-bar span { margin-left: .6rem; }
.lp-window-body { padding: 1.1rem; display: grid; gap: 1rem; }
.lp-kpi { padding: .8rem; border-radius: .9rem; background: var(--pid-surface-2); border: 1px solid var(--pid-border); }
.lp-kpi small { display: block; color: var(--pid-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.lp-kpi b { display: block; font-size: 1.3rem; color: var(--pid-accent); margin: .3rem 0 .6rem; }
.lp-kpi .bar { display: block; height: 6px; border-radius: 6px; background: var(--pid-raised); position: relative; overflow: hidden; }
.lp-kpi .bar::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--pid-btn-from), var(--pid-btn-to)); }
.lp-chart { padding: .8rem; border-radius: .9rem; background: var(--pid-surface-2); border: 1px solid var(--pid-border); }
.lp-chart svg { display: block; width: 100%; height: 130px; }
.lp-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-pills span { padding: .3rem .7rem; border-radius: 999px; background: var(--pid-accent-soft); color: var(--pid-accent); font-size: .74rem; font-weight: 600; }
.lp-pills i { margin-right: .35rem; }
.lp-note { position: absolute; right: 1rem; bottom: -1.7rem; font-size: .7rem; color: var(--pid-muted); }

.lp-sources { padding: 2.2rem 0; border-block: 1px solid var(--pid-border); background: var(--pid-surface-2); }
.lp-source-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.2rem; }
.lp-source-list span { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--pid-muted); opacity: .85; }

.lp-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.lp-alt { background: var(--pid-surface-2); border-block: 1px solid var(--pid-border); }
.lp-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.lp-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; margin: 1rem 0 .7rem; }
.lp-head p { font-size: 1.05rem; margin: 0; }
.lp-feature { padding: 1.7rem; } .lp-feature h3 { font-size: 1.08rem; margin: 1.1rem 0 .5rem; } .lp-feature .pid-icon { width: 54px; height: 54px; }
.lp-module { display: flex; flex-direction: column; padding: 1.5rem; text-decoration: none; color: var(--pid-text); }
.lp-module:hover { color: var(--pid-text); } .lp-module h3 { font-size: 1.05rem; } .lp-module p { flex: 1; font-size: .9rem; }
.lp-steps { counter-reset: s; }
.lp-step { position: relative; padding: 1.6rem 1.6rem 1.6rem 1.6rem; border-radius: var(--pid-radius); border: 1px dashed var(--pid-border); height: 100%; }
.lp-step h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.lp-step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--pid-btn-from), var(--pid-btn-to)); box-shadow: 0 10px 24px -8px var(--pid-btn-to); }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--pid-radius-lg); color: #fff; background: radial-gradient(circle at 90% 0%, rgba(255, 217, 112, .22), transparent 40%), radial-gradient(circle at 0% 100%, rgba(60, 164, 220, .4), transparent 45%), linear-gradient(120deg, var(--pid-hero-1), var(--pid-hero-2)); }
.lp-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .4rem; }
.lp-cta p { color: rgba(255, 255, 255, .78); margin: 0; }
.lp-cta .btn-light { --bs-btn-bg: #fff; --bs-btn-color: #202344; --bs-btn-hover-bg: #eaf3ff; --bs-btn-hover-color: #202344; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--pid-ease), transform .7s var(--pid-ease); }
.reveal.in { opacity: 1; transform: none; }
@media (max-width: 991.98px) { .lp-window { transform: none; } .lp-note { position: static; margin-top: .6rem; text-align: right; padding-right: 1rem; } }