/*
 * TADBIR public landing page — marketing-only styles, loaded on `/` alone
 * (never on the authenticated app or the /bo panel) so this never bloats
 * theme.css. Reuses theme.css's existing color tokens (--accent,
 * --sidebar-*, --card-*, --text-*) for visual consistency rather than a
 * second palette.
 */

.landing-body {
    background: var(--body-bg);
    color: var(--text-body);
    font-family: 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', sans-serif;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body h5 {
    font-family: 'Plus Jakarta Sans', 'Cairo', 'Segoe UI', sans-serif;
    color: var(--text-heading);
}

/* ---------------------------------------------------------------- */
/* Header                                                             */
/* ---------------------------------------------------------------- */

.landing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Blanc, et non la teinte grise du fond de page : la barre doit se
       détacher du héros qui défile dessous, pas s'y fondre. La légère
       translucidité est conservée pour que le flou garde un effet. */
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
}

.landing-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-block: .85rem;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-heading);
    flex-shrink: 0;
}

.landing-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--sidebar-active-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 6px 16px -4px var(--sidebar-glow);
}

/* Uploaded via Bo\Cms\Index — a full icon+wordmark image replacing
   .landing-brand-icon + the "TADBIR" text span entirely, sized to the same
   height those two together occupied so the header/footer never reflow. */
.landing-brand-logo {
    /* Rendered taller than .landing-brand-icon (38px) so an uploaded logo
       reads clearly, but the negative margin cancels the extra height back
       out of the flex line's cross-size calculation (which uses the
       margin/outer box, not the border box) — .landing-header-inner's
       height stays exactly what it was with the default icon+text, the
       logo just visually overflows a few px above/below its own box. */
    height: 50px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    margin-block: -6px;
}

.landing-nav {
    display: flex;
    gap: 1.5rem;
    flex: 1 1 auto;
}

.landing-nav a {
    color: var(--text-body);
    font-weight: 600;
    font-size: .92rem;
    transition: color .15s ease;
}

.landing-nav a:hover {
    color: var(--accent);
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-inline-start: auto;
}

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */

.landing-hero {
    padding-block: 5rem 4rem;
    overflow: hidden;
    position: relative;
}

.landing-hero .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .landing-hero .container {
        grid-template-columns: 1.05fr .95fr;
    }
}

.landing-hero-inner {
    max-width: 620px;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .85rem;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.landing-hero h1 {
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 1.1rem;
}

.landing-hero-lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.landing-hero-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0;
}

.landing-hero-note i {
    color: var(--success);
}

.landing-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
}

.landing-hero-badges span {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.landing-hero-badges i {
    color: var(--success);
}

/* Abstract, decorative "product preview" — deliberately not a claimed
   screenshot, just shapes suggesting a dashboard (KPI tiles + a chart). */
.landing-preview-card,
.landing-device-laptop-screen {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 30px 70px -20px rgba(30, 21, 82, .25);
    border: 1px solid var(--card-border);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(3deg);
    transition: transform .3s ease;
}

.landing-preview-card:hover,
.landing-devices:hover .landing-device-laptop-screen {
    transform: rotateY(-2deg) rotateX(1deg);
}

/* Two-device mockup (laptop + phone) replacing the single abstract card on
   larger hero layouts — same decorative dashboard shapes, just staged as
   real device frames instead of a floating browser window. */
.landing-devices {
    perspective: 1400px;
    position: relative;
    padding-inline-end: 2rem;
    padding-bottom: 2.5rem;
}

.landing-device-laptop-base {
    height: 14px;
    margin-inline: 6%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, var(--card-border), var(--sidebar-bg-start));
    box-shadow: 0 10px 18px -8px rgba(30, 21, 82, .35);
}

.landing-device-phone {
    position: absolute;
    inset-inline-end: -1rem;
    bottom: -1.5rem;
    width: 34%;
    max-width: 170px;
    border-radius: 22px;
    background: var(--sidebar-bg-start);
    padding: 8px;
    box-shadow: 0 24px 50px -18px rgba(30, 21, 82, .4);
    border: 1px solid var(--card-border);
}

.landing-device-phone-screen {
    background: var(--card-bg);
    border-radius: 15px;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    aspect-ratio: 9 / 18;
}

.lp-kpi-phone {
    flex: 0 0 auto;
    height: 34%;
    background: var(--accent-light);
}

.lp-chart-phone {
    flex: 1 1 auto;
}

.landing-preview-topbar {
    display: flex;
    gap: .4rem;
    padding: .7rem .9rem;
    background: var(--body-bg);
    border-bottom: 1px solid var(--card-border);
}

.landing-preview-topbar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--card-border);
}

.landing-preview-topbar span:first-child { background: var(--danger); }
.landing-preview-topbar span:nth-child(2) { background: var(--warning); }
.landing-preview-topbar span:nth-child(3) { background: var(--success); }

.landing-preview-body {
    display: flex;
    min-height: 260px;
}

.landing-preview-sidebar {
    width: 56px;
    background: linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding-block: 1.1rem;
}

.lp-dot {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .12);
}

.lp-dot-active {
    background: var(--sidebar-active-bg);
    box-shadow: 0 4px 12px -3px var(--sidebar-glow);
}

.landing-preview-main {
    flex: 1 1 auto;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lp-kpi-row {
    display: flex;
    gap: .6rem;
}

.lp-kpi {
    flex: 1 1 0;
    height: 54px;
    border-radius: 10px;
    background: var(--body-bg);
    border: 1px solid var(--card-border);
}

.lp-kpi:nth-child(1) { background: var(--success-light); }
.lp-kpi:nth-child(2) { background: var(--info-light); }
.lp-kpi:nth-child(3) { background: var(--accent-light); }

.lp-chart {
    flex: 1 1 auto;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--accent-light), transparent 80%);
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
}

.lp-chart::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 55%;
    background:
        linear-gradient(90deg, transparent 0 15%, var(--accent) 15% 22%, transparent 22%),
        linear-gradient(90deg, transparent 0 32%, var(--accent) 32% 39%, transparent 39%),
        linear-gradient(90deg, transparent 0 49%, var(--accent) 49% 56%, transparent 56%),
        linear-gradient(90deg, transparent 0 66%, var(--accent) 66% 73%, transparent 73%),
        linear-gradient(90deg, transparent 0 83%, var(--accent) 83% 90%, transparent 90%);
    opacity: .55;
    border-radius: 6px 6px 0 0;
}

/* ---------------------------------------------------------------- */
/* Trust strip — 6 short selling points directly under the hero      */
/* ---------------------------------------------------------------- */

.landing-strip {
    padding-block: 2.75rem;
    border-block: 1px solid var(--card-border);
    background: var(--card-bg);
}

.landing-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .landing-strip-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .landing-strip-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.landing-strip-icon {
    width: 44px;
    height: 44px;
    margin-inline: auto;
    margin-bottom: .6rem;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.landing-strip-item h6 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: .25rem;
}

.landing-strip-item p {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0;
}

/* ---------------------------------------------------------------- */
/* Sections                                                           */
/* ---------------------------------------------------------------- */

.landing-section {
    padding-block: 4.5rem;
}

.landing-section-alt {
    background: var(--card-bg);
    border-block: 1px solid var(--card-border);
}

.landing-section-head {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 2.75rem;
}

.landing-section-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    margin-bottom: .6rem;
}

.landing-section-head p {
    color: var(--text-muted);
    margin: 0;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.landing-feature-card,
.landing-value-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.landing-feature-card:hover,
.landing-value-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(30, 21, 82, .18);
}

.landing-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-light);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* A distinct pastel icon color per module card, cycling every 5 —
   purely presentational (module identity/pricing stays real DB data, see
   home.blade.php's own comment), just so the grid doesn't read as one flat
   block of identical purple icons. */
.landing-feature-card-1 .landing-feature-icon { background: var(--accent-light); color: var(--accent-dark); }
.landing-feature-card-2 .landing-feature-icon { background: var(--info-light); color: var(--info); }
.landing-feature-card-3 .landing-feature-icon { background: var(--success-light); color: var(--success); }
.landing-feature-card-4 .landing-feature-icon { background: #fce4ec; color: #c2185b; }
.landing-feature-card-5 .landing-feature-icon { background: #fff3e0; color: #ef6c00; }

.landing-feature-card h5,
.landing-value-card h5 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.landing-feature-card p,
.landing-value-card p {
    color: var(--text-muted);
    font-size: .88rem;
    margin: 0;
}

/* ---------------------------------------------------------------- */
/* Pricing                                                            */
/* ---------------------------------------------------------------- */

.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.landing-pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    padding: 1.5rem;
    text-align: center;
}

.landing-pricing-card h5 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.landing-pricing-amount {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent-dark);
    line-height: 1;
    margin-bottom: .6rem;
}

.landing-pricing-amount span {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .3rem;
}

.landing-pricing-addons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.landing-pricing-addon {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--text-muted);
}

.landing-pricing-addon i {
    color: var(--accent);
}

/* ---------------------------------------------------------------- */
/* Final CTA + footer                                                 */
/* ---------------------------------------------------------------- */

.landing-cta {
    padding-block: 4.5rem;
    background: linear-gradient(160deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    color: #fff;
    text-align: center;
}

.landing-cta h2 {
    color: #fff;
    font-weight: 800;
    margin-bottom: .5rem;
}

.landing-cta p {
    color: var(--sidebar-text);
    margin-bottom: 1.5rem;
}

.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.landing-cta-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, .5);
}

.landing-footer {
    padding-block: 2.5rem;
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
}

.landing-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--card-border);
}

.landing-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
}

/* ---------------------------------------------------------------------
   Parcours en 3 étapes, essai mis en avant dans les tarifs, et FAQ.
   Ajoutés en même temps que la suppression de la bande de six cartes,
   qui répétait la section « Pourquoi » presque mot pour mot.
   --------------------------------------------------------------------- */

.landing-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    counter-reset: landing-step;
}

@media (min-width: 768px) {
    .landing-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.landing-step {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: var(--card-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.landing-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(30, 21, 82, .18);
}

/* Numéro posé à cheval sur le bord supérieur : il ordonne la lecture
   sans consommer une ligne de texte dans la carte. */
.landing-step-number {
    position: absolute;
    top: -18px;
    inset-inline-start: 1.5rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent, #7c3aed);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 8px 18px -6px rgba(124, 58, 237, .55);
}

.landing-step h5 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.landing-step p {
    color: var(--text-muted, #6b7280);
    font-size: .925rem;
    margin-bottom: 0;
}

.landing-pricing-trial {
    margin-top: 2.5rem;
    padding: 2rem;
    border-radius: var(--card-radius-sm);
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(12, 132, 151, .08));
    border: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .landing-pricing-trial {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.landing-pricing-trial h5 {
    margin-bottom: .35rem;
}

.landing-pricing-trial p {
    margin-bottom: 0;
    color: var(--text-muted, #6b7280);
    font-size: .925rem;
}

.landing-faq {
    max-width: 820px;
    margin-inline: auto;
}

.landing-faq .accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm) !important;
    margin-bottom: .75rem;
    overflow: hidden;
}

.landing-faq .accordion-button {
    font-weight: 600;
    background: transparent;
    box-shadow: none;
}

.landing-faq .accordion-button:not(.collapsed) {
    color: var(--accent, #7c3aed);
    background: transparent;
}

.landing-faq .accordion-body {
    color: var(--text-muted, #6b7280);
    font-size: .95rem;
    padding-top: 0;
}

/* ---------------------------------------------------------------------
   Capture de l'espace client dans le héros.

   Aucun cadre ajouté ici : l'image téléversée porte déjà le sien, et
   l'envelopper dans la maquette portable/téléphone produisait un cadre
   dans un cadre. La page ne fournit que l'espace.
   --------------------------------------------------------------------- */

.landing-hero-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Indispensable : une colonne `fr` a min-width:auto, donc elle refuse
       de descendre sous la taille intrinsèque de son contenu. Sans ceci,
       une capture large devient le plancher de la colonne, pousse la mise
       en page et se fait couper par l'overflow:hidden du héros. */
    min-width: 0;
}

.landing-hero-shot img {
    display: block;
    /* Ni bordure, ni rayon, ni ombre : tout cela appartient à l'image. */
    width: 100%;
    max-width: 100%;
    height: auto;
}