.hero-section { position: relative; isolation: isolate; padding-block: clamp(3.25rem, 6vw, 5.25rem); background: var(--gradient-hero); }
.hero-section::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .42; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
.hero-title { max-width: 48rem; margin: 0; font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); letter-spacing: -.055em; line-height: var(--line-height-tight); }
.hero-title-accent { color: var(--color-primary); }
.hero-dashboard { position: relative; }
.hero-dashboard::before { content: ""; position: absolute; inset: 12% -5% -8% 8%; z-index: -1; border-radius: 50%; background: var(--color-primary-200); filter: blur(70px); opacity: .45; }
.float-note { position: absolute; z-index: 3; display: none; align-items: center; gap: .65rem; padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated); box-shadow: var(--shadow-md); color: var(--color-text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.float-note--top { inset-block-start: 11%; inset-inline-end: -5%; }
.float-note--bottom { inset-block-end: 8%; inset-inline-start: -7%; }

.trust-strip { border-block: 1px solid var(--color-border); background: var(--color-surface); }
.trust-item { display: flex; align-items: center; gap: .7rem; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.trust-item svg { color: var(--color-primary); }

.problem-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.problem-card--before { background: color-mix(in srgb, var(--color-error-soft) 40%, var(--color-surface)); }
.problem-card--after { border-color: var(--color-primary-200); background: color-mix(in srgb, var(--color-primary-50) 58%, var(--color-surface)); box-shadow: var(--shadow-md); }
.comparison-row { display: flex; align-items: center; gap: var(--space-3); padding-block: .7rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.comparison-row:last-child { border-bottom: 0; }

.dark-panel { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--gradient-dark-panel); color: #fff; box-shadow: var(--shadow-lg); }
.dark-panel::after { content: ""; position: absolute; width: 28rem; height: 28rem; inset-inline-end: -12rem; inset-block-start: -17rem; border: 1px solid rgb(255 255 255 / .15); border-radius: 50%; box-shadow: 0 0 0 70px rgb(255 255 255 / .025), 0 0 0 140px rgb(255 255 255 / .02); pointer-events: none; }

.device-stage { position: relative; min-height: 26rem; }
.laptop { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: min(92%, 34rem); padding: .55rem; border: 1px solid #334155; border-radius: 1rem; background: #182235; box-shadow: var(--shadow-lg); }
.laptop-screen { overflow: hidden; aspect-ratio: 16 / 10; border-radius: .55rem; background: var(--color-surface); }
.laptop-base { position: absolute; inset-inline-start: -5%; inset-block-end: -.75rem; width: 110%; height: .8rem; border-radius: 0 0 1rem 1rem; background: #334155; }
.phone { position: absolute; inset-inline-end: 0; inset-block-end: 0; width: min(36%, 11rem); padding: .45rem; border: 1px solid #475569; border-radius: 1.6rem; background: #0f172a; box-shadow: var(--shadow-lg); }
.phone-screen { overflow: hidden; aspect-ratio: 9 / 18.5; border-radius: 1.18rem; background: var(--color-surface); }
.phone-notch { width: 42%; height: .36rem; margin: .2rem auto .45rem; border-radius: var(--radius-pill); background: #334155; }

.step-number { color: var(--color-primary-200); font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: var(--font-weight-extrabold); letter-spacing: -.08em; line-height: 1; }
.step-card { position: relative; }
.step-card:not(:last-child)::after { content: ""; position: absolute; display: none; inset-block-start: 2.2rem; inset-inline-end: -2.5rem; width: 4rem; border-block-start: 1px dashed var(--color-primary-300); }

.metric-card { padding: var(--space-6); border-inline-start: 3px solid var(--color-primary); background: rgb(255 255 255 / .06); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
html[dir="rtl"] .metric-card { border-inline-start: 3px solid var(--color-primary); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

.testimonial-quote { position: relative; }
.testimonial-quote::before { content: "“"; position: absolute; inset-block-start: -.7rem; inset-inline-start: -.1rem; color: var(--color-primary-100); font-size: 5rem; font-family: Georgia, serif; line-height: 1; }
.testimonial-quote p { position: relative; z-index: 1; }

.contact-panel { border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.final-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-2xl); background: var(--gradient-dark-panel); color: #fff; box-shadow: var(--shadow-lg); }
.final-cta h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); }
.final-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 20% 30%, rgb(96 165 250 / .24), transparent 30%), radial-gradient(circle at 80% 80%, rgb(45 212 191 / .16), transparent 28%); }
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface-muted); }
.footer-link { color: var(--color-text-secondary); font-size: var(--font-size-sm); transition: color var(--transition-fast); }
.footer-link:hover { color: var(--color-primary); }

/* Keep section introductions and their content visually connected. */
#solution .mt-12, .section-space ol.mt-12 { margin-top: var(--space-10); }
#fonctionnalites .mt-10, section[aria-labelledby="testimonials-title"] .mt-10 { margin-top: var(--space-8); }
#fonctionnalites .mt-7, #faq .mt-7 { margin-top: var(--space-5); }
#packs .mt-14 { margin-top: var(--space-12); }
#packs .mt-8, section[aria-labelledby="devices-title"] .mt-8 { margin-top: var(--space-6); }
.final-cta-section { padding-block: var(--space-16); }

.reveal { transform: translateY(18px); opacity: 0; transition: transform var(--transition-slow), opacity var(--transition-slow); }
.reveal.is-visible { transform: none; opacity: 1; }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }

@media (min-width: 640px) {
  .float-note { display: flex; }
}
@media (min-width: 1024px) {
  .step-card:not(:last-child)::after { display: block; }
}
@media (max-width: 767px) {
  .hero-title { letter-spacing: -.04em; }
  .section-title { letter-spacing: -.025em; }
  .device-stage { min-height: 21rem; }
  .pricing-card--featured { margin-block: var(--space-4); }
  .modal { padding: 0; place-items: end center; }
  .modal-dialog { width: 100%; max-height: 94vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
@media (max-width: 420px) {
  .btn { width: 100%; }
  .hero-dashboard .dashboard-sidebar { display: none; }
  .device-stage { min-height: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { transform: none; opacity: 1; }
}