/* Brand diagnosis visuals: real photography, one bounded responsive stage. */
.brand-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 570;
  margin-inline: auto;
  color: #143767;
}
.brand-hero::before,
.brand-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.brand-hero::before { inset: 12% 2% 5%; border: 1px solid #d4e7fa; background: radial-gradient(circle at 65% 30%, #d2f3ff, #edf7ff 58%, #ffffffb0); }
.brand-hero::after { inset: 22% 12% 15%; border: 1px dashed #c5e0fb; }
.brand-hero__product { position: absolute; z-index: 1; display: block; object-fit: contain; height: auto; max-width: none; filter: drop-shadow(12px 18px 15px #14376724); }
.brand-hero--flowtica .brand-hero__product { width: 12%; height: 69%; left: 45%; top: 16%; transform: rotate(15deg); }
.brand-hero--comu .brand-hero__product { width: 88%; left: 6%; top: 17%; transform: rotate(-9deg); mix-blend-mode: multiply; }
.brand-hero--viture .brand-hero__product { width: 94%; left: 3%; top: 28%; transform: rotate(-6deg); }
.brand-hero__panel { position: absolute; z-index: 2; padding: 18px 20px; border: 1px solid #fff; border-radius: 18px; background: #ffffffed; box-shadow: 0 12px 30px #244d8010; line-height: 1.6; }
.brand-hero__panel--top { top: 3%; left: 0; }
.brand-hero__panel--bottom { bottom: 3%; right: 0; }
.brand-hero__eyebrow { display: block; margin-bottom: 10px; color: #1267e5; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.brand-hero__panel strong { display: block; font-size: 17px; line-height: 1.6; }
.brand-hero__panel ul { list-style: none; padding: 0; margin: 0; }
.brand-hero__panel li { position: relative; padding-left: 15px; margin-top: 5px; font-size: 12px; font-weight: 700; }
.brand-hero__panel li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #1267e5; }
.brand-hero__label { position: absolute; bottom: 12%; left: 5%; font-size: 9px; font-weight: 750; letter-spacing: .14em; color: #536d8d; }
.comu-app .hero { background: radial-gradient(ellipse at 85% 15%, #e0f5ff, #f5f9ff 65%); }
.comu-app .hero h1 { color: #103365; font-size: clamp(2rem, 3.7vw, 3.1rem); }
.comu-app .hero h1 span { white-space: normal; }
.comu-app .hero .hero__lead { color: #233653; }
.comu-app .hero .hero__detail, .comu-app .hero .privacy-note { color: #64748b; }
.comu-app .hero .hero__accent { color: #1267e5; }
.comu-app .hero .eyebrow { color: #1267e5; border-color: #dbeafe; background: #ffffffb0; }
.comu-app .hero .button--primary { background: #1267e5; }
.comu-app .hero .comu-promo { color: #62430d; border-color: #f1cf8a; background: #fff8e9; }
.comu-app .hero .hero__shop-link { color: #143767; background: #fff; border-color: #c8d9ee; }
.comu-app .hero .hero__shop-link--amazon { color: #69450e; background: #fff8e9; border-color: #ead6ad; }
@media (max-width: 767px) {
  .brand-hero { max-width: 420px; margin-top: 24px; }
  .brand-hero__panel { padding: 12px 14px; border-radius: 15px; }
  .brand-hero__eyebrow { font-size: 8px; margin-bottom: 6px; }
  .brand-hero__panel li { font-size: 10px; }
  .brand-hero__panel strong { font-size: 14px; }
  .brand-hero--comu .brand-hero__product { width: 88%; left: 6%; top: 20%; }
  .brand-hero__label { font-size: 7px; }
}