/* ═══════════════════════════════════════════════════════════════
   SHOWCASE SECTION — style Krea exact
   ═══════════════════════════════════════════════════════════════ */

.showcase-section {
    background: #fff;
    padding-top: 6rem;
    overflow: hidden;
}

/* Showcase intro header */
.showcase-intro {
    text-align: center;
    padding: 0 2rem 3rem;
}

.showcase-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 0.75rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

.showcase-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    margin: 0;
}

.showcase-scroll {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    margin: 0 1.25rem;
    /* scroll-snap handled via JS for smooth drag */
    scrollbar-width: none;
    cursor: grab;
}

@media (min-width: 768px) {
    .showcase-scroll {
        margin: 0 8rem;
        gap: 2.5rem;
    }
}

.showcase-scroll::-webkit-scrollbar { display: none; }
.showcase-scroll:active { cursor: grabbing; }

.showcase-card {
    position: relative;
    flex-shrink: 0;
    height: 375px;
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    /* scroll-snap-align: start; */
}

@media (min-width: 768px) {
    .showcase-card { height: 500px; }
}

.showcase-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    user-select: none;
    z-index: 0;
}

.showcase-card:hover .showcase-card__img {
    transform: scale(1.1);
}

.showcase-card__overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 40%, transparent 65%);
}

.showcase-card__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    width: fit-content;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

.showcase-card__bottom {
    overflow: hidden;
}

.showcase-card__content {
    transform: translateY(53px);
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-card__content {
    transform: translateY(0);
}

.showcase-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

.showcase-card .showcase-card__title {
    font-size: 1.375rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 768px) {
    .showcase-card .showcase-card__title { font-size: 1.875rem; }
}

.showcase-card__cta-wrap {
    padding-top: 1rem;
    transform: translateY(calc(100% + 1rem));
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-card__cta-wrap {
    transform: translateY(0);
}

.showcase-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: #efefef;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    color: #0a0a0a;
    text-decoration: none;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
    transition: opacity 0.2s;
}

.showcase-card__cta:hover { opacity: 0.85; }

/* Showcase nav */
.showcase-nav {
    display: flex;
    justify-content: flex-end;
    padding: 0.625rem 8rem 0;
}

.showcase-nav__btns {
    display: flex;
    gap: 0.75rem;
}

.showcase-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #e5e5e5;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.showcase-nav__btn:hover { opacity: 0.85; }

/* ── cards-section__footer (kept from AIONOS) ── */
.cards-section__footer {
    max-width: none;
    margin: 0;
    padding: 4rem 8rem 0;
}


/* ═══════════════════════════════════════════════════════════════
   BENTO GRID SECTION — layout Krea exact (16 cols × 14 rows × 50px)
   ═══════════════════════════════════════════════════════════════ */

.bento-section {
    background: #fff;
    padding: 8rem 0;
}

.bento-wrap {
    width: 100%;
    padding: 0 2rem;
}

@media (min-width: 1024px) { .bento-wrap { padding: 0 8rem; } }

/* ── Grid layout ── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(14, 50px);
    grid-template-areas:
        "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
        "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
        "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
        "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
        "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain"
        "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain"
        "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain"
        "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain"
        "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 k1 models models models"
        "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 k1 models models models"
        "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync realtime realtime realtime"
        "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync realtime realtime realtime"
        "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync text3d text3d text3d"
        "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync text3d text3d text3d";
    gap: 0.875rem;
}

/* ── All tiles: shared border-radius + overflow ── */
.bento-grid > div {
    border-radius: 1.5rem;
    overflow: hidden;
}

/* ── Grid area assignments ── */
.bento-tile--speed        { grid-area: speed; }
.bento-tile--upscaling    { grid-area: upscaling; }
.bento-tile--train        { grid-area: train; }
.bento-tile--fourk        { grid-area: fourk; }
.bento-tile--k1           { grid-area: k1; }
.bento-tile--minimalist   { grid-area: minimalist; }
.bento-tile--donottrain   { grid-area: donottrain; }
.bento-tile--models       { grid-area: models; }
.bento-tile--assetmanager { grid-area: assetmanager; }
.bento-tile--bleedingedge { grid-area: bleedingedge; }
.bento-tile--styles       { grid-area: styles; }
.bento-tile--editor       { grid-area: editor; }
.bento-tile--lipsync      { grid-area: lipsync; }
.bento-tile--realtime     { grid-area: realtime; }
.bento-tile--text3d       { grid-area: text3d; }

/* ── Tile base ── */
.bento-tile {
    padding: 1.375rem;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Entrance animation */
    opacity: 0;
    transform: scale(0.96) translateY(14px);
    transition:
        opacity  0.55s ease,
        transform 0.55s cubic-bezier(0.34, 1.22, 0.64, 1);
    transition-delay: calc(var(--bi, 0) * 55ms);
}

.bento-section.is-visible .bento-tile {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Tile color variants ── */
.bento-tile--dark  { background: #262626; color: #fff; }
.bento-tile--light { background: #f4f4f4; color: #0a0a0a; }

/* ── Layout helpers by tile ── */
.bento-tile--speed,
.bento-tile--fourk,
.bento-tile--minimalist,
.bento-tile--k1 {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bento-tile--upscaling,
.bento-tile--train {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bento-tile--donottrain,
.bento-tile--models {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ── Image in tiles ── */
.bento-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.bento-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ── Specific tile backgrounds ── */
.bento-tile--speed {
    background: #262626;
    color: #fff;
}

.bento-tile--k1 {
    background: #1a1a1a;
    color: #fff;
}

.bento-tile--minimalist {
    background: #000;
    color: #fff;
}

/* ── Typography ── */

/* Large stat: +10 / Tester / 400 / 64+ */
.bento-stat {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    position: relative;
    z-index: 1;
}

@media (min-width: 1280px) {
    .bento-stat { font-size: 4.5rem; }
}

.bento-stat-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

@media (min-width: 1280px) {
    .bento-stat-label { font-size: 1rem; }
}

.bento-tile--light .bento-stat-label { color: rgba(0,0,0,0.55); }
.bento-tile--dark  .bento-stat-label { color: rgba(255,255,255,0.55); }

/* Hero AIONOS title */
.bento-hero-title {
    font-size: 3.75rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    color: #fff;
    line-height: 1;
    margin: 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 1280px) {
    .bento-hero-title { font-size: 6rem; }
}

.bento-hero-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    margin: 0;
    position: absolute;
    bottom: 1.25rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .bento-hero-sub { font-size: 1rem; }
}

/* Medium centered text (speed tile) */
.bento-big-center {
    display: block;
    font-size: 1.875rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    position: relative;
    z-index: 1;
}

/* ── Gradient text (Krea exact) ── */
.bento-gradient-text {
    background: linear-gradient(180deg, #0a0a0a 0%, #737373 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Strip tiles (rows 11-14) ── */

.bento-tile--assetmanager {
    background: linear-gradient(135deg, #1a1030 0%, #0d1a28 50%, #0a0a0a 100%);
    justify-content: flex-start;
    align-items: flex-start;
    color: #fff;
}

.bento-tile--bleedingedge {
    background: #f4f4f4;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 1.25rem;
}

.bento-tile--styles {
    background: #f4f4f4;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem;
    overflow: hidden;
}

.bento-tile--editor {
    background: linear-gradient(180deg, #1a1a1a 0%, #6b6b6b 100%);
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.bento-tile--lipsync {
    background: #f4f4f4;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 1.25rem;
}

.bento-tile--realtime {
    background: #000;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-top: 0.875rem;
}

.bento-tile--text3d {
    background: #f4f4f4;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 0.75rem;
}

/* ── Strip text helpers ── */
.bento-tile-label-tl {
    font-size: 1rem;
    font-weight: 700;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    z-index: 2;
    position: relative;
    color: #fff;
}

.bento-edge-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    position: relative;
    z-index: 1;
}

.bento-tile--light .bento-edge-title { color: #0a0a0a; }
.bento-tile--dark  .bento-edge-title { color: #fff; }

/* ── Wave bars (Veille IA / Lipsync) ── */
.bento-wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    justify-content: center;
    margin-top: 0.75rem;
    width: 100%;
    flex: 1;
}

.bento-wave-bar {
    width: 6px;
    border-radius: 9999px;
    background: linear-gradient(to top, #474747 0%, #000 100%);
    animation: bento-wave 1.2s ease-in-out infinite;
}
.bento-wave-bar:nth-child(1) { height: 28px; animation-delay: 0s; }
.bento-wave-bar:nth-child(2) { height: 44px; animation-delay: 0.1s; }
.bento-wave-bar:nth-child(3) { height: 56px; animation-delay: 0.2s; }
.bento-wave-bar:nth-child(4) { height: 36px; animation-delay: 0.15s; }
.bento-wave-bar:nth-child(5) { height: 48px; animation-delay: 0.05s; }
.bento-wave-bar:nth-child(6) { height: 32px; animation-delay: 0.25s; }

/* Version agrandie pour lipsync */
.bento-wave--lg {
    gap: 7px;
    height: 100px;
}
.bento-wave--lg .bento-wave-bar { width: 9px; }
.bento-wave--lg .bento-wave-bar:nth-child(1) { height: 44px; }
.bento-wave--lg .bento-wave-bar:nth-child(2) { height: 70px; }
.bento-wave--lg .bento-wave-bar:nth-child(3) { height: 90px; }
.bento-wave--lg .bento-wave-bar:nth-child(4) { height: 58px; }
.bento-wave--lg .bento-wave-bar:nth-child(5) { height: 78px; }
.bento-wave--lg .bento-wave-bar:nth-child(6) { height: 50px; }

@keyframes bento-wave {
    0%, 100% { transform: scaleY(1); }
    50%       { transform: scaleY(0.4); }
}

/* ── Color swatches (Benchmark) ── */
.bento-styles-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
}

.bento-styles-swatch {
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* ── Minimalist mirror text ── */
.bento-mirror-wrap {
    position: relative;
    text-align: center;
}

.bento-mirror-text {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.bento-mirror-reflect {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    line-height: 1;
    opacity: 0.35;
    transform: scaleY(-1);
    filter: blur(2px);
    background: linear-gradient(to top, #fff 0%, transparent 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Realtime conic glow ── */
.bento-conic-glow {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 120deg at 60% 40%, rgba(0,212,255,0.55), transparent 40%, rgba(255,0,200,0.45));
}

/* ═══════════════════════════════════════════════════════════════
   CTA BANNER (below bento)
   ═══════════════════════════════════════════════════════════════ */

.bento-cta-section {
    background: #fff;
    padding: 0 0 2rem;
}

.bento-cta-wrap {
    width: 100%;
    padding: 0 8rem;
}

.bento-cta-subtitle {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #737373;
    margin: 0 0 0.25rem;
}

@media (min-width: 640px) {
    .bento-cta-subtitle { font-size: 1.25rem; }
}

.bento-cta-title {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
}

.bento-cta-brand {
    color: #a3a3a3;
}

@media (min-width: 640px) {
    .bento-cta-title { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
    .bento-cta-title { font-size: 2.25rem; }
}

.bento-cta-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.bento-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.65rem 1.5rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.bento-cta-btn:hover { opacity: 0.75; }

.bento-cta-btn--ghost {
    background: transparent;
    color: #0a0a0a;
    border: 0.5px solid rgba(0,0,0,0.25);
}

.bento-cta-btn--dark {
    background: #0a0a0a;
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════
   USE CASES SECTION
   ═══════════════════════════════════════════════════════════════ */

.usecases-section {
    background: #fff;
    padding: 4rem 0 4rem;
}

.usecases-wrap {
    width: 100%;
    padding: 0 8rem;
}

.usecases-eyebrow {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #737373;
    margin: 0 0 0.25rem;
}

@media (min-width: 640px) {
    .usecases-eyebrow { font-size: 1.25rem; }
}

.usecases-heading {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 3.5rem;
}

@media (min-width: 1024px) {
    .usecases-heading { font-size: 2.5rem; }
}

/* Two-col layout */
.usecases-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    height: 600px;
}

/* List wrapper — for the bottom blur */
.usecases-list-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.usecases-list-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10rem;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    z-index: 2;
}

/* ── Left: item list ── */
.usecases-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0 0 4rem;
    margin: 0;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}
.usecases-list::-webkit-scrollbar { display: none; }

.usecase-group-label {
    list-style: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1.25rem 0.1rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

.usecase-item {
    border-radius: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: transparent;
    transition: background 0.3s ease, transform 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}

.usecase-item:active { transform: scale(0.98); }

.usecase-item.is-active { background: #f5f5f5; }

.usecase-item__title {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0a0a0a;
    opacity: 0.35;
    transition: opacity 0.3s ease;
    line-height: 1.3;
    margin: 0;
}

.usecase-item.is-active .usecase-item__title { opacity: 1; }

.usecase-item__desc {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #0a0a0a;
    line-height: 1.4;
    margin: 0;
    opacity: 0.35;
    transition: opacity 0.3s ease;
}

.usecase-item.is-active .usecase-item__desc {
    opacity: 0.6;
}

/* Button: always in DOM, hidden via max-height + opacity + scale */
.usecase-item__btn-wrap {
    margin-top: 0.75rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: scale(0.95);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.usecase-item.is-active .usecase-item__btn-wrap {
    max-height: 3rem;
    opacity: 1;
    transform: scale(1);
}

.usecase-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    background: #0a0a0a;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.usecase-item__btn:hover { opacity: 0.8; }

/* ── Right: preview image ── */
.usecases-preview {
    height: 100%;
}

.usecases-preview__inner {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    height: 100%;
    background: #f0f0f0;
}

.usecases-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.usecases-preview__img.is-active {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   PRICING SECTION
   ═══════════════════════════════════════════════════════════════ */

.pricing-section,
body.landing-page .pricing-section {
    background: #fff !important;
    padding: 4rem 0 4rem !important;
}

.pricing-wrap {
    width: 100%;
    padding: 0 8rem;
}

.pricing-eyebrow {
    display: none;
}

.pricing-heading {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.04em;
    line-height: 1.25;
    margin: 0;
}

.pricing-heading-muted { color: #b0b0b0; }

@media (min-width: 1024px) {
    .pricing-heading { font-size: 4.5rem; }
}

/* ── Toggle ── */
.pricing-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 7rem 0 3rem;
}

.pricing-toggle {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    border-radius: 0.75rem;
    padding: 0.375rem;
    width: fit-content;
}

.pricing-toggle__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border: none;
    background: transparent;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #737373;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: color 0.2s ease;
    z-index: 0;
}

.pricing-toggle__btn.is-active { color: #0a0a0a; }

/* Le bouton avec badge n'a pas besoin de padding-right */
.pricing-toggle__btn[data-period="yearly"] { padding-right: 0.375rem; }

.pricing-toggle__indicator {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    z-index: -1;
}

.pricing-toggle__label { position: relative; z-index: 1; }

.pricing-toggle__badge {
    background: #7c3aed;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem;
    position: relative;
    z-index: 1;
}

/* ── Cards grid ── */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}


/* ── Single card ── */
.pc {
    display: flex;
    flex-direction: column;
    min-height: 580px;
    border: 1px solid #e5e5e5;
    border-radius: 1rem;
    background: #fff;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}

.pc:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.07); }

.pc__name {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #0a0a0a;
    margin: 0;
}

.pc__desc {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    color: #737373;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

.pc__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 1rem 0;
}

.pc__price {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 2.25rem;
    font-weight: 600;
    color: #0a0a0a;
    transition: all 0.3s ease;
}

.pc__period {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    color: #737373;
}

.pc__credits {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #525252;
    margin-bottom: 1.25rem;
}

.pc__includes {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0a0a0a;
    margin-bottom: 0.75rem;
}

.pc__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.pc__features li {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    color: #404040;
    padding-left: 1.375rem;
    position: relative;
    line-height: 1.4;
}

.pc__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.pc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #0a0a0a;
    color: #fff;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pc__btn:hover { opacity: 0.8; }

.pc__btn--ghost {
    background: transparent;
    color: #0a0a0a;
}

/* ── Word blur reveal animation ── */
.pricing-word {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(8px);
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.5s ease;
    transition-delay: calc(var(--wi, 0) * 55ms);
}

.pricing-section.is-visible .pricing-word {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   MODELS SECTION
   ═══════════════════════════════════════════════════════════════ */

.models-section {
    background: #fff;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.models-wrap {
    width: 100%;
    padding: 0 8rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

/* ── Header ── */
.models-header {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .models-header {
        flex-direction: row;
        align-items: flex-end;
        gap: 2.5rem;
    }
}

.models-header__left {
    flex: 1;
}

.models-eyebrow {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #737373;
    margin: 0 0 0.25rem;
}

@media (min-width: 640px) {
    .models-eyebrow { font-size: 1.25rem; }
}

.models-heading {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 768px) { .models-heading { font-size: 2.5rem; } }
@media (min-width: 1280px) { .models-heading { font-size: 3rem; } }

.models-desc {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #737373;
    line-height: 1.6;
    max-width: 36rem;
    margin: 0;
    flex-shrink: 0;
}

@media (min-width: 768px) { .models-desc { font-size: 1.125rem; } }

/* ── Carousel ── */
.models-carousel {
    position: relative;
    height: 30rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #f0f0f0;
}

.models-carousel__slides {
    position: absolute;
    inset: 0;
}

/* ── Slides ── */
.models-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.models-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.models-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.models-slide__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55));
    pointer-events: none;
}

.models-slide__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1.5rem;
    z-index: 2;
}

@media (min-width: 768px) {
    .models-slide__caption { padding: 3rem; }
}

.models-slide__text {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    max-width: 24rem;
}

@media (min-width: 768px) {
    .models-slide__text { font-size: 1.875rem; }
}

/* ── Overlay (progress + buttons) ── */
.models-carousel__overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    pointer-events: none;
}

@media (min-width: 768px) {
    .models-carousel__overlay { padding: 3rem; }
}

/* Progress bar vertical */
.models-progress {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.models-progress__bar-wrap {
    position: relative;
    width: 6px;
    height: 6rem;
    background: rgba(255,255,255,0.25);
    border-radius: 9999px;
    overflow: hidden;
}

.models-progress__bar {
    position: relative;
    width: 6px;
    height: 6rem;
    background: rgba(255,255,255,0.25);
    border-radius: 9999px;
    overflow: hidden;
}

.models-progress__bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 9999px;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: none;
}

.models-progress__bar.is-running::after {
    animation: models-progress 4s linear forwards;
}

@keyframes models-progress {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Footer: buttons */
.models-carousel__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

.models-carousel__btns {
    display: flex;
    gap: 0.75rem;
    pointer-events: all;
}

.models-carousel__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #e5e7eb;
    border: none;
    color: #0a0a0a;
    cursor: pointer;
    transition: opacity 0.2s;
}

.models-carousel__btn:hover { opacity: 0.75; }


/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION — shadcn FAQs component (Tailwind defaults → CSS)
   bg-muted py-16 md:py-24 / max-w-5xl px-4 md:px-6 / text-4xl
   font-semibold / mt-4 text-lg / mt-12 / bg-card ring-foreground/5
   rounded(--radius:0.625rem) border-transparent px-8 py-3 shadow ring-1
   border-dotted / text-base / ChevronDown rotate-180 on open
   ═══════════════════════════════════════════════════════════════ */
.kfaq-section {
    background: #fff;
    padding: 0 0 6rem;                              /* on retire le padding-top, le models-section gère déjà le bas */
}

@media (min-width: 768px) {
    .kfaq-section { padding: 0 0 8rem; }
}

.kfaq-wrap {
    width: 100%;
    padding: 0 8rem;                                 /* aligné comme .models-wrap / .bento-wrap */
}

/* Header (h2 + subtitle) */
.kfaq-heading {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;                                /* aligné sur .usecases-heading */
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 1024px) {
    .kfaq-heading { font-size: 2.5rem; }
}

.kfaq-subtitle {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;                            /* text-lg */
    line-height: 1.75rem;
    color: hsl(240 3.8% 46.1%);                     /* text-muted-foreground */
    margin: 1rem 0 0;                               /* mt-4 */
    text-wrap: balance;                             /* text-balance */
}

/* Pas de card : juste un container neutre avec mt-12 */
.kfaq-card {
    width: 100%;
    margin-top: 3rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Items séparés par un divider solide subtil (pas de border autour) */
.kfaq-item {
    border-bottom: 1px solid hsl(240 5.9% 90%);
}

.kfaq-item:last-child {
    border-bottom: none;
}

/* AccordionTrigger: flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium
   (mais ici text-base via la prop className) + cursor-pointer hover:no-underline */
.kfaq-item__btn {
    display: flex;
    flex: 1 1 0%;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;                                      /* gap-4 */
    padding: 1rem 0;                                /* py-4 */
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;                                /* text-base */
    font-weight: 500;                               /* font-medium */
    color: hsl(240 10% 3.9%);
    transition: color 0.15s ease;
}

.kfaq-item__btn:hover { text-decoration: none; }    /* hover:no-underline */

.kfaq-item__q {
    flex: 1;
    line-height: 1.5rem;
}

/* ChevronDown : translate-y-0.5 shrink-0 size-4 transition-transform pointer-events-none */
.kfaq-item__chevron {
    flex-shrink: 0;
    margin-top: 0.125rem;                           /* translate-y-0.5 */
    width: 1rem;                                    /* size-4 */
    height: 1rem;
    color: hsl(240 3.8% 46.1%);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kfaq-item__btn[aria-expanded="true"] .kfaq-item__chevron {
    transform: rotate(180deg);                      /* [&[data-state=open]>svg]:rotate-180 */
}

/* AccordionContent: overflow-hidden text-sm + animate */
/* Animation smooth via grid-template-rows 0fr → 1fr
   (anime la hauteur RÉELLE du contenu, beaucoup plus fluide que max-height) */
.kfaq-item__a {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.kfaq-item__a > * {
    overflow: hidden;
    min-height: 0;
}

.kfaq-item__btn[aria-expanded="true"] + .kfaq-item__a {
    grid-template-rows: 1fr;
    opacity: 1;
}

.kfaq-item__a p {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    color: hsl(240 10% 3.9%);
    margin: 0;
    padding: 0 0 1rem;
}

/* Hover subtle sur le bouton */
.kfaq-item__btn { transition: color 0.2s ease; }
.kfaq-item__btn:hover { color: hsl(240 5.9% 30%); }

/* Footer link */
.kfaq-contact {
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
    color: hsl(240 3.8% 46.1%);                     /* text-muted-foreground */
    font-size: 1rem;
    margin: 1.5rem 0 0;                             /* mt-6 */
}

.kfaq-contact a {
    color: hsl(240 10% 3.9%);                       /* text-primary */
    font-weight: 500;
    text-decoration: none;
}

.kfaq-contact a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   FOOTER — style minimaliste, inspiré du header (fond sombre, blanc)
   ═══════════════════════════════════════════════════════════════ */
.kfooter {
    background: #010105;
    color: #fff;
    padding: 3rem 0 2.5rem;
    font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
}

.kfooter-wrap {
    width: 100%;
    padding: 0 8rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Top row : brand left + socials right */
.kfooter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.kfooter-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #fff;
}

.kfooter-logo {
    height: 2rem;
    width: auto;
    display: block;
}

.kfooter-name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.kfooter-socials {
    display: flex;
    gap: 0.5rem;
}

.kfooter-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.kfooter-social:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Divider line */
.kfooter-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    width: 100%;
}

/* Bottom row : copyright left + links right */
.kfooter-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.kfooter-copy {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.kfooter-copy-muted {
    color: rgba(255, 255, 255, 0.5);
}

.kfooter-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.kfooter-links-main {
    display: flex;
    gap: 2rem;
}

.kfooter-links-main a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.kfooter-links-main a:hover { color: rgba(255, 255, 255, 0.7); }

.kfooter-links-legal {
    display: flex;
    gap: 1.5rem;
}

.kfooter-links-legal a {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.kfooter-links-legal a:hover { color: rgba(255, 255, 255, 0.85); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — DESIGN SYSTEM
   Breakpoints: ≥1024px desktop · 768–1023px tablet · <768px mobile
   Horizontal padding: 8rem → 3rem → 1.25rem
   Section padding-y:  8rem → 5rem → 3.5rem
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Horizontal padding – all wraps */
    .bento-wrap,
    .bento-cta-wrap,
    .usecases-wrap,
    .pricing-wrap,
    .models-wrap,
    .kfaq-wrap,
    .kfooter-wrap           { padding-left: 3rem; padding-right: 3rem; }
    .showcase-scroll       { margin-left: 3rem; margin-right: 3rem; }
    .showcase-nav          { padding-left: 3rem; padding-right: 3rem; }
    .cards-section__footer { padding-left: 3rem; padding-right: 3rem; }

    /* Section vertical padding */
    .bento-section                         { padding: 5rem 0; }
    .bento-cta-section                     { padding: 0 0 3rem; }
    .usecases-section                      { padding: 5rem 0; }
    .pricing-section,
    body.landing-page .pricing-section     { padding: 3rem 0 !important; }
    .models-section                        { padding: 3rem 0; }
    .kfaq-section                           { padding: 5rem 0; }

    /* Bento grid: 4-column */
    .bento-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto;
        grid-auto-rows: 180px;
        grid-template-areas:
            "speed speed speed speed"
            "upscaling upscaling train train"
            "fourk fourk k1 k1"
            "fourk fourk k1 k1"
            "minimalist minimalist donottrain donottrain"
            "minimalist minimalist models models"
            "assetmanager assetmanager bleedingedge bleedingedge"
            "styles styles editor editor"
            "lipsync lipsync realtime text3d";
    }
    .bento-stat       { font-size: 2.5rem; }
    .bento-hero-title { font-size: 3rem; }

    /* CTA */
    .bento-cta-title { font-size: 1.875rem; white-space: normal; }

    /* Use cases: single column, hide image */
    .usecases-body      { grid-template-columns: 1fr; height: auto; }
    .usecases-preview   { display: none; }
    .usecases-list-wrap { height: 480px; }
    .usecases-list      { height: 480px; }
    .usecases-heading   { font-size: 2rem; }

    /* Pricing */
    .pricing-heading     { font-size: 3rem; }
    .pricing-toggle-wrap { margin-top: 4rem; }
    .pricing-cards       { grid-template-columns: repeat(2, 1fr); }

    /* Models */
    .models-header   { flex-direction: column; align-items: flex-start; }
    .models-carousel { height: 26rem; }
    .models-heading  { font-size: 2.25rem; }
}

/* ── MOBILE (<768px) ── */
@media (max-width: 767px) {

    /* Horizontal padding – all wraps (collé un peu plus à gauche sur mobile) */
    .bento-wrap,
    .bento-cta-wrap,
    .usecases-wrap,
    .pricing-wrap,
    .models-wrap,
    .kfaq-wrap,
    .kfooter-wrap           { padding-left: 0.875rem; padding-right: 0.875rem; }

    /* Footer mobile : liens d'abord, copyright tout en bas */
    .kfooter                 { padding: 2rem 0 2rem; }
    .kfooter-bottom          { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
    .kfooter-links           { align-items: flex-start; }
    .kfooter-links-main      { flex-wrap: wrap; gap: 1.25rem; }
    .showcase-scroll       { margin-left: 0.875rem; margin-right: 0.875rem; gap: 1rem; padding-bottom: 1rem; }
    .showcase-nav          { padding-left: 0.875rem; padding-right: 0.875rem; }
    .cards-section__footer { padding: 2rem 0.875rem 0; }

    /* responsive.css applique padding:4.25rem 1rem 2rem !important à TOUS les <main>.
       Sur la landing, ça crée des bandes blanches de 16px sur les côtés.
       On annule le padding horizontal et on remet juste le top/bottom. */
    body.landing-page main {
        background: #fff;
        padding: 0 !important;
    }
    /* Fix sticky : body avec overflow-x:hidden devient un scroll container
       (overflow-y devient auto par la spec). On utilise overflow:clip pour
       clipper le débordement horizontal sans créer de scroll container. */
    body.landing-page {
        overflow: clip !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    html:has(body.landing-page) {
        overflow-x: clip !important;
    }

    /* Suggestion chips: plus petits sur mobile pour tenir sur 1 ligne */
    body.landing-page .hero .quick-suggestions .suggestion-chip {
        font-size: 0.625rem !important;
        padding: 0.3rem 0.6rem !important;
        gap: 0.25rem !important;
    }
    body.landing-page .hero .quick-suggestions .suggestions {
        gap: 0.35rem !important;
    }

    /* Hero subtitle: plus petit sur mobile */
    body.landing-page .hero .hero-subtitle {
        font-size: clamp(0.68rem, 3vw, 0.8rem) !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    /* Chat input: texte plus petit */
    .ruixen-ai-chat__field {
        font-size: 0.8125rem !important;
        min-height: 2.5rem !important;
    }

    /* Micro: centrage forcé dans la box blanche */
    .ruixen-ai-chat__submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    .ruixen-ai-chat__submit svg {
        display: block;
        flex-shrink: 0;
    }

    /* Cards title: 3 lignes propres sur mobile */
    .cards-section__title {
        font-size: clamp(1.5rem, 7.5vw, 2.25rem);
        letter-spacing: -0.03em;
        white-space: normal;
    }
    /* Ligne 2 toujours avec le mot animé + "disponibles." */
    .title-line2 { display: block; }
    /* Masquer le <br> devenu redondant avec display:block */
    .cards-section__title .title-line2 + br { display: none; }
    /* Empêche le mot animé de se casser en interne */
    .word-slot { white-space: nowrap; }

    /* Section vertical padding */
    .showcase-section                      { padding-top: 3rem; }
    .bento-section                         { padding: 3.5rem 0; }
    .bento-cta-section                     { padding: 0 0 2.5rem; }
    .usecases-section                      { padding: 3.5rem 0; }
    .pricing-section,
    body.landing-page .pricing-section     { padding: 2rem 0 !important; }
    .models-section                        { padding: 2rem 0; }

    /* Bento grid mobile — layout calqué sur Krea
       Row 1-2  : speed (full, 2 rows — hero image)
       Row 3    : upscaling | fourk (paire)
       Row 4    : train (full)
       Row 5-7  : k1 (full, 3 rows — hero principal)
       Row 8    : bleedingedge (full, clock)
       Row 9    : donottrain (full)
       Row 10   : models | assetmanager (paire)
       Row 11-12: minimalist (full, 2 rows — image)
       Row 13-14: styles | editor (paire, 2 rows — images)
       Row 15-16: lipsync (2 rows left) | realtime (top right) / text3d (bottom right) */
    /* Grille 6 colonnes : 33%/67% pour styles+editor et lipsync+(realtime/text3d).
       Realtime Canvas + Text to 3D sont empilés à droite de Lipsync (2 cols + 4 cols).
       Les paires 50/50 = 3+3, les full-width = 6. */
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows:
            90px 90px         /* rows 1-2  : speed (encore plus petit) */
            170px             /* row 3     : upscaling/fourk (carrés) */
            145px             /* row 4     : train (un peu plus grand) */
            130px 130px 130px /* rows 5-7  : k1 */
            115px 115px       /* rows 8-9  : bleedingedge */
            95px              /* row 10    : donottrain */
            170px             /* row 11    : models/assetmanager (carrés) */
            165px             /* row 12    : minimalist */
            95px 95px         /* rows 13-14: styles/editor */
            95px 95px;        /* rows 15-16: lipsync/realtime/text3d */
        grid-auto-rows: 130px;
        gap: 0.625rem;
        grid-template-areas:
            "speed speed speed speed speed speed"
            "speed speed speed speed speed speed"
            "upscaling upscaling upscaling fourk fourk fourk"
            "train train train train train train"
            "k1 k1 k1 k1 k1 k1"
            "k1 k1 k1 k1 k1 k1"
            "k1 k1 k1 k1 k1 k1"
            "bleedingedge bleedingedge bleedingedge bleedingedge bleedingedge bleedingedge"
            "bleedingedge bleedingedge bleedingedge bleedingedge bleedingedge bleedingedge"
            "donottrain donottrain donottrain donottrain donottrain donottrain"
            "models models models assetmanager assetmanager assetmanager"
            "minimalist minimalist minimalist minimalist minimalist minimalist"
            "styles styles editor editor editor editor"
            "styles styles editor editor editor editor"
            "lipsync lipsync realtime realtime realtime realtime"
            "lipsync lipsync text3d text3d text3d text3d";
    }
    .bento-stat       { font-size: 2.5rem; }
    .bento-hero-title { font-size: 2.5rem; }
    .bento-big-center { font-size: 1.5rem; }

    /* CTA — textes plus gros */
    .bento-cta-title    { font-size: 1.875rem; white-space: normal; line-height: 1.15; }
    .bento-cta-subtitle { font-size: 1.0625rem; line-height: 1.5; }
    .bento-cta-btns     { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.625rem; }

    /* Use cases — textes plus gros + preview entre titre et liste (boutons gardés) */
    .usecases-eyebrow   { font-size: 1rem; }
    .usecases-heading   { font-size: 2rem; margin-bottom: 2rem; line-height: 1.15; }
    .usecases-body      {
        display: grid;
        grid-template-areas:
            "preview"
            "list";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        gap: 1.5rem;
    }
    .usecases-preview {
        grid-area: preview;
        display: block;
        height: auto;
        aspect-ratio: 16 / 10;
        width: 100%;
        align-self: start;
        /* Sticky sous la nav fixe (~69px) avec un peu d'air */
        position: sticky;
        top: calc(69px + 0.5rem);
        z-index: 1;
    }
    .usecases-list-wrap {
        grid-area: list;
        height: auto;
        overflow: visible;
    }
    .usecases-list      {
        height: auto;
        overflow: visible;
        padding: 0;          /* on retire le padding-bottom de 4rem */
        gap: 0.5rem;
    }
    /* Pas de fade en bas vu qu'on ne scrolle plus dans la liste */
    .usecases-list-wrap::after { display: none; }

    /* Pricing — titre (spécificité boostée pour battre responsive.css body.landing-page h2) */
    body.landing-page .pricing-heading { font-size: 30px !important; line-height: 1.15; }
    /* Plus d'air entre la dernière feature et le bouton CTA */
    .pc__btn { margin-top: 1.5rem !important; }
    .pricing-toggle-wrap { margin: 3rem 0 2rem; }
    .pricing-cards       { grid-template-columns: 1fr; }
    .pc                  { min-height: auto; }

    /* FAQ — mobile */
    .kfaq-section                   { padding: 3.5rem 0; }
    body.landing-page .kfaq-heading { font-size: 30px !important; line-height: 1.15; }
    .kfaq-subtitle                  { font-size: 0.9375rem; }
    .kfaq-card                      { padding: 0; border-radius: 0; }
    .kfaq-item__q                   { font-size: 0.9375rem; }
    .kfaq-item__a p                 { font-size: 0.9375rem; padding-right: 0.5rem; }
    .kfaq-item__btn                 { padding: 1rem 0; gap: 0.875rem; }
    .kfaq-contact                   { font-size: 0.9375rem; }

    /* Models — textes plus gros */
    .models-eyebrow     { font-size: 1rem; }
    .models-heading     { font-size: 2rem; line-height: 1.15; }
    .models-desc        { font-size: 1.0625rem; line-height: 1.55; }
    .models-wrap        { gap: 2rem; }
    .models-carousel    { height: 26rem; }   /* boîte plus grande */
    .models-slide__text {
        font-size: 1.625rem;                 /* texte caption plus gros */
        line-height: 1.2;
        max-width: 16rem;                    /* limite la largeur */
    }
    .models-carousel__overlay { padding: 1.25rem; }
    .models-slide__caption    {
        padding: 1.25rem 1.5rem;
        padding-right: 8.5rem;               /* évite chevauchement avec les 2 flèches (~120px) */
        bottom: 1.25rem;                     /* aligne avec les flèches du footer */
    }
    .models-header      { flex-direction: column; }

    /* Cards section (Krea-style) titre 30px */
    body.landing-page .cards-section__title { font-size: 30px !important; }
}

/* ── Cancel anytime — 3D card payment error ── */
.bento-card-scene {
    perspective: 600px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0.5rem;
}

.bento-card-3d {
    position: relative;
    animation: card-decline 3.2s ease-in-out infinite;
    transform-style: preserve-3d;
}

.bento-card {
    width: 140px;
    height: 88px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1c1c2e 0%, #2e1a6e 60%, #1a0f40 100%);
    position: relative;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.06) inset;
    overflow: hidden;
}

.bento-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: rgba(255,255,255,0.04);
}

.bento-card__chip {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #e8c840, #b8880a);
    position: absolute;
    top: 18px;
    left: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.bento-card__chip::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 1px;
    border: 0.5px solid rgba(0,0,0,0.25);
}

.bento-card__wave {
    position: absolute;
    right: 16px;
    top: 16px;
    opacity: 0.5;
}

.bento-card__strip {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
}

.bento-card-3d__error {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239,68,68,0.5);
    opacity: 0;
    transform: scale(0.4);
    animation: card-error-pop 3.2s ease-in-out infinite;
}

@keyframes card-decline {
    0%, 28%  { transform: rotateX(0deg) rotateY(0deg) translateY(0); }
    32%      { transform: rotateX(8deg) rotateY(-18deg) translateY(-4px); }
    38%      { transform: rotateX(6deg) rotateY(-10deg) translateX(-7px); }
    42%      { transform: rotateX(6deg) rotateY(10deg)  translateX(7px); }
    46%      { transform: rotateX(6deg) rotateY(-6deg)  translateX(-4px); }
    50%      { transform: rotateX(6deg) rotateY(6deg)   translateX(4px); }
    54%      { transform: rotateX(4deg) rotateY(0deg)   translateX(0); }
    68%      { transform: rotateX(0deg) rotateY(0deg)   translateY(0); }
    100%     { transform: rotateX(0deg) rotateY(0deg)   translateY(0); }
}

@keyframes card-error-pop {
    0%, 30%  { opacity: 0; transform: scale(0.4); }
    40%      { opacity: 1; transform: scale(1.25); }
    48%      { opacity: 1; transform: scale(1); }
    66%      { opacity: 1; transform: scale(1); }
    74%      { opacity: 0; transform: scale(0.6); }
    100%     { opacity: 0; }
}