/* ============================================================================
 * landing.css — vetrina pubblica della piattaforma (route `/`)
 *
 * Autonomo: non dipende dal tema Otika/Stisla (app.min.css) né da gw_admin.css.
 * Carica solo bootstrap.min.css + FontAwesome (JS/SVG).
 * L'accento (--ld-accent*) è iniettato inline dal layout, risolto da
 * App\Libraries\sys\LoginAppearanceStore → coerente con la pagina di login.
 * ========================================================================== */

:root {
    --ld-ink:        #0f172a;   /* testo forte / fondo scuro   */
    --ld-ink-soft:   #1e293b;
    --ld-text:       #334155;
    --ld-muted:      #64748b;
    --ld-border:     #e2e8f0;
    --ld-surface:    #ffffff;
    --ld-surface-2:  #f8fafc;
    --ld-radius:     14px;
    --ld-shadow:     0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --ld-shadow-lg:  0 12px 40px rgba(15, 23, 42, .12);
}

body.landing {
    font-family: 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ld-text);
    background: var(--ld-surface);
    -webkit-font-smoothing: antialiased;
}

.landing h1, .landing h2, .landing h3, .landing h4 {
    color: var(--ld-ink);
    font-weight: 800;
    letter-spacing: -.02em;
}

.landing section { scroll-margin-top: 78px; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.ld-nav {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ld-border);
}
.ld-nav .navbar-brand { font-weight: 800; color: var(--ld-ink); letter-spacing: -.02em; }
.ld-nav .navbar-brand img { height: 34px; width: auto; }
.ld-nav .nav-link { color: var(--ld-muted); font-weight: 600; font-size: .93rem; }
.ld-nav .nav-link:hover { color: var(--ld-ink); }

/* ── Bottoni ──────────────────────────────────────────────────────────────── */
.ld-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 10px; padding: .62rem 1.15rem;
    font-weight: 700; font-size: .93rem; text-decoration: none;
    border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s;
}
.ld-btn:hover { transform: translateY(-1px); }
.ld-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ld-accent), var(--ld-accent-dark));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ld-accent) 35%, transparent);
}
.ld-btn-primary:hover { color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--ld-accent) 45%, transparent); }
.ld-btn-ghost { color: var(--ld-ink); border-color: var(--ld-border); background: var(--ld-surface); }
.ld-btn-ghost:hover { color: var(--ld-ink); border-color: var(--ld-muted); }
.ld-btn-light { color: var(--ld-ink); background: #fff; }
.ld-btn-light:hover { color: var(--ld-ink); }
.ld-btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ld-btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ld-hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1200px 600px at 15% -10%, var(--ld-ink-soft), var(--ld-ink) 60%);
    color: #e2e8f0;
    padding: 5.5rem 0 6rem;
}
.ld-hero::after {
    content: ''; position: absolute; inset: auto -10% -60% auto;
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ld-accent) 22%, transparent), transparent 65%);
    pointer-events: none;
}
.ld-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; }
.ld-hero .lead { color: #94a3b8; font-size: 1.08rem; max-width: 40rem; }
.ld-hero .ld-accent-text { color: var(--ld-accent); }

.ld-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ld-accent);
    background: color-mix(in srgb, var(--ld-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ld-accent) 28%, transparent);
    border-radius: 999px; padding: .3rem .8rem;
}

.ld-stat { border-left: 2px solid color-mix(in srgb, var(--ld-accent) 45%, transparent); padding-left: .9rem; }
.ld-stat strong { display: block; color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.ld-stat span { color: #94a3b8; font-size: .82rem; }

/* ── Sezioni ──────────────────────────────────────────────────────────────── */
.ld-section { padding: 4.5rem 0; }
.ld-section-alt { background: var(--ld-surface-2); border-block: 1px solid var(--ld-border); }
.ld-section-head { max-width: 44rem; margin: 0 auto 2.75rem; text-align: center; }
.ld-section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.ld-section-head p { color: var(--ld-muted); margin-bottom: 0; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ld-card {
    height: 100%;
    background: var(--ld-surface);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    padding: 1.5rem;
    box-shadow: var(--ld-shadow);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ld-card:hover { transform: translateY(-3px); box-shadow: var(--ld-shadow-lg); border-color: color-mix(in srgb, var(--ld-accent) 40%, var(--ld-border)); }
.ld-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.ld-card p  { color: var(--ld-muted); font-size: .9rem; margin-bottom: 0; }

.ld-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 11px; margin-bottom: 1rem;
    color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, var(--ld-accent), var(--ld-accent-dark));
}
.ld-icon-soft {
    background: color-mix(in srgb, var(--ld-accent) 12%, transparent);
    color: var(--ld-accent);
    border: 1px solid color-mix(in srgb, var(--ld-accent) 25%, transparent);
}

/* Modulo compatto (griglia catalogo) */
.ld-module { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem 1.15rem; }
.ld-module .ld-icon { width: 38px; height: 38px; font-size: .92rem; margin-bottom: 0; flex-shrink: 0; }
.ld-module h3 { font-size: .95rem; }
.ld-module p  { font-size: .84rem; line-height: 1.45; }

/* Verticale (progetto) */
.ld-vertical { padding: 1.75rem; }
.ld-vertical .ld-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }

.ld-chip {
    font-size: .74rem; font-weight: 700; color: var(--ld-muted);
    background: var(--ld-surface-2); border: 1px solid var(--ld-border);
    border-radius: 999px; padding: .22rem .62rem;
}
.ld-chip-soon { color: var(--ld-accent); background: color-mix(in srgb, var(--ld-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ld-accent) 25%, transparent); }

/* Piani */
.ld-plan { display: flex; flex-direction: column; }
.ld-plan .ld-plan-count { font-size: .8rem; font-weight: 700; color: var(--ld-accent); }
.ld-plan p { flex: 1; margin-bottom: 1.15rem; }

/* ── Accessi ──────────────────────────────────────────────────────────────── */
.ld-access { text-align: center; }
.ld-access .ld-icon { margin-inline: auto; }
.ld-access .form-control { border-radius: 9px; font-size: .88rem; }
.ld-access .form-select { border-radius: 9px; font-size: .88rem; }
.ld-hint { font-size: .78rem; color: var(--ld-muted); }

/* ── Pagina legale (cookie policy) ────────────────────────────────────────── */
.ld-legal-head {
    background: radial-gradient(900px 420px at 20% -30%, var(--ld-ink-soft), var(--ld-ink) 70%);
    color: #94a3b8;
    padding: 3.25rem 0 2.5rem;
}
.ld-legal-head h1 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); }

.ld-legal { max-width: 62rem; }
.ld-legal h2 {
    font-size: 1.12rem; margin: 2.25rem 0 .75rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--ld-border);
}
.ld-legal h2:first-of-type { margin-top: 0; }
.ld-legal p, .ld-legal li { font-size: .93rem; line-height: 1.65; }
.ld-legal ul { padding-left: 1.2rem; }
.ld-legal a { color: var(--ld-accent); }
.ld-legal code { background: var(--ld-surface-2); border: 1px solid var(--ld-border); border-radius: 5px; padding: .1rem .35rem; font-size: .86em; }
.ld-legal-meta { color: var(--ld-muted); font-size: .85rem; }

.ld-table-wrap { overflow-x: auto; margin: 1rem 0 .5rem; }
.ld-legal-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 34rem; }
.ld-legal-table th, .ld-legal-table td { border: 1px solid var(--ld-border); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.ld-legal-table th { background: var(--ld-surface-2); font-weight: 700; color: var(--ld-ink); }

/* Segnaposto: deve saltare all'occhio, per non pubblicare la pagina incompleta */
.ld-todo {
    background: #fef3c7; color: #92400e; font-weight: 700;
    border-radius: 4px; padding: .05rem .35rem; font-size: .88em;
}
.ld-note {
    background: var(--ld-surface-2); border-left: 3px solid var(--ld-accent);
    border-radius: 0 8px 8px 0; padding: .9rem 1.1rem; margin: 1rem 0;
    font-size: .88rem; line-height: 1.6;
}
.ld-note-warn { border-left-color: #d97706; background: #fffbeb; }

/* ── Cookie bar ───────────────────────────────────────────────────────────── */
.ld-cookiebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    padding: .9rem 1.4rem;
    background: var(--ld-ink); color: #cbd5e1;
    box-shadow: 0 -6px 28px rgba(15, 23, 42, .22);
}
/* Deve vincere sul display:flex quando la barra è nascosta/accettata */
.ld-cookiebar[hidden] { display: none; }

.ld-cookiebar-text { margin: 0; font-size: .84rem; line-height: 1.55; max-width: 78ch; }
.ld-cookiebar-text a { color: var(--ld-accent); text-decoration: underline; }
.ld-cookiebar-text a:hover { color: var(--ld-accent); }

.ld-cookiebar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.ld-cookiebar .ld-btn { padding: .5rem 1rem; font-size: .85rem; }
/* Il ghost di default è chiaro su bianco: qui il fondo è scuro */
.ld-cookiebar .ld-btn-ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .32); }
.ld-cookiebar .ld-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }

/* Evita che la barra copra la coda del footer mentre è visibile */
body.has-cookiebar .ld-footer { padding-bottom: 6.5rem; }

@media (max-width: 575.98px) {
    .ld-cookiebar { padding: .85rem 1rem; }
    .ld-cookiebar-actions { width: 100%; }
    .ld-cookiebar-actions .ld-btn { flex: 1; justify-content: center; }
    body.has-cookiebar .ld-footer { padding-bottom: 10rem; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ld-footer { background: var(--ld-ink); color: #94a3b8; padding: 3rem 0 1.75rem; }
.ld-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .85rem; }
.ld-footer a { color: #94a3b8; text-decoration: none; font-size: .88rem; }
.ld-footer a:hover { color: #fff; }
.ld-footer .ld-copy { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2.25rem; padding-top: 1.25rem; font-size: .82rem; }
/* Link legali (cookie policy, ecc.): leggibili ma non invadenti */
.ld-legal-links a { font-size: .82rem; text-decoration: underline; text-underline-offset: 2px; }
.ld-legal-links a:hover { color: #fff; }

@media (max-width: 767.98px) {
    .ld-hero { padding: 3.5rem 0 4rem; text-align: center; }
    .ld-hero .lead { margin-inline: auto; }
    .ld-section { padding: 3.25rem 0; }
}