/* Landing — naslanja se na tokene iz app.css */

.lp { overflow-x: hidden; }

.lp-nav .topbar-inner { max-width: 1200px; }

.lp-nav-links { display: flex; gap: .15rem; }
@media (max-width: 900px) {
    .lp-nav-links { display: none; }
}

.lp-hero {
    background:
        radial-gradient(1100px 480px at 8% -20%, rgba(99, 102, 241, .18), transparent),
        radial-gradient(800px 360px at 100% 0%, rgba(56, 189, 248, .12), transparent),
        var(--bg);
    padding: 48px 0 28px;
    border-bottom: 1px solid var(--border);
}

.lp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 36px;
    align-items: center;
    padding-bottom: 36px;
}
@media (max-width: 980px) {
    .lp-hero-inner { grid-template-columns: 1fr; }
}

.lp-kicker {
    color: var(--primary);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 .7rem;
}

.lp-hero h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.55rem);
    letter-spacing: -.03em;
    margin-bottom: .8rem;
}

.lp-lead {
    font-size: 1.08rem;
    color: var(--muted);
    max-width: 38rem;
}

.lp-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.2rem; }

.lp-pill {
    display: inline-flex;
    align-items: center;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    font-size: .8rem;
    font-weight: 700;
}

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

.lp-section { padding: 64px 0 20px; }
.lp-section.lp-alt { background: #eef1f8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.lp-section-head { max-width: 720px; margin-bottom: 1.5rem; }
.lp-section-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -.02em; }
.lp-section-head p { color: var(--text); font-size: 1.02rem; }

.lp-note { color: var(--muted); margin-top: 1rem; }

.lp-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.lp-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #f7f8fc;
    border-bottom: 1px solid var(--border);
}
.lp-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4d7e3;
}
.lp-chrome span:nth-child(1) { background: #f87171; }
.lp-chrome span:nth-child(2) { background: #fbbf24; }
.lp-chrome span:nth-child(3) { background: #34d399; }
.lp-chrome em {
    margin-left: 8px;
    font-style: normal;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 600;
}

.lp-toolbar { padding: 10px 14px 0; margin-bottom: .4rem; }
.lp-overlap { padding: 12px 14px 0; }

.lp-shot .cal-scroll {
    max-height: 520px;
    border: none;
    border-radius: 0;
}

.lp-shot .cal {
    grid-template-columns: 56px repeat(7, minmax(190px, 1fr)) !important;
    min-width: 1386px;
}

.lp-shot-hero .cal-scroll { max-height: 340px; }
.lp-shot-fine .cal {
    grid-template-columns: 56px repeat(7, minmax(150px, 1fr)) !important;
    min-width: 1106px;
}

.lp-hero-frame { min-width: 0; }

.lp-coverage-grid { align-items: start; }

.lp-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding-top: 8px;
}

.lp-bar {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.lp-bar-fill {
    width: 100%;
    max-width: 18px;
    border-radius: 4px 4px 2px 2px;
    background: var(--primary);
    opacity: .55;
    min-height: 4px;
}

.lp-bar.peak .lp-bar-fill { opacity: 1; background: var(--success); }
.lp-bar.low .lp-bar-fill { opacity: .35; background: var(--warning); }

.lp-bar-count { font-size: .68rem; font-weight: 700; color: var(--text); }
.lp-bar-hour {
    font-size: .58rem;
    color: var(--muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .02em;
}

.lp-list { margin: 0; padding-left: 1.15rem; }
.lp-list li { margin-bottom: .45rem; }

.lp-mail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.lp-mail-head {
    background: var(--primary);
    color: #fff;
    padding: 16px 22px;
    font-weight: 800;
}
.lp-mail-head .small { font-weight: 500; opacity: .85; }
.lp-mail-body { padding: 22px; }

.lp-free { text-align: center; }
.lp-free h2 { font-size: 1.8rem; }
.lp-free .lp-cta { justify-content: center; }

.lp-faq details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: .55rem;
}
.lp-faq summary {
    cursor: pointer;
    font-weight: 700;
}
.lp-faq details p { color: var(--muted); margin: .6rem 0 0; }

.lp-final {
    background: linear-gradient(135deg, #4338ca, #4f46e5 55%, #6366f1);
    color: #fff;
    text-align: center;
    padding: 56px 0;
}
.lp-final h2 { color: #fff; font-size: 1.7rem; }
.lp-final p { opacity: .9; }
.lp-final .btn-primary {
    background: #fff;
    color: var(--primary);
}
.lp-final .btn-primary:hover { background: var(--primary-light); }

.lp-footer {
    border-top: 1px solid var(--border);
    padding: 22px 0 10px;
    background: var(--surface);
}
.lp-footer-links { display: flex; gap: 1rem; }
.lp-footer-links a { color: var(--muted); font-weight: 600; }

.lp-legend-clip .cal-legend { max-height: 72px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .lp-bar-fill { transition: none; }
}