/*
 * Public homepage final visual layer.
 * Scoped to .landing-page so admin and authenticated user screens are untouched.
 */
.landing-page {
    --lp-ink: #0f172a;
    --lp-copy: #475569;
    --lp-muted: #64748b;
    --lp-line: #e2e8f0;
    --lp-surface: #ffffff;
    --lp-surface-soft: #f8fafc;
    --lp-blue: #2563eb;
    --lp-purple: #7c3aed;
    background: #f8fafc !important;
    color: var(--lp-ink) !important;
    overflow-x: hidden;
}

.landing-page .landing-bg { opacity: .42; z-index: 0; }
.landing-page .landing-bg .orb { filter: blur(92px); opacity: .28; }
.landing-page .landing-bg .orb-1 { background: rgba(37, 99, 235, .16); }
.landing-page .landing-bg .orb-2 { background: rgba(124, 58, 237, .12); }
.landing-page .landing-bg .orb-3 { background: rgba(16, 185, 129, .11); }

/* Header */
.landing-page .nav-premium {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(226, 232, 240, .82);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.landing-page .nav-premium.scrolled {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: #dbe3ef;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}
.landing-page .nav-logo { color: var(--lp-ink); }
.landing-page .nav-logo i { color: var(--lp-blue); -webkit-text-fill-color: var(--lp-blue); }
.landing-page .nav-links a { color: #475569; }
.landing-page .nav-links a:hover { color: var(--lp-blue); background: #eff6ff; }
.landing-page .nav-btn-ghost {
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.landing-page .nav-btn-ghost:hover { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }
.landing-page .nav-hamburger span { background: #334155; }
.landing-page .nav-btn .text-primary { color: var(--lp-blue) !important; }

/* Hero */
.landing-page .hero-premium {
    background: linear-gradient(135deg, #fff7ed 0%, #eff6ff 52%, #f5f3ff 100%);
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
}
.landing-page .hero-premium::before {
    background: radial-gradient(circle, rgba(59, 130, 246, .13) 0%, rgba(255, 255, 255, 0) 68%);
}
.landing-page .hero-badge,
.landing-page .section-header .section-tag {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}
.landing-page .hero-inner h1 { color: var(--lp-ink); text-shadow: 0 2px 18px rgba(255, 255, 255, .8); }
.landing-page .hero-inner p { color: #475569; }
.landing-page .hero-cta .cta-ghost {
    color: #1e3a8a;
    background: rgba(255, 255, 255, .76);
    border-color: #bfdbfe;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .08);
}
.landing-page .hero-cta .cta-ghost:hover { background: #fff; border-color: #60a5fa; }
.landing-page .hero-metrics {
    padding: 14px 20px;
    border: 1px solid rgba(203, 213, 225, .86);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}
.landing-page .hero-metric .num { color: var(--lp-ink); }
.landing-page .hero-metric .lbl { color: #64748b; }
.landing-page .hero-metric + .hero-metric::before { background: #cbd5e1; }

/* Sections and headings */
.landing-page .lp-section { background: #fff; }
.landing-page .lp-section-alt { background: #f8fafc; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.landing-page .section-header h2 { color: var(--lp-ink); }
.landing-page .section-header p { color: var(--lp-copy); }

/* Features and steps */
.landing-page .feature-card,
.landing-page .step-card,
.landing-page .signup-cta,
.landing-page .resto-card {
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--lp-line);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}
.landing-page .feature-card:hover,
.landing-page .resto-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 18px 36px rgba(37, 99, 235, .13);
}
.landing-page .feature-card h4,
.landing-page .step-card h4,
.landing-page .signup-cta h4,
.landing-page .resto-card-body h5 { color: var(--lp-ink); }
.landing-page .feature-card p,
.landing-page .step-card p,
.landing-page .signup-cta p,
.landing-page .resto-desc { color: var(--lp-copy); }
.landing-page .step-card p { color: #526277; }
.landing-page .steps-row::before { background: linear-gradient(90deg, #bfdbfe, #ddd6fe, #a7f3d0); }
.landing-page .resto-card-foot { color: #526277; border-top-color: #eef2f7; background: #fcfdff; }
.landing-page .resto-card-foot i { color: #2563eb; }
.landing-page .resto-meta { color: #64748b; }
.landing-page .resto-meta .star { color: #d97706; }
.landing-page .resto-status { box-shadow: 0 3px 10px rgba(15, 23, 42, .16); }

/* CTA and footer */
.landing-page .cta-section { background: #f8fafc; }
.landing-page .cta-box {
    background: linear-gradient(135deg, #dbeafe, #ede9fe 55%, #fce7f3);
    border-color: #bfdbfe;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .1);
}
.landing-page .cta-box h2 { color: var(--lp-ink); }
.landing-page .cta-box p { color: #475569; }
.landing-page .footer-premium {
    background: #fff;
    border-top: 1px solid #dbe3ef;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .04);
}
.landing-page .footer-col p,
.landing-page .footer-col ul a,
.landing-page .footer-col ul li span { color: #526277; }
.landing-page .footer-col h6 { color: #334155; }
.landing-page .footer-col ul a:hover { color: #1d4ed8; }
.landing-page .footer-bottom { border-top-color: #e2e8f0; }
.landing-page .footer-bottom p { color: #64748b; }
.landing-page .footer-socials a { color: #475569; background: #f8fafc; border-color: #dbe3ef; }
.landing-page .footer-socials a:hover { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }

/* Mobile navigation remains a readable solid sheet. */
.landing-page .mobile-nav-overlay {
    background: rgba(248, 250, 252, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.landing-page .mobile-nav-content {
    min-height: 100vh;
    min-height: 100dvh;
}
.landing-page .mobile-nav-header { border-bottom-color: #e2e8f0; }
.landing-page .mobile-nav-logo,
.landing-page .mobile-nav-logo span { color: var(--lp-ink); }
.landing-page .mobile-nav-logo i { color: var(--lp-blue); }
.landing-page .mobile-nav-close { color: #334155; background: #fff; border-color: #cbd5e1; }
.landing-page .mobile-user-card,
.landing-page .mobile-welcome-card,
.landing-page .mobile-menu-item { background: #fff; border-color: #e2e8f0; box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.landing-page .mobile-user-name,
.landing-page .mobile-menu-item .item-title,
.landing-page .mobile-welcome-card h6 { color: var(--lp-ink); }
.landing-page .mobile-user-role,
.landing-page .mobile-menu-item .item-sub,
.landing-page .mobile-welcome-card p { color: #64748b; }
.landing-page .mobile-nav-section-title { color: #64748b; }
.landing-page .mobile-menu-item .arrow { color: #64748b; }
.landing-page .mobile-menu-item:hover,
.landing-page .mobile-menu-item.active { background: #eff6ff; border-color: #bfdbfe; }
.landing-page .mobile-nav-footer { border-top-color: #e2e8f0; }
.landing-page .mobile-brand-copy { color: #64748b; }
.landing-page .mobile-user-btn,
.landing-page .welcome-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .2);
}
.landing-page .welcome-btn-ghost {
    color: #334155;
    background: #f8fafc;
    border-color: #cbd5e1;
}
.landing-page .welcome-btn-ghost:hover { background: #eff6ff; border-color: #93c5fd; }
.landing-page .mobile-wa-btn { color: #fff; box-shadow: 0 6px 16px rgba(16, 185, 129, .2); }
.landing-page .mobile-logout-btn { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.landing-page .mobile-logout-btn:hover { background: #fee2e2; }
.landing-page .mobile-user-btn:focus-visible,
.landing-page .welcome-btn:focus-visible,
.landing-page .mobile-wa-btn:focus-visible,
.landing-page .mobile-logout-btn:focus-visible,
.landing-page .mobile-menu-item:focus-visible,
.landing-page .mobile-nav-close:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

/* Fluid breakpoints: no crushed two-column cards on narrow screens. */
.landing-page .lp-container,
.landing-page .footer-grid { width: 100%; }
.landing-page .resto-card,
.landing-page .feature-card,
.landing-page .step-card,
.landing-page .cta-box { min-width: 0; }

@media (max-width: 700px) {
    .landing-page .nav-inner { padding-left: 16px; padding-right: 16px; }
    .landing-page .nav-actions { gap: 6px; }
    .landing-page .nav-btn { padding: 8px 12px; }
    .landing-page .hero-premium { padding-top: 106px; }
    .landing-page .lp-section { padding-top: 64px; padding-bottom: 64px; }
    .landing-page .resto-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .landing-page .resto-card-img { height: clamp(150px, 42vw, 220px); }
    .landing-page .resto-card-body { padding: 16px; }
    .landing-page .resto-card-body h5 { font-size: 1rem; }
    .landing-page .resto-card-foot { padding: 11px 16px; }
    .landing-page .features-grid,
    .landing-page .steps-row { grid-template-columns: 1fr; }
    .landing-page .feature-card { padding: 22px 20px; }
    .landing-page .step-card { padding: 8px 8px 4px; }
    .landing-page .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .landing-page .footer-bottom { align-items: center; }
}

@media (max-width: 420px) {
    .landing-page .nav-logo { font-size: 1.05rem; gap: 6px; }
    .landing-page .nav-logo img { max-height: 30px !important; }
    .landing-page .hero-premium { padding-left: 14px; padding-right: 14px; }
    .landing-page .hero-inner h1 { font-size: clamp(1.85rem, 10vw, 2.25rem); }
    .landing-page .hero-inner p { font-size: .9rem; }
    .landing-page .hero-metrics { gap: 3px; padding-left: 8px; padding-right: 8px; }
    .landing-page .hero-metric .num { font-size: 1.1rem; }
    .landing-page .hero-metric .lbl { font-size: .68rem; }
    .landing-page .section-header { margin-bottom: 34px; }
    .landing-page .section-header h2 { font-size: 1.65rem; }
    .landing-page .cta-box { padding: 34px 18px; border-radius: 18px; }
    .landing-page .footer-premium { padding-left: 18px; padding-right: 18px; }
    .landing-page .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page *,
    .landing-page *::before,
    .landing-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}