/* Stage 4: the existing expertise badge only. Retain its border width,
   radius, padding, placement, typography, transforms and animation. */
.hero-visual .floating-note{
  border-color:transparent;
  background:
    radial-gradient(ellipse at 4% 0%,#ffffff12,transparent 58%),
    linear-gradient(160deg,#191919b8,#101010c2 60%,#202020b8);
  box-shadow:
    inset 0 1px 2px #ffffff24,
    inset 1px 0 2px #ffffff0d,
    inset 0 -2px 3px #00000070,
    3px 10px 20px #00000080;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* A broken optical rim: short bright upper-left reflection, subdued sides,
   a secondary lower-right catch. This is not a uniformly glowing outline. */
.hero-visual .floating-note:before{
  content:'';
  position:absolute;
  inset:-1px;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background:conic-gradient(from 110deg at 35% 25%,
    #ffffff12 0deg,#ffffff08 42deg,#ffffff50 72deg,
    #ffffff14 110deg,#ffffff0a 150deg,#ffffffaa 212deg,
    #ffffff70 246deg,#ffffff20 285deg,#ffffff09 330deg,#ffffff12 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

/* Subtle internal reflections, below the sharp original text and icon. */
.hero-visual .floating-note:after{
  content:'';
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:5px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 0%,#ffffff13,transparent 50%),
    linear-gradient(165deg,transparent 65%,#ffffff06 85%,transparent);
  box-shadow:inset 0 -1px 1px #ffffff14;
}

/* Preserve the existing mobile no-blur policy with a legible darker fallback. */
.terrain-mobile .hero-visual .floating-note{
  background-color:#10101099;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@supports not (backdrop-filter:blur(1px)){
  .hero-visual .floating-note{background-color:#10101099}
}
@media(forced-colors:active){
  .hero-visual .floating-note{background:Canvas;border-color:CanvasText;box-shadow:none;backdrop-filter:none}
  .hero-visual .floating-note:before,.hero-visual .floating-note:after{display:none}
}