* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* CONSENT BAR */
.cookie-wrap {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99999;
    display: flex;
    justify-content: center;
}

.cookie-card {
    width: min(920px,100%);
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
}

.cookie-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.cookie-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: var(--space-4);
}

.cookie-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cookie-btn {
    border: 0;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.cookie-btn-primary {
    background: var(--color-brand-gradient);
    color: var(--color-text-on-brand);
}

    .cookie-btn-primary:hover {
        transform: translateY(-1px);
    }

.cookie-btn-secondary {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-border);
}

.cookie-custom {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.cookie-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.cookie-links {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.cookie-link {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.cookie-sep {
    margin: 0 var(--space-2);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    background: rgba(11, 14, 20, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--color-surface-border);
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-8);
    flex-wrap: nowrap;
}

.logo {
    display: flex;
    align-items: center;
    /* Without min-width:0 the wordmark keeps its intrinsic width and pushes the
       nav actions past the right edge of the fixed header on narrow screens. */
    min-width: 0;
}

    .logo a {
        display: flex;
        align-items: center;
        min-width: 0;
        color: inherit;
        text-decoration: none;
    }

/* Sized by width, not height: the SVG has a viewBox (640x140) and no intrinsic
   dimensions, so height:auto lets it keep its ratio while shrinking with the
   header. max-width is the cap - 288px is the old 63px height. */
.logo-img {
    height: auto;
    width: 100%;
    max-width: 288px;
    display: block;
}

.nav-menu {
    display: flex;
    gap: var(--space-8);
    list-style: none;
    flex-wrap: nowrap;
}

    .nav-menu li {
        white-space: nowrap;
    }

    .nav-menu a {
        color: var(--color-text-primary);
        text-decoration: none;
        font-weight: 500;
        white-space: nowrap;
        transition: color var(--duration-base) var(--ease-standard);
    }

        .nav-menu a:hover {
            color: var(--color-brand-300);
        }

@media (max-width: 1040px) {
    .nav-menu {
        display: none;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* Burger + slide-in drawer (mobile/tablet nav) */
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-surface-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard);
}

    .nav-burger:hover {
        background: var(--color-surface-hover);
    }

    .nav-burger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--color-brand-400);
    }

.nav-burger-icon {
    width: 22px;
    height: 22px;
}

.nav-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 14, 20, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: 1100;
    transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base) var(--ease-standard);
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    overflow-y: auto;
    background: var(--color-bg);
    border-left: 1px solid var(--color-surface-border);
    transform: translateX(100%);
    visibility: hidden;
    z-index: 1101;
    transition: transform var(--duration-base) var(--ease-standard), visibility var(--duration-base) var(--ease-standard);
}

/* Drawer state lives on <body> so the scroll lock and both panels stay in sync.
   Scoped to the breakpoint on purpose: if the class ever survives a resize past
   1040px (the matchMedia guard in main.js depends on an event that is not always
   delivered), the open state - scroll lock included - simply stops applying. */
@media (max-width: 1040px) {
    body.nav-drawer-open .nav-drawer-overlay {
        opacity: 1;
        visibility: visible;
    }

    body.nav-drawer-open .nav-drawer {
        transform: translateX(0);
        visibility: visible;
    }

    body.nav-drawer-open {
        overflow: hidden;
    }

    /* The consent bar is fixed to the bottom at z-index 99999 and would sit on
       top of the drawer's CTAs. Step it aside; it returns when the menu closes.
       visibility, not display: cookie-consent.js owns an inline display on this
       element, so a display rule here would need !important to win and would
       then fight that script. */
    body.nav-drawer-open .cookie-wrap {
        visibility: hidden;
    }
}

.nav-drawer-header {
    display: flex;
    justify-content: flex-end;
}

.nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-standard);
}

    .nav-drawer-close:hover {
        color: var(--color-text-primary);
    }

    .nav-drawer-close:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--color-brand-400);
    }

.nav-drawer-close-icon {
    width: 22px;
    height: 22px;
}

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    list-style: none;
}

    .nav-drawer-links a {
        display: block;
        padding: var(--space-4) 0;
        color: var(--color-text-primary);
        text-decoration: none;
        font-weight: 500;
        font-size: var(--text-lg);
        border-bottom: 1px solid var(--color-surface-border);
        transition: color var(--duration-base) var(--ease-standard);
    }

        .nav-drawer-links a:hover {
            color: var(--color-brand-300);
        }

.nav-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

    /* Full-width CTAs: no truncation whatever the language */
    .nav-drawer-actions .btnheader {
        display: block;
        width: 100%;
        padding: var(--space-4);
    }

.nav-drawer-language {
    margin-top: auto;
}

    .nav-drawer-language .language-select {
        width: 100%;
    }

/* Below 1040px the links, the CTAs and the language picker all move into the
   drawer, so the header is just the logo + the burger and the logo can stay big. */
@media (max-width: 1040px) {
    .nav-actions {
        display: none;
    }

    .nav-burger {
        display: flex;
    }

    .logo-img {
        max-width: 240px;
    }
}

.language-select {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-surface-border-strong);
    color: var(--color-text-primary);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.language-select option {
    color: #000000;
    background-color: #ffffff;
}

.btn {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--duration-base) var(--ease-standard);
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.btn-primary {
    background: var(--color-brand-gradient);
    color: var(--color-text-on-brand);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-brand);
    }

.btn-ghost {
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-border-strong);
    background: transparent;
}

    .btn-ghost:hover {
        background: var(--color-surface-hover);
    }

.btnheader {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--duration-base) var(--ease-standard);
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.btn-primary-header {
    background: var(--color-brand-gradient);
    color: var(--color-text-on-brand);
}

    .btn-primary-header:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-brand);
    }

.btn-ghost-header {
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-border-strong);
    background: transparent;
}

    .btn-ghost-header:hover {
        background: var(--color-surface-hover);
    }


/* Hero Section */
.hero {
    padding: var(--space-20) var(--space-8) var(--space-16);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

    .hero h1 {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-6);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero p {
        font-size: var(--text-xl);
        margin-bottom: var(--space-8);
        color: var(--color-text-secondary);
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

.hero-visual {
    margin: var(--space-12) 0;
    position: relative;
}

.verdict-card {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid rgba(47, 111, 237, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-brand);
    text-align: left;
}

.verdict-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.verdict-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.verdict-card-basket {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.verdict-positions {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

    .verdict-positions li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-surface-border);
        font-size: var(--text-sm);
    }

.verdict-ticker {
    font-weight: 600;
    color: var(--color-text-primary);
    width: 3.5rem;
}

.verdict-side {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.verdict-side-buy {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.verdict-side-sell {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.verdict-qty {
    margin-left: auto;
    color: var(--color-text-secondary);
}

.verdict-result {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.verdict-badge {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-on-brand);
    background: var(--color-success);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.verdict-meta {
    flex: 1;
}

.verdict-prob {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.verdict-risk-bar {
    height: 6px;
    background: var(--color-surface-hover);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.verdict-risk-fill {
    width: 28%;
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-full);
}

.verdict-risk-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Scoped to .hero-visual so it outranks `.hero p { font-size: var(--text-xl) }`. */
.hero-visual .verdict-prob-note {
    max-width: 580px;
    margin: var(--space-3) auto 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
}

.verdict-card-basket,
.verdict-positions,
.verdict-result {
    transition: opacity 250ms var(--ease-standard);
}

.verdict-swapping .verdict-card-basket,
.verdict-swapping .verdict-positions,
.verdict-swapping .verdict-result {
    opacity: 0;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* How It Works Section */
.how-it-works {
    padding: var(--space-16) var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: var(--text-4xl);
    font-weight: 700;
    margin-bottom: var(--space-12);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

@media (max-width: 900px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

.step {
    background: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-surface-border);
    text-align: center;
    transition: transform var(--duration-base) var(--ease-standard);
}

    .step:hover {
        transform: translateY(-5px);
    }

.step-number {
    width: 50px;
    height: 50px;
    background: var(--color-brand-gradient);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-text-on-brand);
}

.step h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

/* Blog Section */
.blog-section {
    padding: var(--space-16) var(--space-8);
    background: var(--color-bg-elevated);
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-16);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.blog-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-surface-border);
    transition: transform var(--duration-base) var(--ease-standard);
    position: relative;
    cursor: pointer;
}

    .blog-card:hover {
        transform: translateY(-5px);
    }

/* The whole card is one link: the "Read more" anchor stretches an invisible
   overlay over the card, so the image, the title and the excerpt all open the
   article. Keep the card free of other interactive elements or the overlay
   will swallow their clicks. */
.blog-read-more {
    color: var(--color-brand-300);
    text-decoration: none;
}

    .blog-read-more::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .blog-read-more:focus-visible {
        outline: none;
    }

        /* Focus ring on the overlay, so keyboard focus outlines the whole card. */
        .blog-read-more:focus-visible::after {
            outline: 2px solid var(--color-brand-300);
            outline-offset: -2px;
            border-radius: var(--radius-lg);
        }

.blog-card:hover .blog-read-more {
    color: var(--color-brand-400);
}

.blog-image {
    height: 200px;
    background: var(--color-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
}

.blog-image svg {
    width: 44px;
    height: 44px;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: var(--space-6);
}

.blog-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.blog-excerpt {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.main-content {
    padding-top: var(--header-height);
    min-height: 100vh;
}

.contact-hero {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    max-width: 800px;
    margin: 0 auto;
}

    .contact-hero h1 {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-4);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .contact-hero p {
        font-size: var(--text-xl);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-8);
    }


.contact_success_content {
    text-align: center;
    padding: var(--space-8);
}

.contact_success_text {
    font-size: var(--text-lg);
    color: var(--color-success);
    margin: var(--space-4) 0;
    line-height: 1.6;
}

.contact_success_subtext {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

/* Blog page */
.blog-hero {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    max-width: 800px;
    margin: 0 auto;
}

    .blog-hero h1 {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-4);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .blog-hero p {
        font-size: var(--text-xl);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-8);
    }

/* Filter Tabs */
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
}

.filter-tab {
    padding: var(--space-3) var(--space-6);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-surface-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-standard);
    font-weight: 500;
}

    .filter-tab.active, .filter-tab:hover {
        background: var(--color-brand-gradient);
        color: var(--color-text-on-brand);
        border-color: transparent;
    }

/* Featured Article */
.featured-article {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    padding: 0;
    margin-bottom: var(--space-16);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-standard);
}

    .featured-article:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
    }

.featured-image {
    height: 300px;
    background: var(--color-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-text-on-brand);
    overflow: hidden;
}

    .featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.featured-content {
    padding: var(--space-8);
}

.featured-meta {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.featured-category {
    background: rgba(47, 111, 237, 0.18);
    color: var(--color-brand-300);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.featured-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.featured-excerpt {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.7;
}

.featured-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text-on-brand);
}

.author-info {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.author-name {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Article Grid */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.article-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-standard);
    cursor: pointer;
}

    .article-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
    }

.article-image {
    height: 200px;
    background: var(--color-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--color-text-on-brand);
    overflow: hidden;
    flex-shrink: 0;
}

    /* Sans ceci l'image garde sa hauteur naturelle, déborde la boîte de 200px
       et se peint derrière le texte de la carte (dont le fond est transparent). */
    .article-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* .article-content sert aussi de corps d'article (BlogContent / LegalContent) :
   on annule ici la typo et les marges prévues pour l'article long. */
.article-card .article-content {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
}

    .article-card .article-content p {
        margin-bottom: var(--space-4);
    }

.article-content {
    padding: var(--space-6);
    font-size: var(--text-lg);
    line-height: 1.8;
    margin: var(--space-10) 0;
}

    .article-content h2 {
        margin-top: var(--space-10);
        margin-bottom: var(--space-5);
        font-size: var(--text-3xl);
        color: var(--color-text-primary);
    }

    .article-content h3 {
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
        font-size: var(--text-xl);
        color: var(--color-text-primary);
    }

    .article-content p {
        margin-bottom: var(--space-5);
        color: var(--color-text-secondary);
    }

    .article-content ul, .article-content ol {
        margin: var(--space-5) 0;
        padding-left: var(--space-8);
        color: var(--color-text-secondary);
    }

    .article-content li {
        margin-bottom: var(--space-2);
    }

    .article-content blockquote {
        margin: var(--space-8) 0;
        padding: var(--space-5) var(--space-8);
        background: var(--color-surface);
        border-left: 4px solid var(--color-brand-500);
        font-style: italic;
        color: var(--color-text-secondary);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.article-category {
    background: rgba(47, 111, 237, 0.18);
    color: var(--color-brand-300);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
}

.article-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
}

.article-excerpt {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.read-time {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.read-more {
    color: var(--color-brand-300);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
}

    .read-more:hover {
        color: var(--color-brand-400);
    }

/* Newsletter Signup */
.newsletter-section {
    background: linear-gradient(135deg, rgba(47, 111, 237, 0.1), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(47, 111, 237, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    margin: var(--space-16) 0;
    text-align: center;
}

.newsletter-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--color-brand-300);
}

.newsletter-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    font-size: var(--text-lg);
}

.newsletter-form {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    gap: var(--space-4);
}

.newsletter-input {
    flex: 1;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

    .newsletter-input::placeholder {
        color: var(--color-text-muted);
    }

    .newsletter-input:disabled {
        background-color: var(--color-surface-hover);
        opacity: 0.6;
    }

/* Contact Grid */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-16);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    margin-bottom: var(--space-16);
}

/* Contact Form */
.contact-form {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}

.form-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-8);
    color: var(--color-brand-300);
}

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-input, .form-textarea {
    width: 100%;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-family: inherit;
    transition: all var(--duration-base) var(--ease-standard);
}

    .form-input:focus, .form-textarea:focus {
        outline: none;
        border-color: var(--color-brand-400);
        background: var(--color-surface-hover);
        box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
    }

    .form-input::placeholder, .form-textarea::placeholder {
        color: var(--color-text-muted);
    }

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    margin-top: var(--space-4);
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: all var(--duration-base) var(--ease-standard);
}

    .info-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
    }

.info-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
    display: block;
}

.info-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--color-brand-300);
}

.info-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.info-detail {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ABOUT US */
.about-hero {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    max-width: 800px;
    margin: 0 auto;
}

    .about-hero h1 {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-4);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .about-hero p {
        font-size: var(--text-xl);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-8);
    }

.about-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-20);
}

.about-story {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.about-block h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-brand-300);
    margin-bottom: var(--space-4);
}

.about-block p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

    .about-block p strong {
        color: var(--color-text-primary);
    }

.about-values {
    margin-top: var(--space-16);
}

.about-values-title {
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-8);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
}

.about-cta {
    text-align: center;
    margin-top: var(--space-16);
    padding: var(--space-12) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
}

    .about-cta h2 {
        font-size: var(--text-3xl);
        font-weight: 700;
        margin-bottom: var(--space-3);
    }

    .about-cta p {
        color: var(--color-text-secondary);
        font-size: var(--text-lg);
        margin-bottom: var(--space-6);
    }

@media (max-width: 768px) {
    .about-hero h1 {
        font-size: var(--text-4xl);
    }
}

/* PRICING */
.btn-pricing {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--duration-base) var(--ease-standard);
    border: none;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.btn-primary-pricing {
    background: var(--color-brand-gradient);
    color: var(--color-text-on-brand);
}

    .btn-primary-pricing:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-brand);
    }

.btn-ghost-pricing {
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-border-strong);
    background: transparent;
}

    .btn-ghost-pricing:hover {
        background: var(--color-surface-hover);
    }

.plan-cta-pricing {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    margin-top: auto;
}


.pricing-hero {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    padding-bottom: 0px;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0px;
}

    .pricing-hero h1 {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-4);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .pricing-hero p {
        font-size: var(--text-xl);
        color: var(--color-text-secondary);
        margin-bottom: var(--space-8);
    }

/* Pricing Cards */
.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-16);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    margin-top: 0rem;
}

.pricing-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    position: relative;
    transition: all var(--duration-base) var(--ease-standard);
}

    .pricing-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
    }

    .pricing-card.popular {
        border: 2px solid var(--color-brand-400);
        background: rgba(47, 111, 237, 0.06);
    }

.popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand-gradient);
    color: var(--color-text-on-brand);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

.plan-name {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.plan-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
}

.plan-price {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--space-8);
}

.price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-brand-300);
}

.price-currency {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-brand-300);
    margin-right: var(--space-2);
}

.price-period {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

.trial-info {
    background: rgba(47, 111, 237, 0.1);
    border: 1px solid rgba(47, 111, 237, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-brand-300);
}

.features-list {
    list-style: none;
    margin-bottom: var(--space-8);
}

    .features-list li {
        display: flex;
        align-items: center;
        margin-bottom: var(--space-3);
        font-size: var(--text-sm);
    }

.check-icon {
    color: var(--color-success);
    margin-right: var(--space-3);
    font-weight: bold;
}

.x-icon {
    color: var(--color-danger);
    margin-right: var(--space-3);
    font-weight: bold;
}

.feature-highlight {
    color: var(--color-brand-300);
    font-weight: 600;
}

.plan-cta {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    margin-top: auto;
}

/* FAQ Section */
.faq-section {
    background: var(--color-bg-elevated);
    padding: var(--space-16) var(--space-8);
    margin-top: var(--space-16);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    font-size: var(--text-4xl);
    font-weight: 700;
    margin-bottom: var(--space-12);
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.faq-question {
    padding: var(--space-6);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--duration-base) var(--ease-standard);
}

    .faq-question:hover {
        background: var(--color-surface-hover);
    }

.faq-answer {
    padding: 0 var(--space-6) var(--space-6);
    color: var(--color-text-secondary);
    display: none;
}

.faq-icon {
    transition: transform var(--duration-base) var(--ease-standard);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* Blog Content */
/* Article Container */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
    line-height: 1.6;
}

/* Breadcrumb */
.breadcrumb {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

    .breadcrumb a {
        color: var(--color-brand-300);
        text-decoration: none;
    }

        .breadcrumb a:hover {
            color: var(--color-brand-400);
        }

/* Article Header (BlogContent hero — larger scale than the Blog.cshtml grid cards) */
.article-header {
    margin-bottom: var(--space-12);
    text-align: center;
}

    .article-header .article-category {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        display: inline-block;
        margin-bottom: var(--space-6);
    }

    .article-header .article-title {
        font-size: var(--text-5xl);
        font-weight: 800;
        margin-bottom: var(--space-6);
        background: linear-gradient(45deg, var(--color-text-primary), var(--color-brand-300));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.2;
    }

    .article-header .article-meta {
        justify-content: center;
        gap: var(--space-8);
        flex-wrap: wrap;
    }

.article-subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.article-container .featured-image {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-lg);
    margin: var(--space-12) 0;
}

    .article-container .featured-image img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-md);
    }

/* Article Content extras */
.error-container {
    text-align: center;
    padding: 100px var(--space-5);
}

.article-icon {
    font-size: 64px;
    padding: var(--space-10);
}

.highlight-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin: var(--space-8) 0;
}

    .highlight-box h4 {
        margin-top: 0;
        color: var(--color-info);
    }

    .highlight-box p {
        margin-top: 0;
        color: var(--color-info);
    }

.rating-section {
    background: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-md);
    margin: var(--space-10) 0;
    text-align: center;
}

    .rating-section h3, .rating-section label {
        color: var(--color-text-primary);
    }

.star-rating {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-4) 0;
}

    .star-rating input {
        display: none;
    }

.star-label {
    cursor: pointer;
    font-size: 42px;
    color: var(--color-text-muted);
    transition: color var(--duration-fast) ease;
    user-select: none;
}

    .star-label::before {
        content: '★';
    }

    .star-label.highlighted {
        color: var(--color-warning);
    }

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text-on-brand);
    border-radius: var(--radius-full);
    border-top-color: transparent;
    animation: spin 1s ease-in-out infinite;
}

.rating-submitted {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* NEWSLETTER */
.newsletter_status_message {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

    .newsletter_status_message.newsletter_success {
        background-color: var(--color-success-bg);
        color: var(--color-success);
        border: 1px solid var(--color-success);
    }

    .newsletter_status_message.newsletter_error {
        background-color: var(--color-danger-bg);
        color: var(--color-danger);
        border: 1px solid var(--color-danger);
    }

    .newsletter_status_message.newsletter_warning {
        background-color: var(--color-warning-bg);
        color: var(--color-warning);
        border: 1px solid var(--color-warning);
    }

.newsletter_btn_loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.newsletter_loading_spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text-on-brand);
    border-top: 2px solid transparent;
    border-radius: var(--radius-full);
    animation: newsletter_spinner_animation 1s linear infinite;
}

@keyframes newsletter_spinner_animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.newsletter_subscribe_btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Messages de feedback */
.feedback-message {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
    font-weight: 500;
    display: none;
}

.feedback-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.feedback-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

/* Comment */
.comment-input {
    margin: var(--space-5) 0;
}

    .comment-input textarea {
        width: 100%;
        padding: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-surface-border-strong);
        border-radius: var(--radius-sm);
        color: var(--color-text-primary);
        resize: vertical;
    }

@media (max-width: 768px) {
    .article-container {
        padding: 15px;
    }

    .article-title {
        font-size: 2rem;
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .share-buttons {
        flex-direction: column;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* Social Share */
.social-share {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin: var(--space-12) 0;
    text-align: center;
}

.share-title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.share-btn {
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--duration-base) var(--ease-standard);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .share-btn:hover {
        transform: translateY(-2px);
    }

.share-twitter {
    background: rgba(29, 161, 242, 0.15);
    color: #1da1f2;
    border: 1px solid rgba(29, 161, 242, 0.3);
}

.share-linkedin {
    background: rgba(0, 119, 181, 0.15);
    color: #0077b5;
    border: 1px solid rgba(0, 119, 181, 0.3);
}

.share-facebook {
    background: rgba(24, 119, 242, 0.15);
    color: #1877f2;
    border: 1px solid rgba(24, 119, 242, 0.3);
}

/* Related Articles */
.related-articles {
    margin: var(--space-16) 0;
}

.related-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-8);
    text-align: center;
    color: var(--color-text-primary);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
}

.related-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-standard);
    cursor: pointer;
}

    .related-card:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
    }

.related-image {
    height: 150px;
    background: var(--color-brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-text-on-brand);
    overflow: hidden;
    flex-shrink: 0;
}

    /* Même défaut que .article-image : l'image débordait sur le texte de la carte. */
    .related-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.related-content {
    padding: var(--space-6);
}

.related-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.related-excerpt {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.related-meta {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Newsletter CTA */
.newsletter-cta {
    background: linear-gradient(135deg, rgba(47, 111, 237, 0.1), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(47, 111, 237, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    margin: var(--space-16) 0;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .nav-container {
        padding: 0 var(--space-4);
    }

    .contact-hero h1 {
        font-size: 2.5rem;
    }

    .contact-container {
        padding: 0 var(--space-4) var(--space-16);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .pricing-hero h1 {
        font-size: 2.5rem;
    }

    .pricing-container {
        padding: 0 var(--space-4) var(--space-16);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .blog-hero h1 {
        font-size: 2.5rem;
    }

    .blog-container {
        padding: 0 var(--space-4) var(--space-16);
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .featured-title {
        font-size: var(--text-2xl);
    }

    .article-container {
        padding: var(--space-4);
    }

    .article-title {
        font-size: 2.2rem;
    }

    .article-meta {
        flex-direction: column;
        gap: var(--space-4);
    }

    .share-buttons {
        flex-direction: column;
    }
}


/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-12) var(--space-8) var(--space-4);
    margin-top: var(--space-16);
    border-top: 1px solid var(--color-surface-border);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
}

.footer-section h4 {
    margin-bottom: var(--space-4);
    color: var(--color-brand-300);
}

.footer-section a {
    color: var(--color-text-secondary);
    text-decoration: none;
    display: block;
    margin-bottom: var(--space-2);
}

    .footer-section a:hover {
        color: var(--color-text-primary);
    }

.footer-bottom {
    text-align: center;
    padding-top: var(--space-8);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-surface-border);
    color: var(--color-text-muted);
}

/* The service definition sits on its own line, below the copyright: read as a
   statement of what PreTrAIde is, not as an appendix to a legal boilerplate. */
.footer-disclaimer {
    max-width: 90ch;
    margin: var(--space-3) auto 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    opacity: 0.85;
}

/* Trusted By Section */
.trusted-section {
    padding: var(--space-16) var(--space-8);
    background: var(--color-bg-elevated);
    overflow: hidden;
}

.trusted-container {
    max-width: 1200px;
    margin: 0 auto;
}

.logo-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.logo-track {
    display: flex;
    gap: var(--space-16);
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.company-logo {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: var(--text-lg);
    white-space: nowrap;
    transition: all var(--duration-base) var(--ease-standard);
}

    .company-logo:hover {
        background: rgba(47, 111, 237, 0.1);
        color: var(--color-brand-300);
        transform: translateY(-2px);
    }

/* AI Benefits Section */
.ai-benefits-section {
    padding: var(--space-16) var(--space-8);
    background: linear-gradient(135deg, rgba(47, 111, 237, 0.05), rgba(124, 58, 237, 0.05));
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
}

.benefits-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.benefits-description {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}

/* Cinq colonnes tiennent sur une ligne jusqu'a ~1024px ; en dessous la carte
   deviendrait trop etroite pour son titre, on repasse donc a 3 puis 2 puis 1. */
@media (max-width: 1024px) {
    .workflow-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .workflow-grid {
        grid-template-columns: 1fr;
    }
}

.workflow-step {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    transition: all var(--duration-base) var(--ease-standard);
    position: relative;
    overflow: hidden;
}

    .workflow-step:hover {
        transform: translateY(-5px);
        border-color: rgba(47, 111, 237, 0.3);
        box-shadow: 0 20px 40px rgba(47, 111, 237, 0.1);
    }

.workflow-image {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--space-5);
    position: relative;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(47, 111, 237, 0.2), rgba(124, 58, 237, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(47, 111, 237, 0.3);
}

.workflow-icon {
    font-size: 3rem;
    z-index: 2;
    position: relative;
    color: var(--color-brand-300);
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-icon svg {
    width: 38px;
    height: 38px;
}

.workflow-bg-pattern {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(45deg, transparent 30%, rgba(47, 111, 237, 0.1) 50%, transparent 70%);
    animation: rotate 8s linear infinite;
    border-radius: var(--radius-full);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.workflow-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
    text-wrap: balance;
}

.workflow-description {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Demo Video Modal */
.demo-modal[hidden] {
    display: none;
}

.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.demo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.demo-modal-dialog {
    position: relative;
    /* Portrait: the demo is a YouTube Short. Width is also capped by the height
       available under the close button so the 9/16 box never overflows the viewport. */
    width: min(420px, 100%, calc((100vh - 8rem) * 9 / 16));
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.demo-modal-video,
.demo-modal-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.demo-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* Step Connectors */
.workflow-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    font-size: 2rem;
    color: var(--color-brand-300);
    z-index: 3;
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .workflow-step:not(:last-child)::after {
        content: '↓';
        top: auto;
        bottom: -1rem;
        right: 50%;
        transform: translateX(50%);
    }

    .logo-track {
        gap: var(--space-8);
    }

    .company-logo {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-container {
        padding: 0 var(--space-4);
    }

    .hero, .how-it-works {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}