/* ===== HERO ===== */
.hero {
    padding: 48px 0 28px;
    background:
    radial-gradient(1200px 600px at 0% 0%, rgba(142,38,32,.15), transparent 60%),
    radial-gradient(1000px 600px at 100% -10%, rgba(255,161,0,.10), transparent 60%);
}
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.brand { height: 40px; margin-bottom: 18px; }

.hero__text h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 10px; letter-spacing: -0.02em; }
.hero__text .accent { color: var(--primary); }
.hero__text p { margin: 0 0 18px; }

.integrations { display: flex; gap: 12px; align-items: center; margin: 18px 0 0; padding: 0; list-style: none; }
.integrations img { width: 26px; height: 26px; opacity: .85; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

.hero__visual { display: flex; justify-content: center; }
.illustration {
    width: 100%; max-width: 520px; margin: 0;
    /*border-radius: 16px; overflow: hidden;
    background: var(--card);
    box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 1px 0 var(--ring) inset;
    border: 1px solid var(--ring);*/
}
.illustration img { width: 100%; height: auto; display: block; }

/* ===== VALEUR ===== */
.value { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 28px 0; }


/* ===== FEATURES ===== */
.features { background: var(--card-2); border-block: 1px solid var(--ring); padding: 44px 0; }
.features h2, .how h2, .cta h2 { font-size: clamp(22px, 3.6vw, 34px); letter-spacing: -.01em; margin: 0 0 18px; }
.features .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature {
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: 14px;
    padding: 16px;
}
.feature i { width: 22px; height: 22px; color: var(--primary); margin-bottom: 8px; }
.feature h3 { margin: 0 0 6px; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); }

/* ===== HOW ===== */
.how { padding: 40px 0; }
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3,1fr); }
.steps li {
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: 14px;
    padding: 16px;
}
.steps .num {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--primary); color: #fff; font-weight: 700; margin-bottom: 8px;
}
.steps h3 { margin: 0 0 6px; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--muted); }

/* ===== VISUAL BREAK ===== */
.visual-break { padding: 28px 0; }
.wide-visual {
    margin: 0; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--ring); background: var(--card);
    }
.wide-visual img { width: 100%; height: auto; display: block; }

/* ===== CTA ===== */
.cta { text-align: center; padding: 44px 0; }
.cta p { color: var(--muted); margin: 8px 0 18px; }

/* ===== Responsive ===== */
@media (max-width: 900px){
    .hero__inner { grid-template-columns: 1fr; }
    .value { grid-template-columns: 1fr; }
    .features .grid, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
    .features .grid, .steps { grid-template-columns: 1fr; }
}