src/components/MatchaCircle.tsx

export function MatchaCircle() {
  return (
    <div className="relative mx-auto my-4 h-[180px] w-[180px]">
      <div
        className="absolute inset-0 rounded-full shadow-[0_30px_60px_rgba(74,107,61,0.25)]"
        style={{
          background:
            'radial-gradient(circle at 35% 30%, #95B485, #4A6B3D 60%, #324A2A 100%)',
        }}
      />
      <div
        className="absolute left-[18%] top-[14%] h-[18%] w-[35%] rounded-full"
        style={{
          background:
            'radial-gradient(ellipse, rgba(255,255,255,0.5), transparent 70%)',
          filter: 'blur(4px)',
        }}
      />
      <span className="absolute inset-0 flex items-start justify-center pt-[28%] font-serif italic text-[22px] text-white/95">
        ~
      </span>
    </div>
  );
}