#miabel-home * { box-sizing: border-box; margin: 0; padding: 0; }
#miabel-home {
  --mg: #7D8566;
  --mgd: #5a6148;
  --mgl: #a4ad8e;
  --mb: #533825;
  --mbl: #8b6245;
  --mc: #f5f0e8;
  --mcd: #ede5d5;
  font-family: 'Prompt', sans-serif;
  color: #533825;
  background: #f5f0e8;
  overflow-x: hidden;
  width: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&display=swap');

/* HERO */
#miabel-home .mh-hero { position: relative; width: 100%; min-height: 100vh; background: #7D8566; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
#miabel-home .mh-hero-left { display: flex; flex-direction: column; justify-content: center; padding: 80px 60px 80px 80px; position: relative; z-index: 2; }
#miabel-home .mh-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; padding: 8px 18px; border-radius: 40px; width: fit-content; margin-bottom: 40px; }
#miabel-home .mh-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c8d4a0; flex-shrink: 0; }
#miabel-home .mh-h1 { font-size: clamp(40px, 4.5vw, 66px); font-weight: 200; line-height: 1.1; color: #ffffff; margin-bottom: 20px; }
#miabel-home .mh-h1 em { font-style: italic; font-weight: 300; color: #c8d4a0; }
#miabel-home .mh-sub { font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.78); line-height: 1.7; max-width: 420px; margin-bottom: 44px; }
#miabel-home .mh-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
#miabel-home .mh-btn-white { background: #ffffff; color: #5a6148; font-family: 'Prompt', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 34px; border: none; border-radius: 50px; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; }
#miabel-home .mh-btn-white:hover { background: #f5f0e8; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
#miabel-home .mh-btn-outline { background: transparent; color: #ffffff; font-family: 'Prompt', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 34px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50px; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; }
#miabel-home .mh-btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); transform: translateY(-2px); }
#miabel-home .mh-stats { display: flex; gap: 36px; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.2); }
#miabel-home .mh-stat-n { font-size: 26px; font-weight: 300; color: white; line-height: 1; }
#miabel-home .mh-stat-l { font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.55); letter-spacing: 1px; margin-top: 5px; text-transform: uppercase; }
#miabel-home .mh-hero-right { position: relative; overflow: hidden; }
#miabel-home .mh-hero-img { position: absolute; inset: 0; }
#miabel-home .mh-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#miabel-home .mh-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, #7D8566 0%, rgba(125,133,102,0.7) 30%, rgba(125,133,102,0.3) 60%, rgba(125,133,102,0.05) 85%, transparent 100%); }

/* BAND */
#miabel-home .mh-band { background: #ede5d5; padding: 24px 60px; display: flex; align-items: center; justify-content: center; gap: 50px; flex-wrap: wrap; }
#miabel-home .mh-band-item { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #533825; white-space: nowrap; }
#miabel-home .mh-band-dot { width: 5px; height: 5px; border-radius: 50%; background: #7D8566; flex-shrink: 0; }

/* COMMON SECTIONS */
#miabel-home .mh-sec { padding: 90px 80px; }
#miabel-home .mh-label { font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: #7D8566; margin-bottom: 14px; }
#miabel-home .mh-title { font-size: clamp(30px, 3.5vw, 48px); font-weight: 200; line-height: 1.15; color: #533825; }
#miabel-home .mh-title em { font-style: italic; color: #5a6148; }

/* CONCERNS */
#miabel-home .mh-concerns { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
#miabel-home .mh-concerns-text p { font-size: 16px; font-weight: 300; line-height: 1.8; color: #8b6245; max-width: 420px; margin: 18px 0 36px; }
#miabel-home .mh-btn-green { background: #7D8566; color: white; font-family: 'Prompt', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; padding: 14px 36px; border: none; border-radius: 50px; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; }
#miabel-home .mh-btn-green:hover { background: #5a6148; transform: translateY(-2px); }
#miabel-home .mh-concerns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#miabel-home .mh-card { background: #ffffff; border-radius: 14px; padding: 24px 20px; text-decoration: none; transition: all 0.3s; border: 1px solid transparent; position: relative; overflow: hidden; cursor: pointer; }
#miabel-home .mh-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #7D8566; transform: scaleX(0); transition: transform 0.3s; transform-origin: left; }
#miabel-home .mh-card:hover { border-color: #a4ad8e; transform: translateY(-4px); box-shadow: 0 10px 32px rgba(125,133,102,0.14); }
#miabel-home .mh-card:hover::after { transform: scaleX(1); }
#miabel-home .mh-card-icon { font-size: 24px; margin-bottom: 10px; display: block; }
#miabel-home .mh-card-name { font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #533825; margin-bottom: 5px; }
#miabel-home .mh-card-desc { font-size: 12px; font-weight: 300; color: #8b6245; line-height: 1.6; }

/* PRODUCTS */
#miabel-home .mh-products { background: #7D8566; }
#miabel-home .mh-products .mh-label { color: rgba(255,255,255,0.5); }
#miabel-home .mh-products .mh-title { color: white; margin-bottom: 50px; }
#miabel-home .mh-products .mh-title em { color: #c8d4a0; }
#miabel-home .mh-prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
#miabel-home .mh-prod-card { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; overflow: hidden; text-decoration: none; transition: all 0.3s; display: block; }
#miabel-home .mh-prod-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.18); }
#miabel-home .mh-prod-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: rgba(255,255,255,0.06); }
#miabel-home .mh-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
#miabel-home .mh-prod-card:hover .mh-prod-img img { transform: scale(1.05); }
#miabel-home .mh-prod-info { padding: 22px; }
#miabel-home .mh-prod-cat { font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #c8d4a0; margin-bottom: 6px; }
#miabel-home .mh-prod-name { font-size: 15px; font-weight: 300; color: white; line-height: 1.4; margin-bottom: 8px; }
#miabel-home .mh-prod-benefit { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 18px; }
#miabel-home .mh-prod-foot { display: flex; align-items: center; justify-content: space-between; }
#miabel-home .mh-prod-price { font-size: 17px; font-weight: 300; color: white; }
#miabel-home .mh-prod-cta { font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #c8d4a0; text-decoration: none; transition: letter-spacing 0.2s; }
#miabel-home .mh-prod-cta:hover { letter-spacing: 2.5px; }
#miabel-home .mh-prod-all { text-align: center; margin-top: 44px; }
#miabel-home .mh-btn-outline-w { background: transparent; color: white; font-family: 'Prompt', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 13px 38px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50px; text-decoration: none; transition: all 0.3s; display: inline-block; }
#miabel-home .mh-btn-outline-w:hover { background: rgba(255,255,255,0.1); border-color: white; }

/* WHY */
#miabel-home .mh-why { background: #ede5d5; }
#miabel-home .mh-why-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
#miabel-home .mh-why-left p { font-size: 16px; font-weight: 300; line-height: 1.8; color: #8b6245; margin: 18px 0 14px; max-width: 400px; }
#miabel-home .mh-pillar { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(83,56,37,0.1); align-items: start; }
#miabel-home .mh-pillar:first-child { padding-top: 0; }
#miabel-home .mh-pillar:last-child { border-bottom: none; }
#miabel-home .mh-pnum { font-size: 32px; font-weight: 200; color: #7D8566; font-style: italic; line-height: 1; }
#miabel-home .mh-ptitle { font-size: 14px; font-weight: 500; color: #533825; margin-bottom: 5px; }
#miabel-home .mh-ptext { font-size: 13px; font-weight: 300; color: #8b6245; line-height: 1.7; }

/* REVIEWS */
#miabel-home .mh-reviews { background: #ffffff; }
#miabel-home .mh-reviews-head { text-align: center; margin-bottom: 52px; }
#miabel-home .mh-reviews-head .mh-title { margin: 0 auto; }
#miabel-home .mh-rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
#miabel-home .mh-rev-card { background: #f5f0e8; border-radius: 18px; padding: 32px 28px; }
#miabel-home .mh-rev-stars { color: #7D8566; font-size: 15px; letter-spacing: 2px; margin-bottom: 18px; }
#miabel-home .mh-rev-text { font-size: 14px; font-weight: 300; font-style: italic; line-height: 1.8; color: #533825; margin-bottom: 24px; }
#miabel-home .mh-rev-author { display: flex; align-items: center; gap: 12px; }
#miabel-home .mh-rev-av { width: 40px; height: 40px; border-radius: 50%; background: #7D8566; color: white; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex-shrink: 0; }
#miabel-home .mh-rev-name { font-size: 13px; font-weight: 500; color: #533825; }
#miabel-home .mh-rev-loc { font-size: 11px; font-weight: 300; color: #8b6245; }

/* ITALY */
#miabel-home .mh-italy { background: #533825; padding: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
#miabel-home .mh-italy h2 { font-size: clamp(26px,3vw,40px); font-weight: 200; color: white; line-height: 1.2; margin-bottom: 16px; }
#miabel-home .mh-italy h2 em { font-style: italic; color: #c8d4a0; }
#miabel-home .mh-italy p { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 28px; }
#miabel-home .mh-badges { display: flex; gap: 10px; flex-wrap: wrap; }
#miabel-home .mh-ibadge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.78); font-size: 10px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 16px; border-radius: 40px; }
#miabel-home .mh-italy-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#miabel-home .mh-istat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px 20px; }
#miabel-home .mh-istat-n { font-size: 32px; font-weight: 200; color: #c8d4a0; line-height: 1; margin-bottom: 7px; }
#miabel-home .mh-istat-l { font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* FINAL CTA */
#miabel-home .mh-cta-final { background: #f5f0e8; text-align: center; padding: 110px 80px; }
#miabel-home .mh-cta-final h2 { font-size: clamp(32px,4.5vw,54px); font-weight: 200; color: #533825; line-height: 1.2; max-width: 640px; margin: 0 auto 20px; }
#miabel-home .mh-cta-final h2 em { font-style: italic; color: #5a6148; }
#miabel-home .mh-cta-final p { font-size: 16px; font-weight: 300; color: #8b6245; max-width: 460px; margin: 0 auto 44px; line-height: 1.7; }
#miabel-home .mh-final-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#miabel-home .mh-btn-dark { background: #533825; color: white; font-family: 'Prompt', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 14px 38px; border: none; border-radius: 50px; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-block; }
#miabel-home .mh-btn-dark:hover { background: #2c2017; transform: translateY(-2px); }

/* REVEAL */
#miabel-home .mh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
#miabel-home .mh-reveal.mh-vis { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  #miabel-home .mh-sec { padding: 70px 40px; }
  #miabel-home .mh-hero { grid-template-columns: 1fr; }
  #miabel-home .mh-hero-left { padding: 70px 40px 50px; }
  #miabel-home .mh-hero-right { height: 380px; }
  #miabel-home .mh-hero-overlay { background: linear-gradient(to bottom, #7D8566 0%, transparent 60%); }
  #miabel-home .mh-concerns { grid-template-columns: 1fr; gap: 44px; }
  #miabel-home .mh-prod-grid { grid-template-columns: 1fr 1fr; }
  #miabel-home .mh-why-inner { grid-template-columns: 1fr; gap: 44px; }
  #miabel-home .mh-rev-grid { grid-template-columns: 1fr; gap: 18px; }
  #miabel-home .mh-italy { grid-template-columns: 1fr; gap: 44px; padding: 60px 40px; }
}
@media (max-width: 640px) {
  #miabel-home .mh-sec { padding: 52px 24px; }
  #miabel-home .mh-hero-left { padding: 52px 24px 36px; }
  #miabel-home .mh-stats { gap: 20px; flex-wrap: wrap; }
  #miabel-home .mh-concerns-grid { grid-template-columns: 1fr; }
  #miabel-home .mh-prod-grid { grid-template-columns: 1fr; }
  #miabel-home .mh-italy-stats { grid-template-columns: 1fr 1fr; }
  #miabel-home .mh-cta-final { padding: 70px 24px; }
  #miabel-home .mh-band { padding: 18px 24px; gap: 20px; }
}

/* QUIZ OVERLAY */
#mh-quiz-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(43,32,17,0.7); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
#mh-quiz-overlay.mh-quiz-open { opacity: 1; pointer-events: all; }
#mh-quiz-box { background: #f5f0e8; border-radius: 24px; width: 90%; max-width: 620px; max-height: 90vh; overflow-y: auto; padding: 52px 48px; position: relative; transform: translateY(20px); transition: transform 0.4s ease; }
#mh-quiz-overlay.mh-quiz-open #mh-quiz-box { transform: translateY(0); }
#mh-quiz-close { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 22px; color: #8b6245; cursor: pointer; line-height: 1; padding: 4px 8px; transition: color 0.2s; }
#mh-quiz-close:hover { color: #533825; }
.mh-qstep { display: none; }
.mh-qstep.mh-qactive { display: block; }
.mh-qprogress { display: flex; gap: 6px; margin-bottom: 36px; }
.mh-qprog-dot { flex: 1; height: 3px; background: #ede5d5; border-radius: 3px; transition: background 0.3s; }
.mh-qprog-dot.mh-qfilled { background: #7D8566; }
.mh-qlabel { font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: #7D8566; margin-bottom: 10px; }
.mh-qtitle { font-size: clamp(22px, 3vw, 30px); font-weight: 200; color: #533825; line-height: 1.3; margin-bottom: 32px; }
.mh-qtitle em { font-style: italic; color: #5a6148; }
.mh-qoptions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.mh-qopt { background: #ffffff; border: 2px solid transparent; border-radius: 14px; padding: 18px 16px; cursor: pointer; transition: all 0.25s; text-align: left; }
.mh-qopt:hover { border-color: #a4ad8e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(125,133,102,0.12); }
.mh-qopt.mh-qselected { border-color: #7D8566; background: #f0f3ea; }
.mh-qopt-icon { font-size: 22px; margin-bottom: 8px; display: block; }
.mh-qopt-name { font-size: 13px; font-weight: 500; color: #533825; margin-bottom: 3px; }
.mh-qopt-desc { font-size: 11px; font-weight: 300; color: #8b6245; line-height: 1.5; }
.mh-qnext { display: none !important; }
#mh-qresult { display: none; }
#mh-qresult.mh-qactive { display: block; }
.mh-qresult-title { font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #7D8566; margin-bottom: 8px; }
.mh-qresult-headline { font-size: clamp(22px, 3vw, 30px); font-weight: 200; color: #533825; margin-bottom: 8px; }
.mh-qresult-headline em { font-style: italic; color: #5a6148; }
.mh-qresult-sub { font-size: 14px; font-weight: 300; color: #8b6245; line-height: 1.7; margin-bottom: 32px; }
.mh-qprods { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.mh-qprod { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: center; background: white; border-radius: 14px; padding: 14px 16px; text-decoration: none; transition: all 0.25s; border: 1px solid transparent; }
.mh-qprod:hover { border-color: #a4ad8e; transform: translateX(4px); }
.mh-qprod-img { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; background: #f5f0e8; flex-shrink: 0; }
.mh-qprod-img img { width: 100%; height: 100%; object-fit: cover; }
.mh-qprod-name { font-size: 13px; font-weight: 400; color: #533825; margin-bottom: 3px; line-height: 1.4; }
.mh-qprod-benefit { font-size: 11px; font-weight: 300; color: #8b6245; line-height: 1.5; }
.mh-qprod-arrow { font-size: 18px; color: #a4ad8e; flex-shrink: 0; }
.mh-qresult-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.mh-qrestart { background: none; border: 1px solid #a4ad8e; color: #7D8566; font-family: 'Prompt', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 28px; border-radius: 50px; cursor: pointer; transition: all 0.3s; }
.mh-qrestart:hover { border-color: #7D8566; background: #f0f3ea; }
@media (max-width: 640px) {
  #mh-quiz-box { padding: 36px 24px; }
  .mh-qoptions { grid-template-columns: 1fr; }
  .mh-qprod { grid-template-columns: 56px 1fr auto; }
}