/* Material Expressive — hero */
#hero {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 96px) 0 104px;
  overflow: hidden;
  isolation: isolate;
  background: #f5f4ff;
}
#hero::before,
#hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
}
#hero::before { width: 560px; height: 260px; left: -150px; top: 100px; background: #d8f5f8; transform: rotate(-18deg); }
#hero::after { width: 520px; height: 320px; right: -170px; bottom: -140px; background: #ffe8b6; transform: rotate(12deg); }
.hero-aurora { position: absolute; z-index: -1; width: 440px; height: 440px; left: 40%; bottom: -320px; border-radius: 50%; background: #ded7ff; }
.hero-inner { position: relative; width: 100%; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(42px, 6vw, 86px); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 13px; margin-bottom: 27px;
  border-radius: var(--r-full); background: #d8f5f8; color: #075766;
  font-size: 11px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase;
}
.hero-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #0c8c9d; box-shadow: 0 0 0 5px rgba(12,140,157,.12); }
.hero-h1 {
  max-width: 620px; margin-bottom: 26px;
  font-family: var(--font-display); font-size: clamp(3rem, 4.8vw, 4.45rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.055em; color: #102b45;
}
.hero-h1 span { color: #395dd8; }
.hero-sub { max-width: 570px; margin-bottom: 35px; color: #50677c; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.75; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.hero-ctas .btn-filled { min-height: 54px; padding: 0 29px; background: #102b45; color: #fff; box-shadow: none; }
.hero-ctas .btn-filled:hover { background: #1b4265; box-shadow: 0 10px 0 #c8ddf0; transform: translateY(-3px); }
.link-light { color: #294d6f; }
.link-light:hover { color: var(--primary); }

.hero-visual { position: relative; min-width: 0; }
.hero-image-shell {
  overflow: hidden;
  aspect-ratio: 1.36 / 1;
  border-radius: 80px 24px 80px 80px;
  background: #0a2340;
  box-shadow: 22px 24px 0 #d7e5ff;
  transform: rotate(1.4deg);
}
.hero-image-shell img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; transform: scale(1.01); }
.hero-badge {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border: 4px solid #f5f4ff; border-radius: 22px; color: #102b45; background: #fff;
  box-shadow: 0 14px 34px rgba(16,43,69,.16); font-size: 12px;
}
.hero-badge span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 14px; color: #fff; background: #7157e8; font-weight: 800; }
.hero-badge i { width: 11px; height: 11px; border-radius: 50%; background: #1caf7d; box-shadow: 0 0 0 6px rgba(28,175,125,.13); }
.badge-top { top: -22px; right: 5%; }
.badge-bottom { left: -25px; bottom: 34px; background: #fff4d9; }

#promesses { background: #fff; }
.proof-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--on-surface-var); font-size: var(--body-md); }
.proof-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--outline-var); }
.proof-bar li { min-height: 110px; display: flex; gap: 15px; align-items: flex-start; padding: 26px 30px 0; }
.proof-bar li:first-child { padding-left: 0; }
.proof-bar li + li { border-left: 1px solid var(--outline-var); }
.proof-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 16px; background: #fff; color: var(--primary); }
.proof-icon svg { width: 21px; height: 21px; }
.proof-bar h3 { font-family: var(--font-display); font-size: var(--title-md); font-weight: 800; color: var(--on-surface); margin-bottom: 4px; }
.proof-bar p { font-size: var(--body-sm); color: var(--on-surface-var); line-height: 1.6; }

@media (max-width: 920px) {
  #hero { padding-top: calc(var(--nav-h) + 88px); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; }
  .hero-visual { width: min(100%, 720px); }
  .proof-bar { grid-template-columns: 1fr; }
  .proof-bar li, .proof-bar li:first-child { padding: 22px 0 0; }
  .proof-bar li + li { border-left: 0; border-top: 1px solid var(--outline-var); }
}
@media (max-width: 600px) {
  #hero { padding: calc(var(--nav-h) + 72px) 0 74px; }
  .hero-h1 { font-size: clamp(2.7rem, 12vw, 3.35rem); }
  .hero-ctas { align-items: flex-start; flex-direction: column; }
  .hero-image-shell { border-radius: 48px 18px 48px 48px; box-shadow: 12px 13px 0 #d7e5ff; aspect-ratio: 1 / 1; }
  .badge-top { right: -5px; top: -22px; }
  .badge-bottom { left: -8px; bottom: 20px; }
}